微信小程序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 相关文章推荐
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
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
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
python处理大数字的方法
2015/05/27 Python
Python+微信接口实现运维报警
2016/08/27 Python
Python类的继承和多态代码详解
2017/12/27 Python
python如何让类支持比较运算
2018/03/20 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
python银行系统实现源码
2019/10/25 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
详解Python IO编程
2020/07/24 Python
亚马逊印度站:Amazon.in
2017/10/15 全球购物
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
秘书岗位职责
2013/11/18 职场文书
电钳专业个人求职信
2014/01/04 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
三年级作文之趣事作文
2019/11/04 职场文书