微信小程序 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 面向对象编程
Oct 28 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
详解React-Todos入门例子
Nov 08 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
十天学会php之第六天
2006/10/09 PHP
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
微信小程序签到功能
2018/10/31 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
python中pass语句用法实例分析
2015/04/30 Python
Python多线程爬虫简单示例
2016/03/04 Python
python实现简单爬虫功能的示例
2016/10/24 Python
python如何修改装饰器中参数
2018/03/20 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
医学毕业生自我鉴定
2013/10/30 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
校长创先争优承诺书
2014/08/30 职场文书
合作意向协议书
2015/01/29 职场文书
护士求职自荐信
2015/03/25 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
撤诉书怎么写
2015/05/19 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js