“

最近在做需要展示文章详情的功能&＃xff0c;详情打算用Markdown展示&＃xff0c;发现微信小程序在支持Markdown方面不是很友好&＃xff0c;小蛋我无意中发现一个好用的组件&＃xff0c;Twoxml&＃xff0c;完美支持Markdown,下面就带大家手把手实现Markdown功能

&＃xff5c;Twoxml 官网 https://github.com/sbfkcel/towxml

Twoxml是一个可将HTML、Markdown转为微信小程序WXML的渲染库&＃xff0c;支持以下功能&＃xff1a;

使用Twoxml可以实现如下的Markdown效果

构建Twoxml

• 克隆项目到本地

git clone https://github.com/sbfkcel/towxml.git

• 如果没有安装过npm依赖&＃xff0c;先安装依赖

  npm install 或 yarn

• 编辑配置文件twoxml/config.js

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

• 运行 npm run build 或 yarn run build 即可

  “

  构建好后出来的文件在dist目录下&＃xff0c;将dist目录复制到小程序项目根目录中并将目录名称改为towxml即可使用

上一步我们已经把twoxml文件夹引入到小程序中&＃xff1a;

1. 引入库 /app.js

// app.js
App({// 引入&＃96;towxml3.0&＃96;解析方法towxml:require(&＃39;/towxml/index&＃39;),
})

2. 在具体页面的配置文件中引入twoxml组件

// pages/content-detail/content-detail.json
{"usingComponents": {"towxml":"/towxml/towxml"}
}

3. 在页面中插入组件

// pages/content-detail/content-detail.wxml



4. 在js中解析内容

解析内容的方式我这边给出了两种版本&＃xff0c;一种是plus无忧版&＃xff0c;一种是基础版&＃xff0c;我先说说plus版

plus无忧版

正常来说&＃xff0c;markdown源数据都应该是从服务端获取&＃xff0c;那我们就先封装一个请求方法(我是在App.js中进行封装)

App({// 引入&＃96;towxml3.0&＃96;解析方法towxml:require(&＃39;/towxml/index&＃39;),//声明一个数据请求方法getText: (url, callback) &＃61;> {wx.request({url: url,header: {&＃39;content-type&＃39;: &＃39;application/x-www-form-urlencoded&＃39;},success: (res) &＃61;> {if (typeof callback &＃61;&＃61;&＃61; &＃39;function&＃39;) {callback(res);};}});}})

然后在具体页面的js文件中处理解析内容

// pages/content-detail/content-detail.js
const app &＃61; getApp();
Page({/*** 页面的初始数据*/data: {article:{}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {app.getText(&＃39;https://www.vvadd.com/wxml_demo/demo.txt?v&＃61;2&＃39;,res &＃61;> {let obj &＃61; app.towxml(res.data,&＃39;markdown&＃39;,{theme:&＃39;light&＃39;, //主题 dark 黑色&＃xff0c;light白色&＃xff0c;不填默认是lightbase:"www.xxx.com",events:{      //为元素绑定的事件方法tap:e &＃61;> {console.log(&＃39;tap&＃39;,e);},change:e &＃61;> {console.log(&＃39;todo&＃39;,e);}}});//更新解析数据this.setData({article:obj,});});},
})

这里我是请求一个网址https://www.vvadd.com/wxml_demo/demo.txt?v&＃61;2&＃xff0c;这个网址会给我返回markdown源数据&＃xff0c;我们先来看下这个请求地址里面有啥

我们获取到markdown数据后将其进行赋值&＃xff0c;然后在页面就能直接展示出来&＃xff0c;激动人心的时候到来了&＃xff0c;看下最终的效果

效果是不是很完美&＃xff0c;完美实现markdown展示

基础版

说完plus版本再来说说基础版&＃xff0c;因为大家可能会有对markdown数据源的自定义处理的操作&＃xff0c;所以就再来看看基础版的实现

// pages/content-detail/content-detail.js
const app &＃61; getApp();
Page({/*** 页面的初始数据*/data: {article:{}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//markdown数据源let content&＃61; "

h1h1h1h1h1h1

h2h2h2h2

123456

基础版就写完了&＃xff0c;也很简单&＃xff0c;其实和plus版的区别也不大&＃xff0c;plus版就是把数据请求进行了一层封装&＃xff0c;让我们来看下效果

使用Towxml来实现markdown其实比较简单&＃xff0c;不仅支持了丰富的markdown语法&＃xff0c;还支持图表&＃xff0c;流程图&＃xff0c;数学公式&＃xff0c;在真正的开发中&＃xff0c;markdown数据源是从服务端进行获取&＃xff0c;建议最好是由服务端将markdown数据源进行解析出来&＃xff0c;前端获取后直接进行赋值就行&＃xff0c;避免造成性能问题

“

学无止境&＃xff0c;我虽然是服务端开发&＃xff0c;但对小程序开发的热爱促使我不断的对其学习&＃xff0c;如果大家觉得我写的不错&＃xff0c;烦请给我点个赞&＃xff0c;关注一波&＃xff0c;一起交流学习&＃xff0c;一个人可以走的很快&＃xff0c;一群人会走的更远