微信小程序rich-text富文本用法实例分析


Posted in Javascript onMay 20, 2019

本文实例讲述了微信小程序rich-text富文本用法。分享给大家供大家参考,具体如下:

rich-text是一个新增的微信小程序插件,从基础库1.4.0开始,低版本需要做兼容处理

nodes属性可为Array和String类型,但推荐使用Array.由于String类型最终也会转为Array类型

nodes分为支持两种节点,分别为元素节点(type=node ,默认为元素节点)文本节点(type=text)

元素节点

name 标签名 String 支持部分受信任的HTML节点
attrs 属性 Object 支持部分受信任的属性,遵循Pascal命名法
children 子节点列表 Array 结构和nodes一致
<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
<!--{{nodes}}其中的变量名与data中名字相同-->
<!--支持默认事件tap、touchstart、touchmove、touchcancel、touchend和longtap-->
// rich-text.js
Page({
 data: {
 nodes: [{
 name: 'div',
 attrs: {
 class: 'div_class',
 style: 'width : 100px; height : 100px; color: red;'
 },
 children: [{
 type: 'text',
 text: 'Hello World!'
 }]
 }]
 },
 tap() {
 console.log('tap')
 }
})

如果页面中存在多个富文本,富文本中存在多个孩子,请看下例:

<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}"></rich-text>
<rich-text nodes="{{nodes1}}"></rich-text>
// rich-text.js
Page({
 data: {
 nodes: [{
 name: 'div',
 attrs: {
 class: 'div_class',
 style: 'width : 100px; height : 100px; color: red;'
 },
 children: [{
 type: 'text',
 text: 'Hello World!'
 }]
 }],
 nodes1: [{
 name: 'p',
 attrs: {
 class: 'p_class',
 style: 'text-align : center; color: green;'
 },
 children: [{
 type: 'text',
 text: '我是p标签!!!'
 },{
 name: "span",
 attrs: {
  style: "color:red",
  class: "span_class"
 },
 children: [{
  type: "text",
  text: '我是span标签,哈哈哈哈'
 }]
 }]
 }]
 },
})

文本节点

text 文本 String 支持entities
<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}"></rich-text>
// rich-text.js
Page({
 data: {
 nodes: "我是文本节点,意外不?"
 },
})

注意:

  • 全局支持class和style属性,不支持id属性。
  • nodes 不推荐使用 String 类型,性能会有所下降
  • rich-text 组件内屏蔽所有节点的事件。
  • name 属性大小写不敏感
  • 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除,受信任的html节点请看官方文档
  • img 标签仅支持网络图片

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
Javascript基础之数组的使用
May 13 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
详解webpack 入门与解析
Apr 09 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
bootstrap中的导航条实例代码详解
May 20 #Javascript
详解小程序云开发数据库
May 20 #Javascript
VUE脚手架具体使用方法
May 20 #Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 #Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 #Javascript
微信小程序上传文件到阿里OSS教程
May 20 #Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 #Javascript
You might like
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
删除节点的jquery代码
2014/01/13 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
django 解决manage.py migrate无效的问题
2018/05/27 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
联想中国官方商城:Lenovo China
2017/10/18 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
事业单位接收函
2014/01/10 职场文书
数学国培研修感言
2014/02/13 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
档案工作个人总结
2015/03/03 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python