微信小程序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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
javascript引导程序
Oct 26 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
Python中使用动态变量名的方法
2014/05/06 Python
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
优秀员工自荐信范文
2013/10/05 职场文书
师范大学生求职信
2014/06/13 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers