微信小程序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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
推荐dojo学习笔记
Mar 24 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
layui清空,重置表单数据的实例
Sep 12 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 session 预定义数组
2009/03/16 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
python输出带颜色字体实例方法
2019/09/01 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
财务部出纳岗位职责
2013/12/22 职场文书
作文评语大全
2014/04/23 职场文书
初中学校军训方案
2014/05/09 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
《雷雨》教学反思
2016/02/20 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL