小程序解析html标签 div

 

由于微信小程序要与微信小程序同步信息。

微信小程序的标签和原来我们习惯用的标签是不一样的，例如视图容器标签小程序是view，然而html就很多比如常用的div就和小程序的view类似。

现在从服务端传输过来的信息是<div>...</div>格式的，需要解析成小程序识别的格式

我们就需要用到第三方插件wxPrase，这个是GitHub上共享的

github地址：https://github.com/icindy/wxParse   直接下载wxPrase文件夹。

其他不用，但可以参考他们的，只需要wxPrase文件夹里面的copy到自己的工程根目录下

第一步：导入

@import "/wxParse/wxParse.wxss";

第二步：在需要解析的界面导入

在相应界面的js里面加入(放在最上面)

var WxParse = require('../../wxParse/wxParse.js');

 在请求数据处加

  onLoad: function (options) {
    var that = this
    wx.request({
      url: 'https://**********' + options.id,
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
         that.setData({
           art: res.data
         })
        var article = res.data.body;

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

 第三步：在wxml中导入

wxParseData:article相当于一个对象，nodes才是真正的值res.data.body，所以nodes必加。