页面跳转官方文档

• 界面跳转有两种方式：通过navigation组件和通过wx的API跳转
  • 通过navigation组件
  • 小程序页面跳转.jpg
  • 通过navigation组件的url属性指定跳转页面的路径
    • <navigator url='/pages/comment/comment'>跳到评论页</navigator>
  • navigation组件的open-type属性
  • open-type.png
    • redirect:关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面，并且不能返回。（不是一个压栈）
    • switchTab：跳转到tabBar页面，并关闭其他所有tabBar页面。（需要在tabBar中定义的）
    • reLaunch:关闭所有的页面，打开应用中某个页面。（直接展示某个页面，并且可以跳转到tabBar页面）

数据传递-传递方式分析

跳转中数据传递.jpg

数据传递.jpg

• 首页跳转到详情页并传递数据

      <!-- 3.跳转过程中数据的传递 -->
      // 1.在首页home.wxml中通过url传递数据
      <navigator url='/pages/detail/detail?name=why&age=18&height=1.88'>跳到详情页</navigator>
      <view>{{title}}</view>
      
      // 2.从详情页details.js中取出数据
        onLoad: function (options) {
          console.log(options)
      },
  

• 详情页返回到首页并传递数据

      // 1.在首页home.wxml定义一个插值对
      <view>{{title}}</view>
      // 2.在首页逻辑岑home.js定义插值对的内容
        data: {
          title: '哈哈哈'
        },
      // 3.在详情页details.js中通过onUnload（页面退出的时候）修改首页的插值对来假性传递数据
        onUnload() {
          // 1.获取首页的页面对象
          // getCurrentPages当前所有栈的页面
          const pages = getCurrentPages()
          const home = pages[pages.length - 2]
  
          // 2.调用页面对象的setData
          home.setData({
              title: '呵呵呵'
          })
        },
  

页面跳转-通过代码

代码页面跳转.jpg

• 首页跳到详情页并传递数据wx.navigateTo
  • 在首页home.wxml定义跳转按钮

        <!-- 4.通过代码进行页面跳转 -->
        <button size='mini' bind:tap="handlePushDetail">跳到详情页</button>
    

  • 在首页逻辑层中定义点击事件

      handlePushDetail() {
        wx.navigateTo({
            url: '/pages/detail/detail?title=你好啊',
        })
        
        // open-type的每一种属性都有其指定的API
        // wx.redirectTo({
        //   url: '',
        // })
     }
    

  • 在详情页通过onLoad函数获取数据

      onLoad: function (options) {
            console.log(options)
      },
    

• 详情页跳到首页并传递数据wx.navigateBack
  • 在详情页detail.wxml中定义返回按钮

        <button size='mini' bind:tap="handleBackHome">返回</button>
    

  • 在详情页的逻辑层定义点击事件

          handleBackHome() {
            wx.navigateBack({
            delta: 1
            })
          }