day5

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

数据传递-传递方式分析

跳转中数据传递.jpg

数据传递.jpg

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

    
    // 1.在首页home.wxml中通过url传递数据
    跳到详情页
    {{title}}
    
    // 2.从详情页details.js中取出数据
      onLoad: function (options) {
        console.log(options)
    },

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

    // 1.在首页home.wxml定义一个插值对
    {{title}}
    // 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定义跳转按钮
```
    
    
```

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

  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中定义返回按钮
```
    
```
- 在详情页的逻辑层定义点击事件
```
      handleBackHome() {
        wx.navigateBack({
        delta: 1
        })
      }
```

day5

你可能感兴趣的:(day5)