E企盈营销工具技术服务商 热线:4006-838-530

小程序富文本显示WxParse(列表循环显示)

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序富文本显示WxParse(列表循环显示)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏