微信小程序 rich-text的使用方法


Posted in Javascript onAugust 04, 2017

 微信小程序 rich-text的使用方法

rich-text

  • 属性:nodes 类型:Array / String 结点列表 / HTML String
  • 全局支持class和style属性,不支持id属性。
  • 结点类型:type = node , name 标签名 String 是 支持部分受信任的HTML结点,  attrs 属性 Object 否 支持部分受信任的属性,遵循Pascal命名法 ,  children 子结点列表 Array 否 结构和nodes一致
  • 结点类型:type = text  ,text 文本 String 是 支持entities
  • nodes 不推荐使用 String 类型,性能会有所下降
  • rich-text 组件内屏蔽所有结点的事件。
  • attrs 属性不支持 id ,支持 class 。
  • name 属性大小写不敏感。
  • 如果使用了不受信任的HTML结点,该结点及其所有子结点将会被移除。
  • img 标签仅支持网络图片。
<rich-text nodes="{{nodes}}" />
<rich-text nodes="{{nodes1}}" />
<rich-text nodes="{{nodes2}}" />

微信小程序 rich-text的使用方法

this.setData({
  nodes: "<h1 style='color:red;'>html标题</h1>",
  nodes1: [{
   name: "h1",
   attrs: {
    style: "color:red",
    class: "red"
   },
   children: [{
    type: "text",
    text: '结点列表标题'
   }]
  }],
  nodes2: [{
   name: "ul",
   attrs: {
    style: "padding:20px;border:1px solid blue;",
    class: "red"
   },
   children: [
    {
     name: "li",
     attrs: {
      style: "color:red",
      class: "red"
     },
     children: [{
      type: "text",
      text: '多层结点 无序列表'
     }],
    }, {
     name: "li",
     attrs: {
      style: "color:red",
      class: "red"
     },
     children: [{
      type: "text",
      text: '多层结点 无序列表1'
     }],
    }]
  }]
})

以上就是微信小程序 rich-text的介绍,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
JS中常用的正则表达式
Sep 29 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 #Javascript
JS中使用media实现响应式布局
Aug 04 #Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 #Javascript
node中Express 动态设置端口的方法
Aug 04 #Javascript
微信小程序 同步请求授权的详解
Aug 04 #Javascript
微信小程序 转发功能的实现
Aug 04 #Javascript
Vue计算属性的使用
Aug 04 #Javascript
You might like
[转帖]PHP世纪万年历
2006/12/06 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
web打印小结
2017/01/11 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
详解Django CAS 解决方案
2019/10/30 Python
python3实现弹弹球小游戏
2019/11/25 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
大学生职业规划书的范本
2014/02/18 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
老人节标语大全
2014/10/08 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
详解Python如何批量采集京东商品数据流程
2022/01/22 Python