热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

让小程序完美支持Markdown,最详细教程来了

“最近在做需要展示文章详情的功能,详情打算用Markdown展示,发现微信小程序在支持Markdown方面不是很友好,小蛋我无意中发现一个

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

Twoxml 介绍

|Twoxml 官网 https://github.com/sbfkcel/towxml

Twoxml是一个可将HTML、Markdown转为微信小程序WXML的渲染库,支持以下功能:

29130e3ccca534310974c1ae83ad448e.png

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

0d2712b65f3101beb23e8be46d3a9926.png在小程序中引入Twoxml

构建Twoxml

  • 克隆项目到本地

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

  • 如果没有安装过npm依赖,先安装依赖

    npm install 或 yarn

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

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

  • 运行 npm run buildyarn run build 即可

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

7758facd69b5e8a82205cc6373aca7e0.png在小程序中使用Twoxml

上一步我们已经把twoxml文件夹引入到小程序中:

ffb433bb121442d9ad9c8d994438a1e3.png
image-20211009121918059

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

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,});});},
})

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

383029e4a388d6abf93cebaffd3841c3.png

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

1005a4e3ad9781440807fd359057b66a.png

效果是不是很完美,完美实现markdown展示

基础版

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

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

h1h1h1h1h1h1

h2h2h2h2

123456

"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版就是把数据请求进行了一层封装,让我们来看下效果

ad06298c0f33701c267b60db91513931.png
image-20211009130048088
总结

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

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



推荐阅读
  • 微信民众号商城/小顺序商城开源项目介绍及使用教程
    本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目,包括前端和后端的目录结构,以及所使用的技术栈。同时提供了项目的运行和打包方法,并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接,以及加入前端交流QQ群的方式。 ... [详细]
  • 网络请求模块选择——axios框架的基本使用和封装
    本文介绍了选择网络请求模块axios的原因,以及axios框架的基本使用和封装方法。包括发送并发请求的演示,全局配置的设置,创建axios实例的方法,拦截器的使用,以及如何封装和请求响应劫持等内容。 ... [详细]
  • 本文介绍了在Linux下安装Perl的步骤,并提供了一个简单的Perl程序示例。同时,还展示了运行该程序的结果。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • 本文介绍了JavaScript进化到TypeScript的历史和背景,解释了TypeScript相对于JavaScript的优势和特点。作者分享了自己对TypeScript的观察和认识,并提到了在项目开发中使用TypeScript的好处。最后,作者表示对TypeScript进行尝试和探索的态度。 ... [详细]
  • 起因由于我录制过一个小程序的课程,里面有消息模板的讲解。最近有几位同学反馈官方要取消消息模板,使用订阅消息。为了方便大家容易学 PythonFlask构建微信小程序订餐系统 课程。 ... [详细]
  • RN即ReactNative基于React框架针对移动端的跨平台框架,在学习RN前建议最好熟悉下html,css,js,当然如果比较急,那就直接上手吧,毕竟用学习前面基础的时间,R ... [详细]
  • 本文介绍了如何使用C#制作Java+Mysql+Tomcat环境安装程序,实现一键式安装。通过将JDK、Mysql、Tomcat三者制作成一个安装包,解决了客户在安装软件时的复杂配置和繁琐问题,便于管理软件版本和系统集成。具体步骤包括配置JDK环境变量和安装Mysql服务,其中使用了MySQL Server 5.5社区版和my.ini文件。安装方法为通过命令行将目录转到mysql的bin目录下,执行mysqld --install MySQL5命令。 ... [详细]
  • web.py开发web 第八章 Formalchemy 服务端验证方法
    本文介绍了在web.py开发中使用Formalchemy进行服务端表单数据验证的方法。以User表单为例,详细说明了对各字段的验证要求,包括必填、长度限制、唯一性等。同时介绍了如何自定义验证方法来实现验证唯一性和两个密码是否相等的功能。该文提供了相关代码示例。 ... [详细]
  • 本文介绍了在CentOS上安装Python2.7.2的详细步骤,包括下载、解压、编译和安装等操作。同时提供了一些注意事项,以及测试安装是否成功的方法。 ... [详细]
  • 树莓派语音控制的配置方法和步骤
    本文介绍了在树莓派上实现语音控制的配置方法和步骤。首先感谢博主Eoman的帮助,文章参考了他的内容。树莓派的配置需要通过sudo raspi-config进行,然后使用Eoman的控制方法,即安装wiringPi库并编写控制引脚的脚本。具体的安装步骤和脚本编写方法在文章中详细介绍。 ... [详细]
  • 【前端工具】nodejs+npm+vue 安装(windows)
    预备先看看这几个是干嘛的,相互的关系是啥。nodejs是语言,类比到php。npm是个包管理,类比到composer。vue是个框架&# ... [详细]
  • 必须先赞下国人npm库作品:node-images(https:github.comzhangyuanweinode-images),封装了跨平台的C++逻辑,形成nodejsAP ... [详细]
author-avatar
凌亂的回譩
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有