微信小程序解析富文本过程详解


Posted in Javascript onJuly 13, 2019

前言

最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签。

开始的时候想过自己写方法来替换标签,后来找到了一个很好用的插件:WxParse。

今天分享给大家,Github地址:https://github.com/icindy/wxParse

使用WxParse解析富文本数据

1.将下载下来的插件文件夹复制到我们的项目根目录下(其中emojis文件可根据自己所需决定要或者不要,其他的文件必须要)

- wxParse/
 -wxParse.js(必须存在)
 -html2json.js(必须存在)
 -htmlparser.js(必须存在)
 -showdown.js(必须存在)
 -wxDiscode.js(必须存在)
 -wxParse.wxml(必须存在)
 -wxParse.wxss(必须存在)
 -emojis(表情包文件,可选)

wxParse

微信小程序解析富文本过程详解

2.在需要使用该插件的View(.js文件)中引入WxParse模块

Var WxParse= require('../../../wxParse/wxParse.js');

3.在需要是用的wxss中引入WxParse.wxss,也可以在app.wxss中引入

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

4.进行数据绑定

Var article= '<div>我是HTML代码</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);

5.在内容页(.wxml文件)中引用该模版文件,其中data中article为bindName

导入文件

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

引用模版

<template is="wxParse" data="{{wxParseData:article.nodes}}" />

完成后页面就能够正常渲染HTML富文本数据了

示例

微信小程序解析富文本过程详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 #Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 #Javascript
微信小程序图片左右摆动效果详解
Jul 13 #Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 #Javascript
vue实现图片预览组件封装与使用
Jul 13 #Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 #Javascript
小程序实现悬浮搜索框
Jul 12 #Javascript
You might like
php 模拟get_headers函数的代码示例
2013/04/27 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
表单提交验证类
2006/07/14 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
Django之form组件自动校验数据实现
2020/01/14 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
Python pip使用超时问题解决方案
2020/08/03 Python
Python join()函数原理及使用方法
2020/11/14 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
人力资源管理专业学生自我评价
2013/11/20 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
金融事务专业求职信
2014/04/25 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
体检通知范文
2015/04/21 职场文书
闪闪红星观后感
2015/06/08 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android