组件和API使用，实现页面跳转

组件和API使用，实现页面跳转

首先我在app.json引入了tabBar组件。
其中index、first、second是tabBar页面，third和four是普通链接页面。

 {
  "pages":[
    "pages/index/index",
    "pages/first/first",
    "pages/second/second",
    "pages/third/third",
    "pages/four/four",
    "pages/logs/logs"
  ],
  "tabBar": {
    "selectedColor": "#DC143C",
    "list":[{
      "pagePath": "pages/index/index",
      "iconPath": "/pages/img/home.png",
      "selectedIconPath": "/pages/img/homeed.png",
      "text": "首页"
    },{
      "pagePath": "pages/first/first",
      "iconPath": "/pages/img/internet.png",
      "selectedIconPath": "/pages/img/internet (1).png",
      "text": "其他"
    },{
      "pagePath": "pages/second/second",
      "iconPath": "/pages/img/my.png",
      "selectedIconPath": "/pages/img/myed.png",
      "text": "我的"
    }]
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

实现如图：
navigator详细内容，可先了解
navigator组件是写在wxml渲染层页面内，其主要实现的是页面跳转，open-type属性是其跳转的方式。

1. open-type=“switchTap” 其功能对应wx.switchTap的功能
   作用：跳转到tabBar页面，并关闭其他所有非tabBar页面；页面可跳到tabBar页面、tabBar页面可调到tabBar页面。

<!-- pages/index/index.wxml -->
<view>
<!-- 组价方式 -->
  <navigator url="/pages/second/second" open-type="switchTab">
   switchTab跳转
   </navigator>
</view>
<!-- API方式 -->
<view>
  <button bindtap="switchTo">wx.switchTap跳转tabBer页面</button>
</view>

// pages/index/index.js
Page({
  data: {
  },
 switchTo(){
   wx.switchTab({
     url: '/pages/first/first',
   })
 },
})

2. open-type=“redirext” 对应wx.redirectTo功能
   作用：关闭当前页面，跳转到应用内的某个页面，跳转其他页面是会关闭当前页面。但是不允许跳转到tabBar页面。

<!--pages/third/third.wxml-->
<view><image src="../img/image (7).jpg"></image></view>
<view>
  <navigator url="/pages/four/four" open-type="redirect">redirect跳转到four页面</navigator>
  <button bindtap="redirctToPage">redirectTo跳转到four页面</button>
</view>
<view>
  <navigator url="/pages/first/first" open-type="switchTab">switchTap页面调到tabBer</navigator>
</view>

// pages/third/third.js
Page({
  data: {
  },
  redirctToPage(){
  wx.redirectTo({
    url: '/pages/four/four'
  })
},

3. open-type=“reLaunch”对应于wx.reLaunch功能
   作用：关闭所有页面，打开到引用内的某个页面；不可以使用tabBar页面跳转其他页面，只能页面跳转到页面
4. open-type="navigate"功能对应于wx.navigateTo功能
   作用：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
5. open-type="navigateBack"对应wx.navigateBack的功能
   作用：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

表格关系对应

open-type属性	对应API	跳转
navigate	wx.navigateTo	保当前页面；页面/tabBar页面—>页面；页面/tabBar页面 X tabBar页面；
redirect	wx.redirectTo	关当前页面；页面/tabBar页面—>页面；页面/tabBar页面 X tabBar页面
switchTab	wx.switchTab	关非tabBar页面；tabBar页面/页面—>tabBar页面；页面/tabBar页面 X 页面
reLaunch	wx.reLaunch	关所有页面,打开应用内某个页面，页面方式跳转均可
navigateBack	wx.navigateBack	关当前页面，返回上页或多页面