wxParse的下载地址:https://github.com/icindy/wxParse
1、上述地址中下载wxParse文件
2、 解压文件将wxParse中内容拷贝到项目中如下图所示:
3、在相应页面的.js文件中引入var wxParse = require('/wxParse/wxParse.js');
在相应页面的.wxss页面中引入@import "/wxParse/wxParse.wxss";
在相应页面的.wxml文件中引入<import src="/wxParse/wxParse.wxml"/>;具体路径根据项目修改
4、在.js文件中用到富文本的方法中,调用如下的数据绑定方法:
var that = this;
/**
*第一个参数:数据绑定的数据名称,在页面中调用时使用(必填)
*第二个参数:接收数据的类型,可选:html或md(必填)
*第三个参数:接收的数据(必填)
*第四个参数:为Page对象,一般为this(必填)
*第五个参数:图片自适应时的边距(选填)
*/
wxParse.wxParse('detail', 'html', productDetail, that, 0);
5、页面中使用直接如下:
<view style='margin:0 8px;'>
<template is="wxParse" data="{{wxParseData:detail.nodes}}"/>
</view>
里面的detail就是上面所说的第一个参数。
通过以上方法引入以后可以使用,但是我遇到以下两个问题
1)上下图片和图片之间有间距。
2)当富文本中图片本身没有居中时,在设置padding那个参数图片显示有问题。
解决办法:
针对问题1)的解决办法,找到wxParse.wxml,找到里面的<template name="wxParseImg">,修改style内容,将里面的display:inline-block改成display:block。
针对问题2)的解决办法,首先将上面说的style中的width设置保存成width:100%,同时找到wxParse.js文件将that.wxParseImgTap = wxParseImgTap这句注释。