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固定寫法為{{...解析后的變量名}}

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="

親愛的用戶：

??????? 您好

"

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數據

}

},

)

這樣的寫法在測試的時候沒有任何問題，但是在真機測試的時候會導致數據加載及界面布局錯亂！切記引以為鑒

總結

以上是生活随笔為你收集整理的微信小程序 html css xml,微信小程序 使用towxml解析html流程及踩坑记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。