微信小程序中显示HTML格式内容的实例
因为个人注册的开发者不允许在微信小程序中加载网页，因此开发者都遇到过需要将网页中的图文内容完整加载到微信小程序中的情况，如果网页数目较多，逐个编辑wxml代码往往过于麻烦，因此这篇文章将介绍如何借助Bmob云后端的图文素材功能和大神编写的wxParse组件实现网页内容在微信小程序中的快速配置。如果读者有更好的办法，欢迎在下方留言交流。（大神勿喷）
以下部分内容转载自：点击打开链接
准备工作：
首先我们下载wxParse
github地址：https://github.com/icindy/wxParse
本地下载：http://xiazai.jb51.net/201704/yuanma/wxParse-master(jb51.net).rar
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、在页面中引用模板
这样就可以在微信小程序中嵌入html内容了
以下为个人使用的实例：
关于如何将图文素材搜集并加入云端数据库
不得不说，借助Bmob的图文素材功能将十分方便。进入Bmob云的素材模块，点击新建素材，输入标题，然后直接复制网页内容（不可太过复杂，最好只包含图文内容），保存后就可以看到，应用文件部分已经自动创建了关于该图文的html格式文件，并且已经在数据库中自动新建了名为_Article的表格，里面包含了该图文html格式的文本，接下来可以根据自己需求手动的去添加其他列，比如标题或者预览图片等。
接下来，在微信小程序只需直接访问Bmob数据库中的_Article就可以根据自己的需求获取相关已存在表内的html格式文本。如果没有Bmob的使用经验，可以参考相关官方文档。（http://doc.bmob.cn/data/wechat_app/develop_doc/#_17）
以下为相关页面的函数代码：
onLoad:function (e) {
var _this = this;//因为this作用域指向问题 ，success函数实际是一个闭包 ， 无法直接通过this来setData
var Diary = Bmob.Object.extend("_Article");
var query = new Bmob.Query(Diary);
// 查询所有数据
query.find({
success: function (results) {
console.log("共查询到 " + results.length + " 条记录");
// 循环处理查询到的数据
_this.setData({
jieguo: [],
})//初始化，防止出现上一次的数据
for (var i = 0; i < results.length; i++) {
var object = results[i];
var lists = _this.data.jieguo;
lists.push(object);//实质是添加lists数组内容，使for循环多一次
_this.setData({
jieguo: lists,
})
}
if (results.length == 0) {
//空数组的值为?
console.log('查询失败');
//console.log(Boolean(_this.data.jieguo));
wx.showToast({
title: '权限不足',
})
}
},
error: function (error) {
console.log("查询失败: " + error.code + " " + error.message);
}
});
},//获取所有_Article表中的标题、预览文字、图片并以列表形式加载到页面中代码在使用过程中发现一个问题，借助wx.navigateTo在页面间传值时，html文本无论是以对象形式还是以string形式都只能传递前几行，不知道是不是微信官方为了避免在微信小程序内加载网页内容而添加的限制。最后只能采取页面跳转后重新根据点击标题进行查询获取相关html文本。一下为代码实例：
back: function (e) {
var num = e.currentTarget.id
var model = String(this.data.jieguo[num].attributes.content)//不同于页面渲染中使用，需要加".attributes."如this.data.jieguo[num].attributes.content
console.log(model)
wx.navigateTo({
url: '../xinxi/xinxi?str=' + this.data.testStr,
});
}//获取用户点击的相关图文的标题，跳转新页面，并将标题传值。 data: {
jieguo: [],
art:"",
title:"",
},
onLoad: function (options) {
console.log(options.str);
var title = options.str;
var _this = this;//因为this作用域指向问题 ，success函数实际是一个闭包 ， 无法直接通过this来setData
var Diary = Bmob.Object.extend("_Article");//以标题为条件进行查询
var query = new Bmob.Query(Diary);
query.equalTo("title", title);
// 查询所有数据
query.first({
success: function (object) {
console.log("查询成功");
console.log(object);
_this.setData({
title: object.attributes.title
})
var article = object.attributes.content;
console.log(article);
WxParse.wxParse('art', 'html', article, _this, 0);//art为定义的传值对象，html为默认，article为html格式文本数据源，_this为page对象，0为默认值
},
});
},{{title}} //文章标题
//自定义的间距
//art为之前js文件的传值对象