微信小程序 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 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
php中动态修改ini配置
2014/10/14 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
Python基础学习之常见的内建函数整理
2017/09/06 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
产假请假条
2014/04/10 职场文书
红色故事演讲稿
2014/05/22 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
大学学生会辞职信
2015/05/13 职场文书
广播体操比赛主持词
2015/06/29 职场文书