用wxParse解析微信小程序富文本

今天写微信小程序的时候，发现从服务器端获取的数据，然后渲染到模板，会直接输出。

例如:

<view>
    some coding
</view>

后来发现在github上有一个插件wxParse，支持HTML及markdown解析。

下面是使用方法：

• 复制文件夹wxParse

  - wxParse/
    -wxParse.js       #必须存在
    -html2json.js     #必须存在
    -htmlparser.js    #必须存在
    -showdown.js      #必须存在
    -wxDiscode.js     #必须存在
    -wxParse.wxml     #必须存在
    -wxParse.wxss     #必须存在
    -emojis           #可选

• 引入必要文件

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

#在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";

• 数据绑定

  var article = '<div>我是HTML代码</div>';
  #WxParse.wxParse(bindName , type, data, target,imagePadding)
  #1.bindName绑定的数据名(必填)
  #2.type可以为html或者md(必填)
  #3.data为传入的具体数据(必填)
  #4.target为Page对象,一般为this(必填)
  #5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
  var that = this;
  WxParse.wxParse('article', 'html', article, that, 5);

• 模版引用

  #引入模板
  <import src="你的路径/wxParse/wxParse.wxml"/>
  #这里data中article为bindName
  <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

>>更多用法

赏

谢谢你请我吃糖果

支付宝

微信