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


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 简练的几个函数
Aug 29 Javascript
让Firefox支持event对象实现代码
Nov 07 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
JavaScript实现简单进度条效果
Mar 25 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
用C++封装MySQL的API的教程
2015/05/06 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
大学生个人求职信范文
2013/09/21 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
销售人员求职信
2014/07/22 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
学校重阳节活动总结
2015/03/24 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
四十九个javascript小知识实用技巧
2021/11/20 Javascript