微信小程式中顯示HTML格式內容的例項
因為個人註冊的開發者不允許在微信小程式中載入網頁，因此開發者都遇到過需要將網頁中的圖文內容完整載入到微信小程式中的情況，如果網頁數目較多，逐個編輯wxml程式碼往往過於麻煩，因此這篇文章將介紹如何藉助Bmob雲後端的圖文素材功能和大神編寫的wxParse元件實現網頁內容在微信小程式中的快速配置。如果讀者有更好的辦法，歡迎在下方留言交流。（大神勿噴）
以下部分內容轉載自：點選開啟連結
準備工作：
首先我們下載wxParse
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}}"/>這樣就可以在微信小程式中嵌入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為預設值
},
});
},<import src="../../style/wxParse/wxParse.wxml"/>
<view style='font-size:25px;font-weight:500;margin-top:.2em;margin-bottom:.1em;margin-left:.3em;'>{{title}}</view>//文章標題
<view style='margin-left:.3em;margin-right:.15em;'>//自定義的間距
<template is="wxParse" data="{{wxParseData:art.nodes}}"/>//art為之前js檔案的傳值物件
</view>