虽然看了很多网上的教程步骤 直接套代码可以实现效果 但是当套到自己的代码时却老是失败 。
经过整整三天的折磨 现在 终于是做出来了。现在记录一下这插件的使用 并且写上自己的感受。。。。。。被坑的
一、 WxParse 插件的下载
wxParse-微信小程序富文本解析组件：https://github.com/icindy/wxParse
把wxparse 文件夹 复制到你个人的目录下 （其实就是复制到项目在硬盘的根目录）如图
文件夹的位置与pages的位置是同级的
二、在app.wxss 顶部导入wxparse.wxss文件
在app.wxss写上@import "wxParse/wxParse.wxss"; 如图
三、使用时需要在页面导入<import src="../../wxParse/wxParse.wxml"/>和let WxParse = require("../../wxParse/wxParse.js");文件
假如你要在A页面使用 你要在A.wxml 顶部写上<import src="../../wxParse/wxParse.wxml"/> 并且在 A.js文件顶部写上WxParse = require("../../wxParse/wxParse.js") 如图
1.A.wxml（我这里是guide.wxml）文件
2.A.js (我这里是guide.js)文件
四、接收后台的json 数据 并对 html 内容进行解析
onLoad: function (options) { var that = this; wx.request({ url: Aurl + "?A=" + A, header: { 'content-type': 'application/json' // 默认值 }, success: function (res) { let artilesA=res.data; for(let i =0 ; i< artilesA.length ; i++){ WxParse.wxParse('content'+i, 'html', artilesA[i]['content'], that, 5); if (i === artilesA.length - 1){ WxParse.wxParseTemArray("artileList", 'content', artilesA.length, that) } } that.setData({ artiles:artilesA }); } }) }前台显示
<view> <--这里的 wx:fot="artileList" 必须和 js文件里的 WxParse.wxParseTemArray("artileList", 'content', artilesA.length, that) artileList 一致 我就是被坑在这里 that.setData({ artiles:artilesA });我将 本该填写artileList 填了artiles 导致页面空白!!!!特意写这个博客记录自己的错误希望不要再犯 --> <block wx:for="{{artileList}}" wx:key="item" wx:for-item="item" wx:for-index="idx"> <template is="wxParse" data="{{wxParseData:item}}"/> </block></view>到这里 就可以使用wxparse 插件正常的在小程序显示html 文件了。
当然我还要显示json串中的其他数据 还需继续琢磨琢磨。。。。。
小程序
