最近项目上遇到在微信小程序里需要显示新闻内容, 新闻内容是通过接口读取的服务器中的富文本内容, 是 html 格式的, 小程序默认是不支持 HTML 格式的内容显示的, 那我们需要显示 HTML 内容的时候, 就可以通过 wxParse 来实现.
首先我们在 GitHub 上下载 wxParse
https://github.com/icindy/wxParse
下载完之后我们需要用到目录下的 wxParse 文件夹, 把他拷贝到我们的项目目录下
下面是具体的使用步骤
1. 在 App.wxss 全局样式文件中, 需要引入 wxParse 的样式表
@import "/page/wxParse/wxParse.wxss";
2. 在需要加载 HTML 内容的页面对应的 JS 文件里引入 wxParse
var WxParse = require('../../wxParse/wxParse.js');
3. 通过调用 WxParse.wxParse 方法来设置 HTML 内容
- /**
- * WxParse.wxParse(bindName , type, data, target,imagePadding)
- * 1.bindName 绑定的数据名 (必填)
- * 2.type 可以为 HTML 或者 md(必填)
- * 3.data 为传入的具体数据 (必填)
- * 4.target 为 Page 对象, 一般为 this(必填)
- * 5.imagePadding 为当图片自适应是左右的单一 padding(默认为 0, 可选)
- */
- Page({
- data: {
- },
- onLoad: function () {
- var that = this;
- wx.request({
- url: '',
- method: 'POST',
- data: {
- 'id':13
- },
- header: {
- 'content-type': 'application/json'
- },
- success: function(res) {
- var article = res.data[0].post;
- WxParse.wxParse('article', 'html', article, that,5);
- }
- })
- }
- })
4. 在页面中引用模板
- <import src="../../wxParse/wxParse.wxml" />
- <template is="wxParse" data="{{wxParseData:article.nodes}}" />
来源: http://www.bubuko.com/infodetail-3210682.html