微信小程序学习笔记(navigator、rich-text)

navigator(导航组件)
块级元素，默认会换行，可以直接设置宽度高度。
属性：
1、url：要跳转的页面路径，绝对路径相对路径都可以。
2、target：跳转到哪个目标。默认是自己的小程序(self)，其他小程序页面(miniProgram)
3、open-type：跳转方式。有以下属性
① navigate 默认值，保留当前页面，跳转到小程序内的某个页面，tabbar页面除外。
② redirect关闭当前页面，跳转到小程序内的某个页面tabbar页面除外
③ switchTab跳转到tabbar页面且关闭其他非tabbar页面
④ reLaunch关闭所有页面，打开应用内的某个页面
⑤ navigateBack关闭当前页面，返回上一页或者多级页面，可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
⑥ exit退出小程序，target="miniProgram"时生效
rich-text(富文本标签)
用nodes属性实现
1、可以直接接收标签字符串

<rich-text nodes="{{html}}"></rich-text>

Page({
  data:{
    // html:'<div class="xxx" style="xxx" ><p>123123</p></div>'
  }
})

2、可以接受对象数组

<rich-text nodes="{{html}}"></rich-text>

html:[{
      //name中写标签名称，此处为div
      name:"div",    
      //attrs中放该标签的各种属性
      attrs:{
        class:"xxx",
        style:"color:red"
      },
      //children内部放该标签的子节点，同样是对象数组的形式
      children:[{
        name:"p",
        //p标签没有样式，所以attrs置空不写
        attrs:{},
        children:[{
          type:"text",
          text:"hello my program!"
        }]
      }]
    }]

用标签字符串图例

对象数组图例