作者

Towxml

由于微信小程序不能直接渲染HTML,因此富文本编辑器生成的HTML内容无法直接在小程序中展示。可能是出于安全因素考虑,即使WXML文本在小程序中也是以字符串方式进行渲染。

而Towxml 是一个可将HTMLMarkdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。 用于解决在微信小程序中MarkdownHTML不能直接渲染的问题。 那么我们马上来看看怎么使用吧~

下载及文档

https://github.com/sbfkcel/towxml

快速上手

1.克隆代码到项目根目录

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

2.在小程序app.js中引入库

//app.js
const Towxml = require('/towxml/main');     //引入towxml库
App({
    onLaunch: function () {
    },
    towxml:new Towxml()                     //创建towxml对象,供小程序页面使用
})

3.在小程序页面文件中引入模版

<!--pages/index.wxml-->

<!--引入towxml模版入口文件,并使用模版-->
<import src="/towxml/entry.wxml"/>
<template is="entry" data="{{...article}}"/>

4.在小程序对应的js中请求数据

//pages/index.js

const app = getApp();
Page({
    data: {
        //article将用来存储towxml数据
        article:{}
    },
    onLoad: function () {
        const _ts = this;

        //请求markdown文件,并转换为内容
        wx.request({
            url: 'http://xxx/doc.md',
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            success: (res) => {
                //将markdown内容转换为towxml数据
                let data = app.towxml.toJson(
                        res.data,               // `markdown`或`html`文本内容
                        'markdown'              // `markdown`或`html`
                    );

                //前台初始化小程序数据(2.1.2新增,如果小程序中无相对资源需要添加`base`根地址,也无`audio`内容可无需初始化)
                data = app.towxml.initData(data,{
                    base:'https://xxx.com/',    // 需要解析的内容中相对路径的资源`base`地址
                    app:_ts                     // 传入小程序页面的`this`对象,以用于音频播放器初始化
                });

                //设置文档显示主题,默认'light'
                data.theme = 'dark';

                //设置数据
                _ts.setData({
                    article: data
                });
            }
        });
    }
})

5.引入对应的WXSS

/**pages/index.wxss**/

/**基础风格样式**/
@import '/towxml/style/main.wxss';


/**如果页面有动态主题切换,则需要将使用到的样式全部引入**/

/**主题配色(浅色样式)**/
@import '/towxml/style/theme/light.wxss';

/**主题配色(深色样式)**/
@import '/towxml/style/theme/dark.wxss';

API

如果为了追求极致的体验,建议将markdownhtml转换为towxml数据的过程放在服务器上,在小程序中直接请求数据即可。

1.安装依赖

需要node.js环境 2.安装towxml

npm install towxml

3.接口使用

const Towxml = require('towxml');
const towxml = new Towxml();

//Markdown转towxml数据
let data = towxml.toJson('# Article title','markdown');

//htm转towxml数据
let data = towxml.toJson('<h1>Article title</h1>','html');

是不是超级简单?快去试试看吧~

转载请注明,来自https://itfun.tv/news/136