微信小程序关于商品详情类的富文本解析器

微信小程序关于商品详情类的富文本解析器

富文本的解析，在vue中有v-html解析富文本的方法，但是在微信小程序中就不可以了，所以今天老师讲解了一种关于微信小程序的富文本的解析方法

• github地址：https://github.com/icindy/wxParse

• 使用方法

  • 1，下载github官方wxParse目录到小程序的根目录下

    文件结构：

    ​ wxParse/

    ​ -wxParse.js(必须存在)
    ​ -html2json.js(必须存在)
    ​ -htmlparser.js(必须存在)
    ​ -showdown.js(必须存在)
    ​ -wxDiscode.js(必须存在)
    ​ -wxParse.wxml(必须存在)
    ​ -wxParse.wxss(必须存在)
    ​ -emojis(可选)

  • 2，引入必要的文件：

     //在要使用的页面中引入WxParse模块
      var WxParse = require('/wxParse/wxParse.js');
    

  • 3，将WxParse.css引入在app.wxss中

    @import "/wxParse/wxParse.wxss";
    

  • 4，将富文本绑定给wxParse

    格式：wxparse.wxparse(参数1，参数2，参数3，参数4，参数5)

    参数说明：

    ​ 1，bindName绑定的数据名（必须）

    ​ 2，type选填html或md（必须）

    ​ 3，data为传入的具体数据（必填）

    ​ 4，target为page对象，一般为this（必填）

    ​ 5，imagePadding为当图片自适应是左右的单一padding（默认值0，可选）

    例如：

    var article = '<div>我是HTML代码</div>';
    var that = this;
    WxParse.wxParse('article', 'html', article, that, 5);
    

  • 5，引入模板

    <import src="/wxParse/wxParse.wxml"/>
    //这里data中article为bindName
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
    

本文地址：https://blog.csdn.net/weixin_48210599/article/details/107885431