wxParse-微信小程序富文本编辑器支持HTML解析
发布时间:2018-01-16 编辑:小张个人博客 查看次数:11055
微信小程序输出html内容数据插件wxParse,可以把带html标签的数据输出为微信小程序正常显示的格式,测试可用,不过外观样式,可能需要根据你的需求再调整一下
获取地址:https://github.com/icindy/wxParse
wxParse基本使用方法
// Copy文件夹wxParse - wxParse/ -wxParse.js(必须存在) -html2json.js(必须存在) -htmlparser.js(必须存在) -showdown.js(必须存在) -wxDiscode.js(必须存在) -wxParse.wxml(必须存在) -wxParse.wxss(必须存在) -emojis(可选)
引入必要文件
//在使用的View中引入WxParse模块 var WxParse = require('../../wxParse/wxParse.js');
//在使用的Wxss中引入WxParse.css,可以在app.wxss @import "/wxParse/wxParse.wxss";
数据绑定
var article = '<div style="color:#ccc;">小张个人博客:Hello MTCM!</div>'; /** * WxParse.wxParse(bindName , type, data, target,imagePadding) * 1.bindName绑定的数据名(必填) * 2.type可以为html或者md(必填) * 3.data为传入的具体数据(必填) * 4.target为Page对象,一般为this(必填) * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选) */ var that = this; WxParse.wxParse('article', 'html', article, that, 5);
模版引用
// 引入模板 <import src="你的路径/wxParse/wxParse.wxml"/> //这里data中article为bindName <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
修改文章内容样式(WxParse.css/.WxEmojiView)
.WxEmojiView{ align-items: center; font-size: 14px; }
修改图片路径(wxParse.wxml)
<template name="wxParseImg"> <image class="{{item.classStr}} wxParse-{{item.tag}}" data-from="{{item.from}}" data-src="http://127.0.0.1/blog/public{{item.attr.src}}" data-idx="{{item.imgIndex}}" src="http://127.0.0.1/blog/public{{item.attr.src}}" mode="aspectFit" bindload="wxParseImgLoad" bindtap="wxParseImgTap" mode="widthFix" style="width:{{item.width}}px;" /> </template>
效果如下:
Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1
联系方式:[email protected] | 本站文章仅供学习和参考