万豪棋牌游戏客服电话
  咨询电话:18823191274

万豪棋牌游戏官网

微信小程序之富文本解析(附源码和效果图)

示例效果图:

一、简介及说明

在小程序项目开发中,会遇到富文本编辑的内容,后台返回到小程序端无法解析,这时就需要一个插件来处理。微信小程序没有提供webview等html解析,原展示类文本没有办法图文并茂的原生展示,wxParse主要目的就是弥补富文本解析空缺的问题。

插件由联盟网站DEV开发,开发者:icindy,最新版本请查看github地址:wxParse

二、 使用方法

1、下载wxParese文件,拷贝wxParse文件夹到自己的小程序项目中。

2、在项目文件中使用(1)在需要使用的wxml文件中引入WxParse.wxml示例:

<!--index.wxml--><import src="../../wxParse/wxParse.wxml" />

(2)在当前页对应的js中引入wxParse.js示例:

//index.js const WxParse = require("../../wxParse/wxParse.js");

(3)使用template组件在刚刚引入的wxml中插入组件,具体插入的位置是需要转换的地方。示例:

<!--index.wxml--><import src="../../wxParse/wxParse.wxml" /><view > <view > <template is="wxParse" data="{{wxParseData:article.nodes}}" /> </view></view>

(4)在当前页的js中使用WxParse中的方法

//index.jsconst WxParse = require("../../wxParse/wxParse.js");Page({ data: { }, onLoad: function () { let that = this; let ceshi = `<div> <span>请说出你喜欢的水果?</span> <ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul> </div>`; WxParse.wxParse("article", "html", ceshi, that, 5); }, })

参数说明:

示例代码已上传到GitHub上,可直接拷贝示例代码的wxParse文件使用,地址:wx-wxParese,欢迎start。