微信小程序关于商品详情类的富文本解析器
2020-08-08 20:41
555 查看
微信小程序关于商品详情类的富文本解析器
富文本的解析,在vue中有v-html解析富文本的方法,但是在微信小程序中就不可以了,所以今天老师讲解了一种关于微信小程序的富文本的解析方法-
github地址:https://github.com/icindy/wxParse
-
使用方法
1,下载github官方wxParse目录到小程序的根目录下
文件结构:
wxParse/
-wxParse.js(必须存在)
-html2json.js(必须存在)
-htmlparser.js(必须存在)
-showdown.js(必须存在)
-wxDiscode.js(必须存在)
-wxParse.wxml(必须存在)
-wxParse.wxss(必须存在)
-emojis(可选) -
2,引入必要的文件:
//在要使用的页面中引入WxParse模块 var WxParse = require('/wxParse/wxParse.js');
-
3,将WxParse.css引入在app.wxss中
@import "/wxParse/wxParse.wxss";
-
4,将富文本绑定给wxParse
格式:wxparse.wxparse(参数1,参数2,参数3,参数4,参数5)
参数说明:
1,bindName绑定的数据名(必须)
2,type选填html或md(必须)
3,data为传入的具体数据(必填)
4,target为page对象,一般为this(必填)
5,imagePadding为当图片自适应是左右的单一padding(默认值0,可选)
例如:
var article = '<div>我是HTML代码</div>'; var that = this; WxParse.wxParse('article', 'html', article, that, 5);
-
5,引入模板
<import src="/wxParse/wxParse.wxml"/> //这里data中article为bindName <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
相关文章推荐
- 微信小程序视频层级过高问题与淘宝商品详情相册展示效果
- [置顶] 微信小程序转发商品的详情页 + 转发功能(传参)
- 微信小程序 商品详情页弹窗
- 小程序添加发布商品,微信小程序怎么上传商品详情页
- 微信小程序商品详情页规格属性选择
- 微信小程序商品到详情
- 微信小程序商品详情 + 评论功能实现
- 微信小程序富文本解析(完整demo:商品详情)
- 微信小程序商品详情页交互源码(选择商品类型切换、预览商品图片)
- 微信小程序商品到详情
- 微信小程序商品详情页的底部弹出框
- 微信小程序商品详情页规格属性选择示例代码
- 微信小程序电商实战-商品详情(上)
- 微信小程序实战篇-商品详情页(二)
- ColorUI 微信小程序 商品详情页模板,仿微信胶囊
- 微信小程序实战篇-商品详情页(一)
- 微信小程序商品到详情的实现
- 微信小程序实战篇-商品详情页(二)
- 微信小程序商品详情页的底部弹出框效果
- 微信小程序实战篇-商品详情页(一)