最近在研究微信小程序接入数据时，遇到了一个小问题，就是获取到的数据里有html标签，然后怎么把它转化为微信小程序结构wxml的。在vue中遇到类似的问题，可以直接使用它的内置属性：v-html。但是在微信小程序中就需使用插件：WxParse 和 Towxml。

接下来，说一下这两个插件的用法。

WxParse

  • 首先要下载WxParse插件，地址奉上：WxParse插件 ,然后放在根目录下。
  • 在需要使用该插件的view(.js文件)中引入wxParse模块
//在需要使用wxss中引入wxParse.wxss
	@import"/wxParse/wxParse.wxss";
  • 1.
  • 2.

然后进行数据绑定。

以下是官方文档介绍

var article = '<div>我是一段html</div>';

/**
    * wxParse.wxParse(bindName,type,data,target,imagePadding)
    * 1.bindName为绑定的数据名(必填)
    * 2.type可以为html或者markdown(必填)
    * 3.data为传入的具体数据(必填)
    * 4.target为Page对象，一般为this(必填)
    * 5.imagePadding为当图片自适应时左右的单一padding(默认为0，可选)
    *
    **/

var that = this;
wxParse.wxParse('article','html',article,that,5)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

自己在项目中可以根据上面来套。

在内容页(.wxml文件)中引入模板文件

然后在下面需要用到解析数据的地方引入

<template is="wxParse" data="{{wxParseData:article.nodes}}" />
  • 1.

最后试一下可以正常渲染获取到的html数据了。

Towxml

同wxParse一样，首先下载Towxml插件放在根目录下。

在小程序的app.js中引入插件

const Towxml = require('/towxml/main');
App({
    towxml: new Towxml();
})
  • 1.
  • 2.
  • 3.
  • 4.

在小程序页面引入模板

<import src="/towxml/entry.wxml" />
<template is="entry" data="{{...article}}" />
  • 1.
  • 2.

在小程序对应的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');

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

                //设置数据
                _ts.setData({
                    article: data
                });
            }
        });
    }
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.

引入对应的wxss

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


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

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

/**主题配色（深色样式）**/
@import '/towxml/style/theme/dark.wxss';
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

然后试一下获取到的html标签数据，可以完美的渲染为wxml结构。