uniapp 微信小程序启动页

uniapp 微信小程序启动页

App.vue

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
<script>
export default {
onLaunch: function(options) {
console.log('App Launch');

this.handleToStartPage(options);
},
onShow: function() {
console.log('App Show');
},
onHide: function() {
console.log('App Hide');
},
methods: {
// 跳转启动页
handleToStartPage(options) {
// 如果本地缓存有令牌就不跳转
if (uni.getStorageSync('token')) return;

// 跳转前先缓存下启动数据
uni.setStorageSync('start_data', options);
// options = {
// path: "pages/index/index"
// query: {}
// referrerInfo: {}
// scene: 1001
// shareTicket: undefined,
// };

// 跳转
return uni.reLaunch({
url: '/pages/index/start',
});
},
},
}
</script>

pages\index\start.vue

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<template>
<view class="container">
<view class="action">
<button type="default" open-type="getUserInfo" plain @getuserinfo="handleGetUserInfo">
<view class="icon">
<image src="https://i.loli.net/2021/01/23/yf3ZFkCsQLMulcE.png" mode="heightFix"></image>
</view>
<view class="name">微信登陆</view>
</button>

<view class="other" @click="handleTo">去逛逛</view>
</view>
</view>
</template>

<script>
export default {
onShow () {
// 隐藏返回首页按钮
uni.hideHomeButton();
},
methods: {
// 授权用户信息回调处理
handleGetUserInfo({
detail
}) {
if (!detail.hasOwnProperty('encryptedData')) {
return uni.showToast({
title: '拒绝授权',
icon: 'none',
});
}

uni.setStorageSync('username', detail.userInfo.nickName);

// 调用接口上传数据

// const self = this;
// uni.request({
// url: 'login',
// success: function() {
// self.handleTo();
// },
// });

this.handleTo();
},
// 离开跳转处理
handleTo () {
// 获取进入启动页之前传递的数据
const data = uni.getStorageSync('start_data') || {};

uni.removeStorageSync('start_data');

// if(!uni.getStorageSync('username').length) {
// this.$store.commit('set_has_login', false);
// }

// 不存在跳转指定路径就默认跳首页
if (!data.hasOwnProperty('path') || !data.path) {
return uni.switchTab({
url: '/pages/index/index',
});
}

const tabbar = [
'pages/index/index',
'pages/personal/index'
];

// 跳转是 tabbar 页则不能传递参数
if (tabbar.includes(data.path)) {
return uni.reLaunch({
url: '/' + data.path,
});
}

return uni.reLaunch({
url: '/' + data.path + '?' + this.handleEncodeSearchParams(data.query),
});
},
// 参数拼接
// https://www.cnblogs.com/kbinblog/p/11557741.html
handleEncodeSearchParams (obj) {
const params = [];
Object.keys(obj).forEach((key) => {
let value = obj[key];
// 如果值为undefined置空
if (typeof value === 'undefined') {
value = '';
}
//使用encodeURIComponent进行编码
if (Array.isArray(obj[key])) { //类型为数组的时候
value.forEach(item => {
params.push([key, encodeURIComponent(item)].join('='));
});
}
if (Object.prototype.toString.call(obj[key]) === '[object Object]') { //类型为对象的时候
Object.keys(obj[key]).forEach(item => {
params.push([key, encodeURIComponent(obj[key][item])].join('='));
})
} else {
params.push([key, encodeURIComponent(value)].join('='));
}
});
return params.join('&');
},
},
}
</script>

<style lang="scss" scoped>
.container {
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex-direction: column;
width: 100vw;
height: 100vh;
padding-bottom: calc(64px);
padding-bottom: calc(64px + constant(safe-area-inset-bottom));
padding-bottom: calc(64px + env(safe-area-inset-bottom));
box-sizing: border-box;
background-size: cover;
background-image: url('https://i.loli.net/2021/01/23/oRxZiP9d6ebwVar.png');
}

.action {
width: 100%;

>.other {
color: #fff;
font-size: 14px;
font-weight: 500;
margin-top: 12px;
text-align: center;
}
}

button {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 47px;
line-height: 47px;
border: none;
border-radius: 24px;
background-color: #fff !important;

>.icon {
display: flex;
align-items: center;
margin-right: 12px;
font-size: 0;

image {
height: 20px;
}
}

>.name {
color: #38674D;
font-size: 14px;
font-weight: 500;
}
}
</style>

效果

效果可能不太好,不过也在客户可以接受的范围。如果存在系统的 tabbar (非自定义) 则需要自己来写,不然显示第一页的内容频率更高。

评论

往上