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}}"/>