Uni-App 简单引导页⽰例

第⼀步：建3个页⾯⽂件。在pages⽬录下，新建index/init.vue、index/guide.vue、index/home.vue。 对应pages.json：
pages": [{
“path”: “pages/index/init”,
“style”: {
“navigationBarTitleText”: “⼊⼝页”
}
}, {
“path”: “pages/index/guide”,
“style”: {
“navigationBarTitleText”: “引导页”,
“titleNView”: false,
“app-plus”: {
“bounce”: “none”
}
}
}, {
“path”: “pages/index/home”,
“style”: {
注意排放顺序，init⼀定要第⼀个，作为⼊⼝页⾯。
init.vue
onLoad() {
// 从本地缓存中同步获取指定 key 对应的内容，⽤于判断是否是第⼀次打开应⽤
const value = uni.getStorageSync(‘launchFlag’);
if (value) {
// 如何已经有，直接去home⾸页
uni.switchTab({
url: ‘/pages/index/home’
});
} else {
// 没有值，跳到引导页，并存储，下次打开就不会进去引导页
uni.setStorage({
key: ‘launchFlag’,
data: true
});
uni.redirectTo({
url: ‘/pages/index/guide’
});
}
}
然后我们guide.vue页⾯就可以写引导页的内容了。


<swiper
class=“swiper”
circular
:indicator-dots=“true”
:current=“tabIndex”
@change=“changeTab”>






记得pages.json⾥⾯引导页去掉头部标题栏，同时设置样式使swiper全屏。
“titleNView”: false,