wxParse

• 配置文件下载

https://pan.baidu.com/s/1eKZzhWsK3LW0rqrEkNfr0g

 

• 基本使用方法

1. copy文件夹

　　　　　　

　　　　　

 

2. 引入必要文件

　　　　　　js文件夹里

　　　　　　　　var WxParse = require('../../wxParse/wxParse.js');

 

　　　　　　css文件夹里

　　　　　　　　@import "../../wxParse/wxParse.wxss";

 

3. 数据绑定

　　　　　　js文件夹里

　　　　　　Page({

　　　　　　　　data: { },

　　　　　　　　onLoad: function (options) {

　　　　　　　　　　let that = this;

　　　　　　　　　　var content = `<h3>临近3月底</h3>`

　　　　　　　　　　//WxParse.wxParse(

　　　　　　　　　　　　// bindName绑定的数据名(必填),

　　　　　　　　　　　　// type可以为html或者md(必填),

　　　　　　　　　　　　// data为传入的具体数据(必填) ,

　　　　　　　　　　　　// target为Page对象,一般为this(必填),

　　　　　　　　　　　　// imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

　　　　　　　　　　// )

　　　　　　　　　　WxParse.wxParse('article', 'html', content , that,5) }

　　　　　　 })

 

4. 引入模板

　　　　　　// 引入模板 路径为你所在的路径位置

　　　　　　<import src="../../wxParse/wxParse.wxml" />

 

　　　　　　// 这里data中article为bindName (js文件夹里数据绑定的第一个参数)

　　　　　　<template is="wxParse" data="{{wxParseData:article.nodes}}" />

 

注意：

在上面的基本使用里面在.js文件和.wxml文件里面出现的article这个是两个文件里面是一样的。但是article是js文件里面的一个变量是可以变的，只要保证js文件和wxml文件里面变量名一致即可。

 

通过以上方法引入以后可以使用，但是我遇到以下两个问题

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