? ? ? ? towxml相對于wxParse還是有一定優勢的,首先一些廢棄或者過新的標簽wxParse是不能解析的,會導致整個頁面不能顯示,其次 towxml對于界面的排版優化是比較美觀的,對于開發者還算比較友好,個人是建議在wxParse沒有完善之前使用towxml這個庫來解析html以及markdown格式。
towxml使用流程:
1.將towxml庫克隆到小程序根目錄:
git?clone?https://github.com/sbfkcel/towxml.git
2.在小程序的app.js中引入towxml
//app.js
constTowxml=require('/towxml/main');//引入towxml庫
App({
onLaunch:function(){
},
towxml:newTowxml()//創建towxml對象,供小程序頁面使用
})
3.在需要的wxml使用模板
我這里使用的是絕對路徑,各位同學根據自己的存放路徑修改
這里模板名稱固定,data固定寫法為{{...解析后的變量名}}
<import?src="/towxml/entry.wxml"/>?
<template?is="entry"?data="{{...content}}"/>? ? ? ?
4.引入對應的wxss
/**pages/index.wxss**/
/**基礎風格樣式**/
@import'/towxml/style/main.wxss';
/**如果頁面有動態主題切換,則需要將使用到的樣式全部引入**/
/**主題配色(淺色樣式)**/
@import'/towxml/style/theme/light.wxss';
/**主題配色(深色樣式)**/
@import'/towxml/style/theme/dark.wxss';
5.在對應的JS文件中使用解析
//pages/index.js
const?app?=?getApp();
const htmlContent="<p>親愛的用戶:</p><p> 您好<br> </p>"
Page({
data:{
content:{}? ?//content將用來存儲towxml數據
},
onLoad:function(){
const_ts=this;
let?data=app.towxml.toJson(htmlContent,'html');//這里按需填參數? html或者markdown
data.theme='dark';
_ts.setData({
content:data
});
}
})
簡單幾步 就會實現排版清晰的html解析了,但是這里有一點要千萬注意,經本人測試,towxml的模板關聯的數據參數,一定不能寫在對象里,例如:
Page({
data:{
? ? ? ?htmlObj:{
? ? ? ? ? ? ? content:{}? ?//content將用來存儲towxml數據
? ? ? ? ? ? }
},
)
<import?src="/towxml/entry.wxml"/>? ?
<template?is="entry"?data="{{...htmlObj.content}}"/>? ? ? ??