微信小程序中Towxml解析Markdown及html

一、Towxml

Towxml 是一个让小程序可以解析Markdown、HTML的解析库。

二、引入

2.1 clone代码

bash 复制代码
git clone https://github.com/sbfkcel/towxml.git

2.2 安装依赖

bash 复制代码
npm install

2.3 打包

bash 复制代码
npm run build

2.4 引入文件

将dist文件复制到微信小程序根目录,改名为towxml

三、使用

3.1 app.js引入

js 复制代码
//app.js
App({
    // 引入`towxml`解析方法
    towxml:require('/towxml/index')
})

3.2 页面配置文件json中引用

json 复制代码
{
  "usingComponents": {
    "towxml": "../towxml/towxml"
  }
}

3.3 页面js使用

js 复制代码
const app = getApp();
Page({
    data: {
        content: ''
    },
    onLoad: function (options) {
        // todo 库中返回markdown
        const contentMd = '# 一级标题';
        let result = app.towxml(contentMd, 'markdown', {
        	theme: 'light'
        });
        this.setData({
            content: result
        });
    }
})

3.4 wxml展示

xml 复制代码
<towxml nodes="{{content}}"/>

3.5 效果


相关推荐
葡萄城技术团队1 天前
所有网站通用:6 行 HTML 代码搞定页面加载提速
html
糖糖TANG1 天前
从零开始制作我的第一个静态网页——教师节主题首页开发记录
html
前端老鹰2 天前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
芦苇Z2 天前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
Alice-YUE2 天前
【CSS学习笔记3】css特性
前端·css·笔记·html
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差2 天前
《赛事报名系统小程序》
小程序·html·uniapp