微信小程序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 处理URL实用技巧
Nov 23 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
axios post提交formdata的实例
Mar 16 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 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 mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
基于ssm框架实现layui分页效果
2019/07/27 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
python实现无证书加密解密实例
2014/10/27 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
python实现大量图片重命名
2020/03/23 Python
Python Celery多队列配置代码实例
2019/11/22 Python
python默认参数调用方法解析
2020/02/09 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
学术会议主持词
2014/03/17 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
秋冬农业生产标语
2014/10/09 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
大学班干部竞选稿
2015/11/20 职场文书
七年级作文之游记
2019/12/11 职场文书