小程序展示html内容

常用解决方案

• 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>