美文网首页
小程序常见问题处理

小程序常见问题处理

作者: sorry510 | 来源:发表于2019-12-31 15:32 被阅读0次

    使用了es6的某些语法有些无法编译成功如何解决

    image.png

    将增强编译打上勾即可

    小程序的css中的本地的背景图上传到服务器无法显示的问题

    • 可以将本地的背景图改为可以通过url访问的图片地址
    • 可以将图片打包为base64编码(随便找个在线转换图片为base64的网页),然后加载到本地背景图中
    // base64img.js
    module.exports = 'base64图片'
    
    // 使用方式
    const base64bg = require('./base64bg.js')
    

    富文本报错,需要转义部分字符

    // util.js
    const richHtml = str => {
      return str
        .replace(/(&.+?;)/g, (matched)=> {
          let rs = asciiChartSet_en2c[matched];
          return rs == undefined ? '' : rs;
        })
        .replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
        // .replace(/\<img/gi, '<img class="rich-img" ');
    }
    
    const asciiChartSet_en2c = {
      '&nbsp;': ' ',
      '&excl;': '!',
      '&quot;': '"',
      '&num;': '#',
      '&dollar;': '$',
      '&percnt;': '%',
      '&amp;': '&',
      '&apos;': '\'',
      '&lpar;': '(',
      '&rpar;': ')',
      '&ast;': '*',
      '&plus;': '+',
      '&comma;': ',',
      '&hyphen;': '-',
      '&period;': '.',
      '&sol;': '/',
      '&colon;': ':',
      '&semi;': ';',
      '&lt;': '<',
      '&equals;': '=',
      '&gt;': '>',
      '&quest;': '?',
      '&commat;': '@',
      '&lsqb;': '[',
      '&bsol;': '\\',
      '&rsqb;': ']',
      '&circ;': '^',
      '&lowbar;': '_',
      '&grave;': '`',
      '&lcub;': '{',
      '&verbar;': '|',
      '&rcub;': '}',
      '&tilde;': '~',
    }
    
    module.exports = {
      richHtml
    }
    
    // index.js
    // data: {
    //    content: ''
    //  },
    
    const { richHtml } = require('../../../../utils/util.js')
    // ...
    let content = fetchContent('xxx')
    content = richHtml(content)
    this.setData({ content })
    // ...
    
    // index.wxml
    <rich-text nodes="{{content}}"></rich-text>
    

    相关文章

      网友评论

          本文标题:小程序常见问题处理

          本文链接:https://www.haomeiwen.com/subject/denboctx.html