微信小程序基本用法2(三)

一、navigator 导航组件

        导航组件, 类似于超链接标签

        一.1 属性值

属性名	类型	默认值	说明
target	String	self	在哪个项目上发生跳转,默认当前小程序,可选值 selft / miniProgram
url	String		当前小程序内的跳转链接
open-type	String	navigate	跳转方式

        一.2 有效值

值	说明
navigate	保留当前页面,跳转到应用内的某个页面,但是不能跳转到 tabbar 页面
redirect	关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面
switchTab	跳转到 tabbar 页面,并关闭其他所有非 tabbar 页面
reLaunch	关闭所有页面,打开到应用内的某个页面
navigateBack	关闭当前页面,返回上一页面或多级页面. 可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层
exit	退出小程序,target=“miniProgram”

        一.3 先在 app.json 中创建新页面

        一.4 在创建的新页面 xxx.wxml 中编译

<!-- 
  导航组件  navigator
  一. url 要跳转的页面路径 绝对路径 相对路径
  二. navigator 是块级元素,默认会换行,可以直接加入宽度和高度
      a链接不会换行,行级元素
  三. target  要跳转到当前的小程序,还是其它的小程序的页面
      self 默认值 自己  小程序的页面
      miniProgram  其它的小程序页面
  四. open-type 跳转的方式
      1. navigate 默认值   保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不能跳到tabbar ⻚⾯
      2. redirect   关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到tabbar ⻚⾯。
      3. switchTab   跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯
      4. reLaunch   关闭所有⻚⾯，打开到应⽤内的某个⻚⾯
 -->

<!-- 
  url 里面的地址 是上一个页面中 我们写的那个轮播图 swiper 的路径地址,
  注意要把路径地址中的 "\" 改为 "/"  把最后的后缀名 .wxml 删掉,就可以点击跳转了 
  跳转之后屏幕左上角会显示一个 ">" 返回图标
-->
 <navigator url="/pages/work7/work7">可以跳转到别的路径</navigator>

 <!-- 不能点击跳转到 tabBar 页面-->
 <navigator url="/pages/index/index">不能跳转到tabBar</navigator>

 <!-- 点击跳转之后,屏幕左上角会显示一个 小房子 的图标,可以跳转但是不能跳转到 tabBar 页面 -->
 <navigator open-type="redirect" url="/pages/work7/work7">可以跳转到别的页面</navigator>

 <!-- 这个属性添加之后,可以成功跳转到 tabBar 页面,但是没有返回功能 -->
 <navigator open-type="switchTab" url="/pages/index/index">可以跳转到 tabBar 页面</navigator>

 <!-- 这个属性添加之后,可以随便进行跳转,最强大 -->
 <navigator open-type="reLaunch" url="/pages/work2/work2">可以随便跳转到 某个 页面</navigator>
 

二、rich-text 富文本标签

        可以将字符串解析成 对应标签，类似 vue中 v-html 功能

        二.1 新建页面,并编译 xxx.wxml 文件 和 xxx.js 文件

        xxx.js 文件

// pages/work9/work9.js
Page({
   
  data: {
   
    // 1. 标签字符串
    // 在淘宝上复制的
    // html:'<ul class="zuanshi" data-spm-ab="zuanshi"><li class="item item-0"><a href="https://alimarket.tmall.com/markets/alimama/mingdian"><img src="https://gtms01.alicdn.com/tps/i1/TB12EhzIXXXXXbMXpXXDgwcQVXX-375-130.jpg"></a></li><li class="item item-1"><a href="https://alimarket.tmall.com/markets/alimama/mingdian"><img src="https://gtms02.alicdn.com/tps/i2/TB1ZeJGIXXXXXcnXXXXDgwcQVXX-375-130.jpg"></a></li><li class="item item-2"><a href="https://alimarket.tmall.com/markets/alimama/mingdian"><img src="https://gtms03.alicdn.com/tps/i3/TB197VzIXXXXXbJXpXXDgwcQVXX-375-130.jpg"></a></li></ul>'

    // 2. 对象数组
    html:[
      {
   
        // 1. div标签 name属性来制定
        name:"div",

        // 2. 标签上有那些属性
        attrs:{
   
          // 标签上的属性