微信小程序富文本展示,wxParse使用

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这句注释。


阅读更多
换一批

没有更多推荐了,返回首页