VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动

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

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

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

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

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

1.png

使用Towxml实现以下降价效果

2.png

Twoxml引入小程序以构建Twoxml

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

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

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

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

3.png

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

4.png

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源数据返回给我。我们先来看看这个请求地址里有什么。

5.png

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

6.png

效果是否完美,完美实现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版本差别不大,把数据请求封装在一个层里。来看看效果吧。

7.png

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

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

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

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 小程序如何配置Twoxml使其完美支持Markdown!
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!