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


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 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
mock.js模拟数据实现前后端分离
Jul 24 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
通过html表格发电子邮件
2006/10/09 PHP
php的一个简单加密解密代码
2014/01/14 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
js过滤数组重复元素的方法
2010/09/05 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
python3实现微型的web服务器
2019/09/03 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
好听的队名和口号
2014/06/09 职场文书
平安工地汇报材料
2014/08/19 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
golang中的struct操作
2021/11/11 Golang