常用解决方案
-
wxParse
小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库。它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来。
wxParse下载链接
在需要引用这个插件的 wxml 文件中引用 wxParse.wxml
<import src="../../../wxParse/wxParse.wxml"/>
在需要引用这个插件的 wxss 文件中引用 wxParse.wxss
@import "../../../wxParse/wxParse.wxss";
在需要引用这个插件的 js 文件中引用 wxParse.js
var WxParse = require('../../../wxParse/wxParse.js');
在 wxml 文件中引用解析出来的数据
<view>
<template is="wxParse" data="{{wxParseData: bindName.nodes}}" />
</view>
解析HTML
//**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
let that = this;
WxParse.wxParse(bindName, 'html', myhtml, that, 5)
-
rich-text
后来,小程序增加了「rich-text」组件用于展示富文本内容。然而,这个组件存在一个极大的限制: 组件内屏蔽了所有节点的事件 。也就是说,在该组件内,连「预览图片」这样一个简单的功能都无法实现。
<rich-text nodes="{{html}}" style="width:100%;height:100%;"></rich-text>
-
web-view
再后来,小程序允许通过「web-view」组件嵌套网页,通过网页展示HTML内容是兼容性最好的解决方案了。然而,因为要多加载一个页面,性能是较差的,个人小程序也是没法用webview。
<!-- src地址是需要指向的网站地址 -->
<web-view src="https://mp.weixin.qq.com/"></web-view>