微信阅读html,微信小程序渲染富文本 HTML 标签

原生 rich-text 控件

支持标签有限，传入HTML String性能下降。

wxml

js

Page({

data: {

htmlString: "Hello World!",

nodes: [{

name: 'div',

attrs: {

class: 'div_class',

style: 'line-height: 60px; color: red;'

},

children: [{

type: 'text',

text: 'Hello World!'

}]

}]

},

tap() {

console.log('tap')

}

})

第三方 wxParse

将HTML标签转换成小程序原生控件。

使用方法

拷贝wxParse至项目根目录

- wxParse/

-wxParse.js(必须存在)

-html2json.js(必须存在)

-htmlparser.js(必须存在)

-showdown.js(必须存在)

-wxDiscode.js(必须存在)

-wxParse.wxml(必须存在)

-wxParse.wxss(必须存在)

-emojis(可选)

在页面的js文件中引入wxParse模块

var WxParse = require('../../wxParse/wxParse.js');

在页面的js文件中绑定数据

var htmlString = '

我是HTML代码

';

/**

* WxParse.wxParse(bindName , type, data, target,imagePadding)

* 1.bindName绑定的数据名(必填)

* 2.type可以为html或者md(必填)

* 3.data为传入的具体数据(必填)

* 4.target为Page对象,一般为this(必填)

* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

*/

var that = this;

WxParse.wxParse('article', 'html', htmlString, that, 5);

在页面的wxml文件中引入wxParse模板

// 引入模板

//这里data中article为bindName

在页面的wxss文件中引入wxParse.css(也可以在app.wxss)

@import "../../wxParse/wxParse.wxss";

项目地址

参考代码