小程序如何配置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依赖项，请首先安装依赖项。

Npm安装或yarn编辑配置文件到xml/config.js

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

只需运行npm运行构建或yarn运行构建。

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

1.介绍库/app.js。

//app . jsapp（{//介绍` towxml 3.0 `解析方法tow XML:require（&；#39;/tow XML/index & amp；#39;), })2.在特定页面的配置文件中引入两个xml组件。

//pages/content -detail/content -detail . JSON { & quot；使用组件& quot:{ & quottowxml & quot:& quot/to XML/to XML & quot；}}3.在页面中插入组件。

//pages/content -detail/content -detail . wxml & lt；视图class = & quot内容-信息& gt& lttowxml节点= & quot{ { article } } & quot/& gt；& lt/view & gt；4.解析js中的内容

我给出了两个版本的内容解析方式，一个是无忧版的plus，另一个是基础版的。我先说说plus版本。

Plus无忧版

正常情况下，markdown源数据应该从服务器获取，因此让我们先封装一个请求方法（我将其封装在App.js中）。

app（{//介绍towxml3.0解析方法tow XML:require（&；#39;/tow XML/index & amp；#39;），//声明一个数据请求方法getText:（URL，回调）= & gt{ wx . request（{ URL:URL，header:{ & amp；#39;内容-类型&amp。#39;:& amp#39;应用程序/x-www-form -URL encoded & amp；#39;}，成功:（RES）= & gt；{ if（回调类型= = = & amp#39;功能与应用。#39;）{ callback（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 & amp；#39;，res = & gt{ let obj = app . tow XML（RES . data；#39;降价销售。#39;，{主题:& amp#39;光与电。#39;，//主题深黑色、浅白色，如果留空，则默认为浅基础色:& quotwww . XXX . com & quot；，events:{ //元素绑定的事件方法tap:e = & gt；{ console . log（& amp；#39;tap & amp#39;，e）；}，change:e = & gt；{ console . log（& amp；#39;todo & amp#39;，e）；} } });//更新解析数据this . setdata（{ article:obj，}）；});}，}）我在这里请求一个网址，www.vvadd.com/wxml_demo/d……，它将把markdown源数据返回给我。我们先来看看这个请求地址里有什么。

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

效果不是很完美吗？它完美地实现了降价显示。

基础版

说完了plus版本，我们再来说说基础版，因为你可能会有自定义markdown数据源的操作，所以我们先来看看基础版的实现。

//pages/content -detail/content -detail . js const app = getApp（）；page（{/** *页面的初始数据*/data: {article: {}}，/* *生命周期函数--监听页面加载*/onload:函数（选项）{/markdown数据源let content =“& lt；h1 & gth1 h1 h1 h1 h1 & lt；/h1 & gt；& lth2 & gth2h2h2h2 & lt/H2 & gt；& lth3 & gt123456 & lt/H3 & gt；"let result = app . tow XML（content，& amp#39;降价销售。#39;，{ base:& amp；#39;XXX . com & amp；#39;，//相对资源的基路径主题:&；#39;光与电。#39;，//theme，默认` light ` events:{//是事件方法tap:（e）= & gt；{ console . log（& amp；#39;h4 & amp#39;，e）；} } });//更新解析数据this . setdata（{ article:result }）；}，}）基础版就完成了，也很简单。事实上，它与plus版本没有太大区别。plus版本只是封装了数据请求。我们来看看效果。

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

更多编程相关知识请访问:编程视频！！

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

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

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