小程序中利用wxparse插件进行图文解析详解

背景：由于小程序不支持html标签，因此为了让小程序与H5共用一段图文，解析成小程序识别的标签就显得重要了

插件：wxparse

用法一：通篇图文解析，具体请看插件文档

1.1、下载插件js等相关文件：

1.2、在js中引入

var WxParse = require('../../resources/wxParse/wxParse.js');
var util = require('../../../utils/util.js');
var app = getApp()
Page({
  data: {
    article: '',//图文
  },
  onLoad: function () {
    var that = this;
    var article = wx.getStorageSync('article');
    if (!util.isEmpty(article)) {
      that.setData({ article: article });
    }
    WxParse.wxParse('article', 'html', article, that, 1);
  }
  
})

1.3、在wxml中引入

< import src= "../../resources/wxParse/wxParse.wxml" / >

1.4、在wxss中引入

@import "../../ resources/ wxParse/ wxParse. wxss";

1.5、在wxml用法

<view class='content' id="list1">
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

用法二、把数组中的json对象中的某个key所对应的value替换成小程序识别的对象

2.1、在js中引入

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

2.2、在wxml和wxss中引入同上

2.3、在js中的用法

      for (var i = 0; i < obj.length; i++) {
            obj[i]["value6"] = WxParse.html2json(obj[i]["value6"], 'returnData');
          }

console.log出来后可以看到

可以看得html格式的已转成小程序识别的对象

2.4、在wxml调用展示

 <block wx:for="{{itemList}}" wx:for-index="idx" wx:key="advertmanageid">

<template is="wxParse" data="{{wxParseData:item['value6'].nodes}}" />
</block>