>[success] # 页面跳转
1. 界面的跳转有两种方式：**通过navigator组件**（在app.json 文件的[tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar)属性） 和 **通过wx的API跳转**
| API | 说明 |
| --- | --- | --- |
| [wx.switchTab](https://developers.weixin.qq.com/miniprogram/dev/api/wx.switchTab.html) | 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 |
| [wx.reLaunch](https://developers.weixin.qq.com/miniprogram/dev/api/wx.reLaunch.html) | 关闭所有页面，打开到应用内的某个页面 |
| [wx.redirectTo](https://developers.weixin.qq.com/miniprogram/dev/api/wx.redirectTo.html) | 关闭当前页面，跳转到应用内的某个页面 |
| [wx.navigateTo](https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html) | 保留当前页面，跳转到应用内的某个页面 |
| [wx.navigateBack](https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateBack.html) | 关闭当前页面，返回上一页面或多级页面 |
>[info] ## navigateTo
1. `wx.navigateTo(Object object)`,**保留当前页面，跳转到应用内的某个页面**；**不能跳到 tabbar 页面**（也就是在`app.json`）配置的路由
>[danger] ##### 案例
~~~
Page({
/**
* 页面的初始数据
*/
data: {
name:"w",
age:18
},
onNavigateTo(){
const name = this.data.name
const age = this.data.age
wx.navigateTo({
url: `/page2/index1/index?name=${name}&age=${age}`,
})
}
})
~~~
* 在跳转的页面`onLoad`钩子中获取参数
~~~
// page2/index1/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 接受跳转过来的参数
console.log(options) // {name: "w", age: "18"}
},
})
~~~
>[info] ## wx.navigateBack
1. `wx.navigateBack()`,用来回退上一次页面
2. 可通过[getCurrentPages](https://developers.weixin.qq.com/miniprogram/dev/reference/api/getCurrentPages.html)获取当前的页面栈，决定需要返回几层，拿到对应页面的实例后直接给对应页面赋值
3. 使用`this.getOpenerEventChannel` 去注册传递的事件，然后用`event `去接收
>[danger] ##### 案例
~~~
// page2/index1/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 接受跳转过来的参数
console.log(options) // {name: "w", age: "18"}
},
goBack(){
wx.navigateBack()
// 方式一: 给上一级的页面传递数据
// 2.1. 获取到上一个页面的实例
const pages = getCurrentPages()
const prePage = pages[pages.length-2]
console.log(prePage)
// 2.2.通过setData给上一个页面设置数据
prePage.setData({ message: "呵呵呵" })
}
})
~~~
>[danger] ##### 案例二
* 先注注册event 事件
~~~
Page({
/**
* 页面的初始数据
*/
data: {
name:"w",
age:18
},
onNavigateTo(){
const name = this.data.name
const age = this.data.age
wx.navigateTo({
url: `/page2/index1/index?name=${name}&age=${age}`,
events: {
// 注册事件
backEvent(data) {
console.log("back:", data);
},
}
})
}
})
~~~
* 等点击回退的时候 触发刚才注册事件，形成后台触发也能传递值
~~~
// page2/index1/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 接受跳转过来的参数
console.log(options) // {name: "w", age: "18"}
},
goBack(){
wx.navigateBack()
// 方式一: 给上一级的页面传递数据
// 2.1. 获取到上一个页面的实例
const pages = getCurrentPages()
const prePage = pages[pages.length-2]
console.log(prePage)
// 2.2.通过setData给上一个页面设置数据
prePage.setData({ message: "呵呵呵" })
//2.3. 注册emit
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit("backEvent", { name: "back", age: 111 })
}
})
~~~
- 小程序了解
- webview 是什么
- Native App、Web App、Hybrid App
- 小程序架构模型
- 小程序配置文件
- app.js -- App函数
- 页面.js -- page
- 生命周期？？？？
- 小程序 -- 页面wxml
- 小程序 -- WXS
- 小程序 -- 事件
- 小程序 -- 样式wxss
- 小程序 -- 组件开发
- 小程序 -- 组件插槽
- 小程序 -- 组件的生命周期
- 组件总结
- 小程序 -- 混入
- 小程序基本组件
- text -- 文本
- view -- 视图容器
- button -- 按钮
- image -- 图片
- scroll-view -- 滚动容器
- input -- 双向绑定
- 通用属性
- 小程序常用Api
- 微信网络请求
- 微信小程序弹窗
- 微信小程序分享
- 获取设备信息 / 获取位置信息
- Storage存储
- 页面跳转
- 小程序登录