主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
本文将和大家分享一个如何让小程序完美支持Markdown的详细教程,希望对你有所帮助!
Towxml介绍| towxml官网:https://github.com/sbfkcel/towxml
Towxml是一个渲染库,可以把HTML和Markdown转换成微信小程序wxml。它支持以下功能:
使用Towxml实现以下降价效果
将项目克隆到本地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的!更多详情请关注主机参考其他相关文章!
这几篇文章你可能也喜欢:
- 如何实现小程序发送服务通知(小程序如何主动向用户发送通知)
- 如何获取小程序的unionid(如何获取小程序的页面路径)
- 生成海报的示例小程序(Java后端)(微信小程序生成海报演示)
- 什么是小程序? 有哪些功能?(什么是小程序?有哪些功能?)
- 介绍如何用小程序生成参数二维码(二维码+小程序参数)
本文由主机参考刊发,转载请注明:小程序如何配置Twoxml使其完美支持Markdown! https://zhujicankao.com/76915.html
评论前必须登录!
注册