小程序 导航方式

小程序的路由章节并不是需要学习怎么定义路由，因为路由已经在app.json全局配置文件中声明好了。我们需要掌握的就是如何实现page的切换。

基于组件

• 基于组件式的导航方式其实就是之前的声明式导航
• 文档地址：
• https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
• 组件：navigator
• 该组件的属性比较多，需要注意下open-type，这里属性值稍微常用一点的就是switchTab，其是用来切换tabBar的
• open-type 的合法值:

值	说明
navigate	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	对应 wx.redirectTo 的功能
switchTab	对应 wx.switchTab 的功能
reLaunch	对应 wx.reLaunch 的功能
navigateBack	对应 wx.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效

案例分析：

• 目录结构：

• mian.wxml文件代码

<!--miniprogram/pages/main/main.wxml-->

<!-- 
    使用navigator点击后去nav1 
    1. 跳转url地址必须以“/”开头
    2. 在跳转的时候可以给目标页面传递参数，
    3. 参数被携带过去后，在目标页面的js文件汇总的onLoad周期中接收，
        编辑器自动加点形参options就是收取到的参数对象
-->
<view>
<navigator url="/pages/nav1/nav1">
    <button>去nav1页面</button>
</navigator>
<navigator url="/pages/nav1/nav1?id=1&name=2">
    <button>传参id=1&name=2去nav1页面</button>
</navigator>
<!-- 
    在没有open-type属性的情况下，url只能是普通的页面地址，不能是tabBar中的地址
    如果要使用tabBar中的地址，必须加上open-type="switchTab"
 -->
<!-- 
    <navigator url="/pages/logs/logs" open-type="switchTab">
    <button>尝试切菜单</button>
    </navigator>
 -->
</view>

• nav1.js文件代码

// miniprogram/pages/nav1/nav1.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    this.setData({
      id:options.id,
      name:options.name
    })
  },
})

• nav1.wxml文件代码

<!--miniprogram/pages/nav1/nav1.wxml-->

<text>id={{id}}，name={{name}}</text>

• 运行效果：

基于api

• 基于Api的导航实质上就是基于事件+编程的方式来实现导航。
• 文档地址：
• https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html
• 具体的api可以参考文档

案例分析：

• nav2.wxml文件代码

<!-- 基于Api形式的导航实现 -->
<view bindtap="tapHandler1">去tab中的index</view>
<view bindtap="tapHandler2">去nav1</view>
<view bindtap="tapHandler3">去nav1</view>

• nav2.js文件代码

// 编程式导航方式
// wx.switchTab  等于  navigator + open-type=switchTab
tapHandler1: function(){
    wx.switchTab({url: "/pages/index/index"});
},

// wx.navigateTo  等于  navigator
// navigateTo，保留当前页面（目标页面左上角出现“返回”按钮），去应用内其它页面，但不能是tabbar中页面
tapHandler2: function(){
    wx.navigateTo({url: "/pages/nav1/nav1"});
},

// wx.redirectTo  等于  navigator + open-type=redirect
// redirectTo，不保留当前页面（目标页面左上角出现“首页”按钮），去应用内其它页面，但不能是tabbar中页面
tapHandler3: function(){
    wx.redirectTo({url: "/pages/nav1/nav1"});
},