優點:目前已知唯一可以轉化HTML到小程序識別的插件
缺點:轉換一個HTML標簽可能需要大量的微信小程序標簽還有樣式
配置:第一步,下載
https://github.com/icindy/wxParse
第二步,放入項目中,我選擇pages目錄下
第三步,配置
wxml加入:
<import src="../wxParse/wxParse.wxml"/>
在需要的地方使用:
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
其中article是后台html值的變量名
js加入:
var WxParse = require('../wxParse/wxParse.js');
這里貌似使用es6的import會有錯誤
我在onload事件寫下了:
WxParse.wxParse('article', 'html', this.data.article, this, 5);
注意的是第三個和第四個參數,前幾個可以固定不變但是第一個要和數據變量名一致,第三個是后台數據,第四個是指的小程序標簽,可以注冊多個wxparse
wxss加入:
@import '../wxParse/wxParse.wxss';
到此完成,但是要注意的是a標簽的轉化,需要加入一個方法,示例如下:
wxParseTagATap: function (e) {
var href = e.currentTarget.dataset.src;
console.log(href);
wx.redirectTo({
url: href
});
}
這個在點擊a標簽的時候控制台其實是輸出了警告信息的
此外url也只能是小程序內部地址,這是個限制,他不能跳到外部,這里我想后台編輯的時候可以用二維碼替代,小程序跳轉外部地址可以使用web-view標簽,詳情參考官方文檔