【小程序入门集锦】6，小程序渲染html文本的组件weParse

一、wxParse简介

小程序目前没有webview组件，不支持直接渲染html code。(以后可能会添加)

使用这个：https://github.com/icindy/wxParse

组件包，可以将70%的html文本在小程序解析显示，视频与表格、表情都支持

从上面github地址下载zip包，解压后新建小程序项目，就可以预览demo。

二、如何使用它？

1，拷贝wxParse目录

2，引用

//在使用的View中引入WxParse模块

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

//在使用的Wxss中引入WxParse.css,可以在app.wxss

@import "/wxParse/wxParse.wxss";

3，数据绑定

var article = '

我是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', article, that, 5);

4，模版引用

//这里data中article为bindName

三、它是如何实现的？

一切工作都需要踏在前人的基础之上，作者复用了这个html解析库

https://github.com/blowsie/Pure-JavaScript-HTML5-Parser

将html文本进行解析，解析之后的数据当成data，调用setData，将数据循环绑定于视图上。

根模板：

其中wxParse0是循环模板。小程序模板充许嵌套使用，这给wxParse带来了方便，不然也难于实现。

使用wxParse可以最大程序地复用原网站内容。对于简洁的知识类文章的展示，是没有问题的。

--end--

我在知乎开了一个live，已经审核通过，于本月22日晚（周六）8点点与大家在知乎见面：

【0 基础周未学习小程序开发】

在开播之前，我每天晚上于朋友圈不定时免费赠送一些名额，请朋友们注意查收。

团队也会在一些技术群（微信群/QQ群）免费发放一些名额，请留意查收。

----

在微信公众号哲学李论，回复“小程序入门集锦”可以看到这个系列的所有文章。

知乎同名专栏：https://zhuanlan.zhihu.com/zero-weapp

本文同时在多个平台、社群转发，在公众号回复“社群”可与其它艺友热情连接。

如果觉得本文还行，请转发到朋友圈让更多朋友看到。

如果您看到有料的文章，欢迎与10W艺友分享，荐文热线：liyi@rixingyike.com。