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


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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
jquery dialog键盘事件代码
Aug 01 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 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 addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python的标准模块包json详解
2017/03/13 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
python实现数字炸弹游戏
2020/07/17 Python
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
计算机个人求职信范例
2014/01/24 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
英文自荐信常用句子
2014/03/26 职场文书
法制报告会主持词
2014/04/02 职场文书
暑期社会实践证明书
2014/11/17 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
基石观后感
2015/06/12 职场文书
教师教育教学随笔
2015/08/15 职场文书
mysql序号rownum行号实现方式
2022/12/24 MySQL