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


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 相关文章推荐
Javascript 模式实例 观察者模式
Oct 24 Javascript
JQuery 写的个性导航菜单
Dec 24 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
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编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
php写的AES加密解密类分享
2014/06/20 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
js星星评分效果
2014/07/24 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
森林防火工作方案
2014/02/14 职场文书
环保建议书400字
2014/05/14 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python