小程序中的富文本处理

目前网站上的文章资讯等都会以富文本形式存储，而小程序本身是不具有转换富文本内容功能的，所以这里我们需要用到一个插件：

WxParse

github及官方文档:https://github.com/icindy/wxParse

使用方式：

wxml：

<import src="../../wxParse/wxParse.wxml" />

<template is="wxParse" data="{{wxParseData:article.nodes}}" />

js:

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

onLoad: function(options) {
    var that = this;
     WxParse.wxParse('article', 'html', '<p>666</p>', that,5);
/** 
* WxParse.wxParse(bindName , type, data,target,imagePadding) 
* 1.bindName绑定的数据名(必填) 
* 2.type可以为html或者md(必填) 
* 3.data为传入的具体数据(必填) 
* 4.target为Page对象,一般为this(必填) 
** 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选) 
*/ 
    })

wxml中的 article 为js里设置的数据名，wxParse方法会把富文本解析成json格式：

然后在wxml里面通过已经设定好的模板：wxParse 遍历出html

源码wxParse.wxml

(*注：如果发现解析后页面一片空白，检查wxml引用路径是否正确)

小程序中的富文本处理

WxParse

猜你喜欢