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数据

}

},

)

这样的写法在测试的时候没有任何问题,但是在真机测试的时候会导致数据加载及界面布局错乱!切记引以为鉴

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐