小程序如何配置Twoxml使其完美支持Markdown！

本文将和大家分享一个如何让小程序完美支持Markdown的详细教程，希望对你有所帮助！

Towxml介绍| towxml官网:https://github.com/sbfkcel/towxml

Towxml是一个渲染库，可以把HTML和Markdown转换成微信小程序wxml。它支持以下功能:

使用Towxml实现以下降价效果

将Twoxml引入小程序以构建Twoxml

将项目克隆到本地git clone https://github.com/sbfkcel/towxml.git.如果尚未安装npm依赖项，请首先安装依赖项。

通过nminstall或yarn编辑配置文件towxml/config.js。

根据自己的实际需要，保留自己需要的功能即可。

运行npm运行构建或纱线运行构建。

在小程序中使用两个xml在上一步中，我们已经在小程序中引入了towxml文件夹:

1.介绍一下库/app.js。

// app.jsApp({ //介绍towxml3.0解析方法tow XML:require( # 39；/tow XML/index # 39；), })2.在特定页面的配置文件中引入两个xml组件。

//pages/content -detail/content -detail . JSON { ；使用组件 :{ towxml : /towxml/towxml}}3.在页面中插入组件

//pages/content -detail/content -detail . wxml lt；view class = 内容-信息 gt lttowxml nodes = { { article } } / gt； lt/view gt；4.解析js中的内容

内容分析有两个版本，一个是加无忧版，一个是基础版。先说一下plus版。

加上无忧版

正常情况下，markdown源数据应该从服务器获取，所以我们先封装一个请求方法(我在App.js中封装了)。

App({ //介绍` towxml 3.0 `解析方法tow XML:require( # 39；/tow XML/index # 39；)，//声明一个数据请求方法GetText: (URL，callback)= >；{ wx.request({ url: url，header:{ # 39；内容-类型 # 39；: 'application/x-www-form -urlencoded # 39；}，成功:(RES)= gt；{ if(type of callback = = = # 39；功能 # 39；){回调(RES)；};} });}})然后处理特定页面的js文件中解析的内容

//pages/content -detail/content -detail . js const app = getApp()；Page({ /** *页面的初始数据*/data: {article: {}}，/**生命周期函数--监听页面加载*/onload:function(options){ app . gettext( # 39；https://www.vvadd.com/wxml_demo/demo.txt? v = 2 # 39；，res = gt{ let obj = app.towxml(res.data， # 39；减价 # 39；，{主题: # 39；光 # 39；、//主题为深黑色、浅白色，如果留空则默认为light base:“www . XXX . com ；，events:{ //为元素tap绑定的事件方法:e = >；{ console . log( # 39；tap # 39，e)；}，change:e = gt；{ console . log( # 39；托多 # 39；，e)；} } });//更新解析数据this.setData({ article:obj，})；});}})这里我请求一个网址www.vvadd.com/wxml_demo/d…，它将把markdown源数据返回给我。我们先来看看这个请求地址里有什么。

在我们获得markdown数据后，我们分配它，然后我们可以直接在页面上显示它。激动人心的时刻到了，让我们看看最终的效果。

效果是否完美，完美实现markdown展示？

基础版

在plus版本之后，我们来说说基础版，因为你可能有markdown数据源自定义处理的操作，所以我们先来看看基础版的实现。

//pages/content -detail/content -detail . js const app = getApp()；Page({ /** *页面的初始数据*/ data: {article:{} }，/** *生命周期函数--监控页面加载*/onload:function(options){//Markdown数据源let content = " lth1 gth1 h1 h1 h1 h1 lt；/h1 gt； lth2 gtH2 H2 H2 h 2 lt；/H2 gt； lth3 gt123456 lt/H3 gt； let result = app.towxml(content， # 39；减价 # 39；，{ base: # 39；www . XXX . com # 39；，//相对资源主题的基路径: # 39；光 # 39；，//subject，默认' light '事件:{//是事件方法tap:(e)= >；{ console . log( # 39；h4 # 39，e)；} } });//更新解析数据this . setdata({ article:result })；}，})基本版完成了，也很简单。其实和plus版本差别不大，把数据请求封装在一个层里。来看看效果吧。

综上所述，用Towxml实现markdown是比较简单的。它不仅支持丰富的markdown语法，还支持图表、流程图和数学公式。在实际开发中，降价数据源是从服务器获得的。建议服务器解析markdown数据源，前端获取后可以直接赋值，避免造成性能问题。

有关编程的更多信息，请访问:编程视频！!小程序就是这样配置Twoxml来完美支持Markdown的！更多详情请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 小程序如何配置Twoxml完美支持Markdown！（小程序配置教程）

本文由主机参考刊发，转载请注明：小程序如何配置Twoxml使其完美支持Markdown！ https://zhujicankao.com/76915.html