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這句註釋。