微信小程序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 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 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 友好URL的实现(吐血推荐)
2008/10/04 PHP
Cannot modify header information错误解决方法
2008/10/08 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
JS将秒换成时分秒实现代码
2013/09/03 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python格式化css文件的方法
2015/03/10 Python
Django进阶之CSRF的解决
2018/08/01 Python
python爬取微信公众号文章
2018/08/31 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
大一军训感言
2014/01/09 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
迎国庆横幅标语
2014/10/08 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
离婚协议书范文
2015/01/26 职场文书
检讨书范文大全
2015/05/07 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书