微信小程序页面跳转

页面跳转

有两种方式进行页面跳转：

• 通过navigator组件
• 通过微信提供的API

一：使用navigator组件

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

首页向其他页面跳转（普通页面和TabBar页面）：

home.wxml:

1. 最基本的
<navigator url="/pages/comp/comp">跳转到组件页面</navigator>

2. open-type演示
<navigator 
  url="/pages/comp/comp"
  open-type="redirect"
>跳转到组件页面 redirect</navigator>

<navigator 
  url="/pages/cart/cart"
  open-type="switchTab"
>跳转到购物车页面 tabbar</navigator>

<!-- 带参数的，从首页跳转到详情页 -->
<navigator url="/pages/detail/detail?name=fududu&id=1">带参数跳转到详情页</navigator>
<navigator url="/pages/detail/detail">直接跳转到详情页</navigator>

open-type的取值	对应微信API	含义
navigate	wx.navigateTo	默认，保留当前页面
redirect	wx.redirectTo	关闭当前页面，不能跳到tabbar
reLaunch	wx.reLaunch	关闭所有页面
switchTab	wx.switchTab	跳到TabBar页面，并关闭非TabBar页面
navigateBack	wx.navigateBack	返回上一层或者上几层（delta决定）

二：使用微信提供的API

首页向详情页跳转：

home.wxml:
<button bind:tap="handleToDetail">跳转到详情页</button>

home.js:
handleToDetail(){
  // 1. 跳转到详情页
  wx.navigateTo({
    url: "/pages/detail/detail?name=jjj"  // name是携带的参数
  })

  // 2. 返回
  wx.navigateBack({
    delta: 2, // 控制返回的层级
  })
}

详情页接收首页传递过来的参数：

在onLoad生命周期，options里接收跳转过来时传递的参数

detail.js
onLoad: function(options){
  console.log(options); // 这里的options就接收传递过来的参数
},

结果：

{name: "jjj"}

详情页向首页传递数据

在onUnLoad生命周期，获取首页的页面对象（getCurrentPages）

onUnload: function(){
  // 向首页传递数
  // 1. 获取首页的页面对象
  const pages = getCurrentPages();  // 当前所有的栈对象
  const home = pages[pages.length - 2];

  // 2. 修改首页的数据了
  home.setData({
    title: "hahaha"
  })
}