微信小程序 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控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
js实现坦克大战游戏
Feb 24 Javascript
js实现无缝轮播图
Mar 09 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 curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
php 多文件上传的实现实例
2016/10/23 PHP
文字幻灯片
2006/06/26 Javascript
共享自己写一个框架DreamScript
2007/01/20 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
微信小程序icon组件使用详解
2018/01/31 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
python根据日期返回星期几的方法
2015/07/06 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python导入坐标点的具体操作
2019/05/10 Python
在python中画正态分布图像的实例
2019/07/08 Python
python 随机森林算法及其优化详解
2019/07/11 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
django基础学习之send_mail功能
2019/08/07 Python
django中瀑布流写法实例代码
2019/10/14 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
python 进程池pool使用详解
2020/10/15 Python
《再见了,亲人》教学反思
2014/02/26 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书