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


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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
详解Layer弹出层样式
Aug 21 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 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学习 计数器实例代码
2008/06/15 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
简述vue中的config配置
2018/01/23 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
详解appium+python 启动一个app步骤
2017/12/20 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
python绘制直线的方法
2018/06/30 Python
python实现事件驱动
2018/11/21 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
JAVA程序员自荐书
2014/01/30 职场文书
高中军训感言800字
2014/03/05 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
公司开除员工通知
2015/04/22 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
redis 限制内存使用大小的实现
2021/05/08 Redis
javascript对象3个属性特征
2021/11/17 Javascript