[小程序]页面跳转

[小程序]页面跳转_第1张图片

一、页面跳转

        1.声明式导航

        使用组件实现(固定式),需要指定url属性(跳转位置)和open-type属性(跳转方式)

                ①跳转tabBar页面

        open-type属性必须指定类型为switchTab

跳转index页

                ②跳转非tabBar页面

         open-type属性必须指定位置navigate(可以缺省)

跳转log页

                ③后退导航

        open-type值为navigateBackdelta值为数字,表示返回的层级(默认为1)

返回上一级

        2.编程式导航

                ①跳转tabBar页面 

        调用API实现,使用wx.switchTab(Object object)方法来跳转,object对象中包含以下属性:

url 跳转链接(必填项)
success 成功时回调函数
fail 失败时回调函数
complete 结束时回调函数
goIndex(){
    wx.switchTab({
      url: '/pages/index/index',
    })
  },

                ②跳转非tabBar页面

        调用wx.navigateTo实现,参数列表同上

  goLogs(){
    wx.navigateTo({
      url: '/pages/logs/logs',
    })
  },

                ③返回导航

        调用wx.navigateBack实现(不需要指定delta属性)

  goBack(){
    wx.navigateBack()
  },

二、导航传参

        1.声明式导航传参

        类似于http中的GET指令,参数与路径之间使用 ? 进行分隔;参数键与参数之间以 = 相连;不同参数之间用 & 隔开。

跳转Show页

        2.编程式导航传参

        基本和声明式一致,使用参数路径的方式传参

  goShow(){
    wx.navigateTo({
      url: '/pages/show/show?name=Coco&age=22',
    })
  },

        3.接收参数

        传递给页面的参数可以在对应的onLoad参数中获取,如下:

  onLoad(options) {
    this.setData({name:options.name})
    this.setData({age:options.age})
  },

 

你可能感兴趣的:(工程实践,小程序,java,前端)