微信小程序实现动态渲染Markdown示例详解
作者:LYX6666
需求
十几个图文编排的介绍文章,每个页面的结构、内容都不相同,
因此没有办法通过WXML代码把文章结构固定下来。
因此笔者想到的解决方案包括:
- 全部转成长截图,好处是代码超级简单,坏处是:即使只改一个字,也要重新生成、上传截图
- 全部用原生小程序硬编码出来,每个介绍文章写一个组件。虽然后期修改灵活,但过于低效且麻烦。
考虑到对于图文编排来说,markdown的效率远高于HTML,如果有办法把markdown文档渲染成小程序页面,以上的需求就能很好的解决。
查了一下,还真有,仓库地址:Towxml
构建
名字非常简单粗暴:to wxml,就是把markdown或HTML转换成WXML。
作者说这个包不建议从NPM上获取,而应该自己使用源码构建:
// clone仓库 git clone https://github.com/sbfkcel/towxml.git // 进入文件夹 cd towxml // 安装依赖 npm install // 构建 npm run build
构建完成后,把dist文件夹复制到小程序的/miniprogram/
路径下(和app.ts、pages等目录同级):
在小程序的app.ts
中添加towxml:require('/towxml/index')
:
/** * app.ts * TS小程序的App泛型可能和引入的组件不兼容,可以改成any */ App<any>({ globalData: {}, towxml:require('/towxml/index'), onLaunch() { }, })
在需要使用的页面json中添加组件引用:
{ "usingComponents": { "towxml":"/towxml/towxml" } }
页面V层(wxml文件):
<!--index.wxml--> <view class="container"> <towxml nodes="{{article}}"/> </view>
页面C层(ts文件):
//获取应用实例 const app = getApp(); // data中添加两个变量 Page({ data: { isLoading: true, // 判断是否尚在加载中 article: {} // 内容数据 }, })
使用
官方文档链接:链接
文档中写到,在onload方法中初始化,就可以渲染markdown文本了,最终作用在上文写的towxml标签上:
onLoad: function () { let result = app.towxml('# Markdown', 'markdown',{ base:'https://xxx.com', // 相对资源的base路径 theme:'light', // 主题,默认`light` events:{ // 为元素绑定的事件方法 tap:(e)=>{ console.log('tap',e); } } }); // 更新解析数据 this.setData({ article:result, isLoading: false }); }
towxml方法的三个参数:
- 文本型,必填。就是实际需要渲染的文本,上述代码的
#Markdown
渲染出来就是一级标题 - 文本型,必填。表示类型,本文只用到markdown所以写'markdown'即可
- 对象,必填。表示渲染时的参数,具体可以看文档,比如,主题可以改成亮色或暗色。
接下来需要解决一个问题:
上述代码的markdown文本是直接写在代码里的,实际应用肯定需要从后端获取
因此先写一个获取文本的方法:
// 获取markdown文本 getText: (url, callback) => { wx.request({ url: url, header: { 'content-type': 'application/x-www-form-urlencoded' }, success: (res) => { if (typeof callback === 'function') { callback(res); }; } }); },
然后改写一下原来的onload:
onLoad: function () { // 获取文本,第一个参数指向后端的文件地址(你需要起一个后端) this.getText('http://127.0.0.1:8080/test.md', res => { // 回调函数中完成更新数据的逻辑 let result = app.towxml(res.data, 'markdown',{ base:'https://xxx.com', theme:'light', events:{ tap:(e)=>{ console.log('tap',e); } } }); // 更新解析数据 this.setData({ article:result, isLoading: false }); }) }
此时就可以渲染来自HTTP的markdown文件了:
最后通过参数修改请求地址就可以灵活控制页面中的文本了。
总结
如果用传统方式,真的把十几篇二十几篇文章做成页面,没个一两天写不完。用markdown渲染的方式一个小时应该就能结束战斗,效率起飞。
作为程序员,能动脑子的事情,绝对不用重复劳动,能用自动化解决的问题,绝对不动手。
以上就是微信小程序实现动态渲染Markdown示例详解的详细内容,更多关于微信小程序动态渲染Markdown的资料请关注脚本之家其它相关文章!