一、准备工作
github下载waParse插件,地址:https://github.com/icindy/wxParse
放到小程序目录下:和utils平级
二、使用
//WXML页面
<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}" />
//样式引入
@import "../../wxParse/wxParse.wxss";
//js 注意图片路径问题
var WxParse = require('../../wxParse/wxParse.js');
//请求数据之后赋值给article
WxParse.wxParse('article', 'html', article, that, 5);
参数说明:
WxParse.wxParse(bindName , type, data, target,imagePadding)
1.bindName绑定的数据名(必填)
2.type可以为html或者md(必填)
3.data为传入的具体数据(必填)
4.target为Page对象,一般为this(必填)
5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
图片路径问题:
1.直接改进html2json.js中的路径:line151行(下面这一段)
var hostsUrl='http://www.baidu.com'
//对img添加额外数据
if (node.tag === 'img') {
node.imgIndex = results.images.length;
//定义全局hostsUrl,写上自己的地址路径
var imgUrl = hostsUrl+node.attr.src;
if (imgUrl[0] == '') {
imgUrl.splice(0, 1);
}
imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);
node.attr.src = imgUrl;
node.from = bindName;
results.images.push(node);
results.imageUrls.push(imgUrl);
}
2.暴力解决
//请求数据之后赋值给article
WxParse.wxParse('article', 'html', article, that, 5);(第二步)
在赋值之前对acticle字符串进行路径查找和替换,如下操作:
article.replace("/public","http://www.baidu.com/public")(第一步)