让小程序完美支持Markdown,最详细教程来了
最近在做需要展示文章详情的功能,详情打算用Markdown展示,发现微信小程序在支持Markdown方面不是很友好,小蛋我无意中发现一个好用的组件,Towxml,完美支持Markdown,下面就带大家手把手实现Markdown功能
Towxml 介绍
|Towxml 官网 github.com/sbfkcel/tow…
Towxml是一个可将HTML、Markdown转为微信小程序WXML的渲染库,支持以下功能:
使用Towxml可以实现如下的Markdown效果
在小程序中引入Twoxml
构建Twoxml
- 克隆项目到本地
git clone https://github.com/sbfkcel/towxml.git
复制代码
如果没有安装过npm依赖,先安装依赖
npm install 或 yarn 复制代码
编辑配置文件towxml/config.js
根据自己的实际需求保留你需要的功能即可
运行 npm run build 或 yarn run build 即可
构建好后出来的文件在dist目录下,将dist目录复制到小程序项目根目录中并将目录名称改为towxml即可使用
在小程序中使用Twoxml
上一步我们已经把towxml文件夹引入到小程序中:
1. 引入库 /app.js
// app.js
App({// 引入`towxml3.0`解析方法towxml:require('/towxml/index'),
})
复制代码
2. 在具体页面的配置文件中引入twoxml组件
// pages/content-detail/content-detail.json
{"usingComponents": {"towxml":"/towxml/towxml"}
}
复制代码
3. 在页面中插入组件
// pages/content-detail/content-detail.wxml
<view class="content-info"><towxml nodes="{{article}}"/>
</view>
复制代码
4. 在js中解析内容
解析内容的方式我这边给出了两种版本,一种是plus无忧版,一种是基础版,我先说说plus版
plus无忧版
正常来说,markdown源数据都应该是从服务端获取,那我们就先封装一个请求方法(我是在App.js中进行封装)
App({// 引入`towxml3.0`解析方法towxml:require('/towxml/index'),//声明一个数据请求方法getText: (url, callback) => {wx.request({url: url,header: {'content-type': 'application/x-www-form-urlencoded'},success: (res) => {if (typeof callback === 'function') {callback(res);};}});}})
复制代码
然后在具体页面的js文件中处理解析内容
// pages/content-detail/content-detail.js
const app = getApp();
Page({
/*** 页面的初始数据*/data: {article:{}},
/*** 生命周期函数--监听页面加载*/onLoad: function (options) {app.getText('https://www.vvadd.com/wxml_demo/demo.txt?v=2',res => {let obj = app.towxml(res.data,'markdown',{theme:'light', //主题 dark 黑色,light白色,不填默认是lightbase:"www.xxx.com",events:{ //为元素绑定的事件方法tap:e => {console.log('tap',e);},change:e => {console.log('todo',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= "<h1>h1h1h1h1h1h1</h1><h2>h2h2h2h2</h2><h3>123456</h3>"let result = app.towxml(content,'markdown',{base:'www.xxx.com', // 相对资源的base路径theme:'light', // 主题,默认`light`events:{ // 为元素绑定的事件方法tap:(e)=>{console.log('h4',e);}}});// 更新解析数据this.setData({article:result});},
})
复制代码
基础版就写完了,也很简单,其实和plus版的区别也不大,plus版就是把数据请求进行了一层封装,让我们来看下效果
总结
使用Towxml来实现markdown其实比较简单,不仅支持了丰富的markdown语法,还支持图表,流程图,数学公式,在真正的开发中,markdown数据源是从服务端进行获取,建议最好是由服务端将markdown数据源进行解析出来,前端获取后直接进行赋值就行,避免造成性能问题
学无止境,我虽然是服务端开发,但对小程序开发的热爱促使我不断的对其学习,如果大家觉得我写的不错,烦请给我点个赞,关注一波,一起交流学习,一个人可以走的很快,一群人会走的更远
让小程序完美支持Markdown,最详细教程来了相关推荐
- Towxml 3.0来了,让小程序完美支持Markdown
Towxml 3.0来了,让小程序完美支持Markdown 查看全文 http://www.taodudu.cc/news/show-805307.html 相关文章: 数据接口的登录态校验以及JWT ...
- uni-app中使用Towxml 3.0,小程序完美支持Markdown
简介 Towxml 是一个可将HTML.Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库.用于解决在微信小程序中Markdown.HTML不能直接渲染 ...
- 小程序使用 组件库 vant-weapp详细教程
要说到小程序开发过程中用到的UI组件库,我第一个想到的就是vant,因为对于我来说,这个组件库里面的UI界面比较符合我的审美,颜值还不错,另外最重要的是,里面的功能比较齐全,项目之中要用到的一些需求, ...
- 微信小程序如何进行反编译详细教程
前言介绍 小程序反编译,其实还是简单的,要想拿到微信小程序源码,先要拿到小程序的包,用反编译脚本跑一下,微信小程序代码包里的所有文件.所有资源就出来了(除了project.config.json小程序 ...
- 简单三步教会你在前端监控平台:安装小程序、uni-app探针(详细教程)
Webfunny现在支持微信小程序.uni-app的监控探针了,两个平台安装探针的方式很相似. 一.微信小程序探针安装 (1)首先创建一个微信小程序项目 (2)项目生成后,复制探针代码.在小程序项目的 ...
- 餐饮外卖平台小程序源码,附带详细教程
餐饮外卖平台小程序V正式版,打造自己的美团/饿了么?平台.店铺在后台扣除自定义设置,资金统一进入平台账户,然后平台赚钱给商家店铺. 客户端小程序 客户端:自助点餐可以随时获取商家的商品动态,订单信息一 ...
- mac上优秀的键盘改键神器:Karabiner Elements完美支持m1芯片详细教程解析
Karabiner Elements免费且强大的键盘自定义工具,能够帮助用户修改键盘映射,键盘响应时间,能在fn下实现小键盘项目,支持macOS Sierra!本站现在提供Karabiner Elem ...
- 微信小程序将支持分享到朋友圈;美团入局社区团购;Kotlin 1.4-M3 发布 | 极客头条
整理 | 屠敏 头图 | CSDN 下载自东方 IC 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 一分钟 ...
- 微信小程序提交审核并发布详细流程
微信小程序提交审核并发布详细流程 审核在1小时到N天不等 官方7天,一般3天内 提交审核?如何发布?审核过程中注意事项? 服务器: 域名只支持 https (request.uploadFile.do ...
最新文章
- rhel5.5安装xwindow
- 微软联合创始人都看好,这项技术有什么过人之处?
- H3C SecPath防火墙GRE+IPSEC+OSPF典型配置举例
- ML之LoRBaggingRF:依次利用LoR、Bagging、RF算法对泰坦尼克号数据集 (Kaggle经典案例)获救人员进行二分类预测(最全)
- 计算机的u盘显示桌面,U盘图示在我的电脑显示不出?
- php文件教程,php的文件上传入门教程(实例讲解)
- Sass基础知识及语法
- 经典面试题(44):以下代码将输出的结果是什么?
- Python获取类属性及其它(vim看源码常用、__dict__)
- Numpy random生成不重复的随机数
- 楼下邻居总偷网,改密码也没用,过一会他们又能连上,该怎么办?
- scala上界_Scala方差,上界和下界
- FS2711代替松翰2711国产单片机
- c语言strlen转义字符,转义字符 sizeof strlen
- Java取数的整数及小数部分
- 《利用python进行数据分析》读书笔记
- 程序安装报错0x80070660的解决
- 【自动驾驶】视觉与毫米波雷达数据融合技术
- idea 修改远程 git仓库地址到阿里云code 推送
- 金山词霸2011 vs. 有道词典4.0