微信小程序富文本渲染引擎的详解


Posted in Javascript onSeptember 30, 2017

微信小程序富文本渲染引擎的详解

步骤

  • 把 wxParser 目录放到小程序项目的根目录下
  • 在需要富文本解析的 WXML 内引入 wxParser/index.wxml
  • 在页面 JS 文件内使用 wxParser.parse(options) 方法解析 HTML 内容
  • 在小程序项目根目录的 app.wxss 内引入 wxParser 的默认样式库

wxParser.parse(options) 方法的 options 参数说明

参数名 类型 必填 描述
bind String 要绑定的数据名称
html String HTML 内容
target Object 绑定数据的模块对象
enablePreviewImage Boolean 是否启用富文本内的图片预览功能,默认是
tapLink Function 点击超链接时的回调函数

示例

WXML:在需要用到富文本解析的文件夹下的 WXML 中引入 wxParser/index.wxml

// 将 WXML 引入需要富文本解析的文件下
<import src="../../wxParser/index.wxml"/>
<view class="wxParser">
 <template is="wxParser" data="{{wxParserData:richText.nodes}}"/>
</view>

JS:在需要用到富文本解析的文件夹下的 JS 中引入 wxParser 渲染引擎

// 在
const wxParser = require('../../wxParser/index');

Page({
 data: {},
 onLoad: function () {
  let that = this;
  let html = `<div style="color: #f00;">hello, wxParser!</div>`;

  wxParser.parse({
   bind: 'richText',
   html: html,
   target: that,
   enablePreviewImage: false, // 禁用图片预览功能
   tapLink: (url) => { // 点击超链接时的回调函数
    // url 就是 HTML 富文本中 a 标签的 href 属性值
    // 这里可以自定义点击事件逻辑,比如页面跳转
    wx.navigateTo({
     url
    });
   }
  });

 }
})

WXSS:在根目录的 app.wxss 内引入 wxParser 的默认样式库

@import '../wxParser/index.wxss'

注意

  • JS 中的 richText 可以自定义,但是必须要与 WXML 中的 richText 对应
  • 推荐把 template 放到 <view class="wxParser"></view> 内部,这样可以受 wxParser 控制并具有 wxParser 的一些默认样式
  • 不建议直接修改 wxParser 的默认样式(因为内容库样式会有定期更新),应该新增一个样式补丁文件用来自定义样式

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js继承 Base类的源码解析
Dec 30 Javascript
Jquery插件 easyUI属性汇总
Jan 19 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
javascript数据类型详解
Feb 07 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
js实现数组和对象的深浅拷贝
Sep 30 #Javascript
node通过express搭建自己的服务器
Sep 30 #Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 #Javascript
详解在Vue中有条件地使用CSS类
Sep 30 #Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 #Javascript
vue按需引入element Transfer 穿梭框
Sep 30 #Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 #Javascript
You might like
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
django之session与分页(实例讲解)
2017/11/13 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python Selenium 库的使用技巧
2020/10/16 Python
python 解决函数返回return的问题
2020/12/05 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
类的核心特性有哪些
2014/01/01 面试题
C#如何进行LDAP用户校验
2012/11/21 面试题
中学生个人自我评价
2014/02/06 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
大雁塔英文导游词
2015/02/10 职场文书
新郎新娘致辞
2015/07/31 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
Python如何识别银行卡卡号?
2021/06/10 Python