使用WxParse插件实现小程序的富文本显示 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
具体使用步骤:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
1. 复制插件文件夹到项目根目录,emojis是表情包,可选择性删除文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
2. 在.js文件中引入WxParse模块文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
var WxParse= require('../../../wxParse/');
3. 在.wxss文件中引入样式,也可以在中引入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
@import"../../../wxParse/";
4. 数据绑定文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
var article= '<div>我是HTML代码</div>'; var that = this; ('article', 'html', article,that, 5); /** * (bindName , type, data,target,imagePadding) * 绑定的数据名(必填) * 可以为html或者md(必填) * 为传入的具体数据(必填) * 为Page对象,一般为this(必填) ** 为当图片自适应是左右的单一padding(默认为0,可选) */
5. 在.wxml文件中引用模板文件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
//导入文件 <import src="../../../wxParse/" /> //引用模版 <template is="wxParse" data="{{wxParseData:}}" /> /** data中的article为bindName */
实际开发中遇到的问题文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
1.图片路径需要修改,添加基路径文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
在文件中的主函数入口中有这样一段:说明调用到了格式化数据的方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
transData = (data, bindName);
2. 在文件中,将变量__placeImgeUrlHttps设置为app的基路径:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
var __placeImgeUrlHttps = getApp().data.baseUrl;
3. 在文件的html2json方法中有这样一段代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
imgUrl = (imgUrl, __placeImgeUrlHttps);
将该代码改为:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12791.html
imgUrl = __placeImgeUrlHttps + imgUrl;