小程序富文本解析器towxml3.0的使用

2020-03-26   阅读:799   分类:后端    标签: 微信小程序

1.png

Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。 用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。

 

特色:

 

1、可控制的音频播放器(可自行调节样式,解决原生audio在部分iPhone上不能自动播放的情况)

2、支持代码语法高亮

3、支持emoji表情

4、支持上标、下标、下划线、删除线、表格、视频、图片(几乎所有html元素)……

5、支持typographer字符替换

6、多主题动态支持

7、极致的中文排版优化

8、Markdown TodoList


下载地址https://github.com/jyblogs/towxml

或者:git clone git@github.com:jyblogs/towxml.git


使用流程:

1、下载,解压,复制至小程序根目录

image.png


2、引入库/app.js

//app.js
App({
       // 引入`towxml3.0`解析方法
       towxml:require('/towxml/index')
})
3. 在页面配置文件中引入towxml组件 /pages/index/index.json
 
{
  "usingComponents": {
    "towxml":"/towxml/towxml"
  }
}

4. 在页面中插入组件/pages/index/index.wxml

<!--index.wxml-->
<view>
  <towxml nodes="{{article}}"/>
</view>

5. 解析内容并使用/pages/index/index.js

//获取应用实例
const app = getApp();
Page({
       data: {
              isLoading: true,                                 // 判断是否尚在加载中
              article: {}                                    // 内容数据
       },
       onLoad: function () {
              let result = app.towxml(`# Markdown`,'markdown',{
                     base:'https://xxx.com',                        // 相对资源的base路径
                     theme:'dark',                              // 主题,默认`light`
                     events:{                               // 为元素绑定的事件方法
                            tap:(e)=>{
                                   console.log('tap',e);
                            }
                     }
              });
 
              // 更新解析数据
              this.setData({
                     article:result,
                     isLoading: false
              });
             
       }
})

str 必选,html或markdown字符串

type 必选,需要解析的内容类型html或markdown

options [object] 可选,可以该选项设置主题、绑定事件、设置base等

API

app.towxml(str,type,options)有三个参数

 

base [string] 可选,用于指定静态相对资源的base路径。例如:https://xx.com/static/

theme [string] 可选,默认:light,用于指定主题'light'或'dark',或其它自定义

events [object] 可选,用于为元素绑定事件。key为事件名称,value则必须为一个函数。例如:{tap:e=>{console.log(e)}}

towxml3.0 支持以下功能:

 

echarts图表,默认禁用,需自行构建以开启此功能

LaTeX数学公式,默认禁用,需搭建解析服务并自行构建以开启此功能

yuml图表,默认禁用,需要搭建解析服务并自行构建以开启此功能

highlight代码高亮,默认开启(默认仅开启bash、javascript、json、python、html、css、php、scss、shell),其它语言高亮支持需自行构建以开启


【腾讯云】11.11 云上盛惠,云产品限时抢购,1核2G云服务器首年88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/296.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×