实操-微信小程序渲染html内容

在小程序中渲染html内容–wxParse

下载 wxParse 组件并配置到项目当中

github下载组件
下载完成后其实我们只需要用到：wxParse目录里的文件

将红框中的文件复制到我们自己的项目中即可，例如：

使用 wxParse

1、在 js文件中引入

// pages/user_deal/index.js
var util = require('../../utils/util.js');
var WxParse = require('../../wxParse/wxParse/wxParse.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    util.getWebDataWithPostOrGet({
      url: 'getUserAgreement',
      param: {},
      method: "get",
      success: function (data) {
        WxParse.wxParse('message', 'html', data.message, that, 5);
        // that.setData({
        //   message: data.message
        // })
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

注：util 是封装过的 请求函数，此处替换为小程序自带的 请求函数即可
WxParse.wxParse(‘message’, ‘html’, data.message, that, 5);
参数解释：
1：‘message’，绑定的数据名(必填)
2：‘html’，可以为html或者md(必填)
3：‘data.message’，为传入的具体数据(必填)
4：‘that’，为Page对象,一般为this(必填)
5：‘ 5’，imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

2、在wxml中使用

<!--pages/user_deal/index.wxml-->
<view class="container">
 <import src="../../wxParse/wxParse/wxParse.wxml"/> 
     <template is="wxParse" data="{{wxParseData:message.nodes}}"/>
</view>

保存一下，已经可以看到效果了