【小程序入门集锦】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艺友分享,荐文热线:[email protected]

你可能感兴趣的:(【小程序入门集锦】6,小程序渲染html文本的组件weParse)