微信小程序——wxParse使用方法

wxParse是一个微信小程序富文本解析组件。简单的富文本也可以使用小程序里面自带的<rich-text>组件。

wxParse git下载地址：wxParse.zip

微信开放文档：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

1.下载 wxParse，解压，将 wxParse 放入小程序中。如图：

 

2.在需要引用这个插件的 wxml 文件中引用  wxParse.wxml。例如：

//路径根据实际情况修改
<import src="../../../wxParse/wxParse.wxml"/> 

 

3.在需要引用这个插件的 wxss 文件中引用  wxParse.wxss。例如：

//路径根据实际情况修改
@import "../../../wxParse/wxParse.wxss";

 

4.在需要引用这个插件的 js 文件中引用  wxParse.js。例如：

//路径根据实际情况更改
var WxParse = require('../../../wxParse/wxParse.js');

 

5.将需要解析的内容进行解析。

/**
* 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('引用的时候的名字,如courseDetail', 'html', '你需要解析的数据,如courseDetailContent', that, 5)

 

6.在 wxml 文件中引用解析出来的数据。

//这里的courseDetail就是上面的bindName
<view>
    <template is="wxParse" data="{{wxParseData:courseDetail.nodes}}" />
</view>

 

7.如果富文本中的图片路径，既有本地路径，也有网络路径，则修改html2json.js文件。

//对img添加额外数据
            if (node.tag === 'img') {
                node.imgIndex = results.images.length;
                var imgUrl = node.attr.src;
                var isHttp = imgUrl.indexOf("http");
                if (isHttp == 0) {
                    var imgUrl = imgUrl;
                }
                if (isHttp == -1) {
                    var imgUrl = "域名，注意带不带/" + imgUrl;
                }
                if (imgUrl[0] == '') {
                    imgUrl.splice(0, 1);
                }
                imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);
                node.attr.src = imgUrl;
                node.from = bindName;
                results.images.push(node);
                results.imageUrls.push(imgUrl);
            }

 

8.富文本中有图片，防止图片左右滑动

display: flex;
width: 100%!important;