🌙 app.json配置页面参数
pages屬性負責注冊小程序頁面，必須填写，value值为一个包含页面路径的数组，用来指定小程序由哪些页面构成，每一项由页面“路径+文件名”组成：
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/not-found/index"
]
}
1
2
3
4
5
6
7
2
3
4
5
6
7
pages数组中页面路径不需要加文件后缀名，页面渲染时会自动寻找路径.json、.js、.wxml、.wxss四个文件进行整合。
数组的第一项代表小程序的初始页面，小程序中增加、删除页面，都需要对pages进行修改，并且重启项目。
🌙 Page函数注册页面
// index.ts
// 获取应用实例
const app = getApp<IAppOption>()
console.log('app', app.globalData);
Page({
// 页面初始数据
data: {
value: '',
motto: 'Hello Weixin App',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
// 生命周期函数：页面加载时触发。一个页面只会调用一次
onLoad(query) {
console.log('page index onLoad', query);
// @ts-ignore
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
// 生命周期函数：页面显示时触发。每次打开页面都会调用一次
onShow(){
console.log('page index onShow');
console.log('page route', this.route);
},
// 生命周期函数：页面初次渲染完成时触发。一个页面只会调用一次
onReady(){
console.log('page index onReady')
},
// 生命周期函数：页面隐藏时触发。
onHide() {
console.log('page index onHide');
},
// 生命周期函数：页面卸载时触发。
onUnload() {
console.log('page index onUnload');
},
// 页面相关时间触发函数，用户下拉时触发， `app.json`中`window`的`enablePullDownRefresh`属性设置为`true`时生效
// `wx.stopPullDownRefresh`方法可以停止
onPullDownRefresh() {
console.log('page index onPulldownRefresh')
},
// 页面上拉触底时触发
onReachBottom() {
console.log('page index onReachBottom');
},
// 页面发生滚动时触发
onPageScroll(options) {
console.log('page index onPageScroll', options);
},
// 用户点击分享时触发
onShareAppMessage(options) {
console.log('page index onShareAppMessage', options);
},
onShareTimeline() {
console.log('page index onShareTimeline');
},
onResize() {
console.log('page index onResize');
},
// 自定义事件处理函数
clickMe() {
wx.navigateTo({url: '../not-found/index'})
},
bindViewTap() {
wx.navigateTo({
url: '../logs/logs',
})
},
getUserProfile() {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e: any) {
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
console.log(e)
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
🌙 getCurrentPages获取当前页面栈
获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。
注意事项
- 不要尝试修改页面栈，会导致路由以及页面状态错误。
- 不要在
App.onLaunch的时候·调用getCurrentPages()，此时page还没有生成。
🌙 Router页面路由对象
页面路由器对象。可以通过 this.pageRouter 或 this.router 获得当前页面或自定义组件的路由器对象
页面路由器有 switchTab reLaunch redirectTo navigateTo navigateBack 五个方法，与 wx 对象向同名的五个方法 switchTab reLaunch redirectTo navigateTo navigateBack 功能相同；
唯一的区别是，页面路由器中的方法调用时，相对路径永远相对于 this 指代的页面或自定义组件。
// index/index.js
Page({
wxNavAction: function () {
wx.navigateTo({
url: './new-page'
})
},
routerNavAction: function () {
this.pageRouter.navigateTo({
url: './new-page'
})
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
如上所示,如果此时已经跳转到了一个新页面 pack/index ，然后才调用到上面的wxNavAction方法，跳转的新页面路径将是pack/new-page` ；
而如果调用的是 routerNavAction 方法，跳转的新页面路径仍然是 index/new-page 。
换而言之， this.pageRouter 获得的路由器对象具有更好的基路径稳定性。通常情况下，使用 this.pageRouter.navigateTo 代替 wx.navigateTo 是更优的。