虽然看了很多网上的教程步骤 直接套代码可以实现效果 但是当套到自己的代码时却老是失败 。
经过整整三天的折磨 现在 终于是做出来了。现在记录一下这插件的使用 并且写上自己的感受。。。。。。被坑的
一、 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串中的其他数据 还需继续琢磨琢磨。。。。。