微信小程序 wxParese框架之富文本处理

前因:微信小程序并没有为个人开发者提供webview等可以解析html的组件,原展示类文本没有办法图文并茂的原生展示。wxParse主要目的就是弥补富文本解析空缺的问题,图文并茂的原生展示html。

首先,自行去github官网https://github.com/icindy/wxParse下载wxParese文件,并加到自己的小程序文件夹中,如图:

b7e31848e55c1f8d0995a75c7cbdc564.png

接下来是如何使用了。

1,在需要使用的pages页面中的wxml文件中引入WxParse.wxml:

22fd44a103af850f1ca13d542223d55e.png

2,在当前页对应的js中引入wxParse.js:

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

de5a3459db01991ee1848cb0463ab666.png

3,在刚才的wxml文件中,引用wxParse模板,作数据绑定:

d699c86ea18b21a017ecd9287c40efe6.png

4,在当前页的js中使用WxParse中的方法,

ee14f6ac5c33b9e30ee0d76d8d783311.png

小程序上的效果图:

fb09baff0e387b711bae225c0b438f1e.png

当然,wxParese框架富文本的功能还有:

63c221779d94cb71ae3fcb15c46d8e39.png

上面的例子是示范了HTML的大部分标签解析,多数据循环方式的实现如下,先来看一个原创的例子:

83e3876db2d16f88513af2f96007f719.png
d13e3ea13553b4ae9ba1e4544282a196.png

例子的效果在上图1已经有展示。其实,多数据的应用在问题列表/帮助中心等,如下图:

40c88b215e13ab936a409c5cbe786fa8.png

至于wxParese框架富文本的功能的实验功能在官方程序里有展示,在这里就不一一示例。后续模版层级可扩展性/图片自适应的应用代码我会一一分享到码云(上面的代码大家可以到我的码云https://gitee.com/dexter008上下载学习)上,期待大家关注。

See you!

Logo

这里是“一人公司”的成长家园。我们提供从产品曝光、技术变现到法律财税的全栈内容,并连接云服务、办公空间等稀缺资源,助你专注创造,无忧运营。

更多推荐