您的位置:首页 > 移动开发 > 微信开发

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

2020-08-08 20:41 555 查看

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

富文本的解析,在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}}"/>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: