微信小程序富文本展示,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這句註釋。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章