微信小程序解析html富文本插件wxParse

最近在开发微信小程序,因为一些文章的详情页面是富文本,但是小程序不支持html标签,所解析的时候需要将html标签转换为小程序可支持标签,在小程序社区里面发现一个插件应该是目前来说比较好用的插件,不多说了  直接上地址。

官方有教程,github地址:https://github.com/icindy/wxParse


在这里提下使用教程


一、首先将插件文件夹复制到项目里面



二、导入文件

首先在xx.wxml导入文件,在文件头写上:

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

然后再wxss导入文件,在文件头写上:

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


三、在页面xx.js里的onLoad()方法里面写上:

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

此方法的含义为:

[javascript]  view plain  copy
  1. var article = '<div>我是HTML代码</div>';  
  2. /** 
  3. * WxParse.wxParse(bindName , type, data, target,imagePadding) 
  4. * 1.bindName绑定的数据名(必填) 
  5. * 2.type可以为html或者md(必填) 
  6. * 3.data为传入的具体数据(必填) 
  7. * 4.target为Page对象,一般为this(必填) 
  8. * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选) 
  9. */  
  10. var that = this;  
  11. WxParse.wxParse('article''html', article, that,5);  

四、模板引用:

//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

这样页面就能正常渲染出来数据,还有更高级的表情解析,大家可以一起看一看,为插件赞一个

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值