微信小程序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事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
javascript动画浅析
Aug 30 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 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
PHP 日常开发小技巧
2009/09/23 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
迷你西餐厅创业计划书范文
2013/12/31 职场文书
贷款担保书范文
2014/05/13 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
南京导游词
2015/02/03 职场文书
让世界充满爱观后感
2015/06/10 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
旅游安全责任协议书
2016/03/22 职场文书
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL