第一步:建3个页面文件。在pages目录下,新建index/init.vue、index/guide.vue、index/home.vue。
1.对应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": {
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "black"
}
}]
}
注意排放顺序,init一定要第一个,作为入口页面。
2.init.vue
onLoad() {
// 从本地缓存中同步获取指定 key 对应的内容,用于判断是否是第一次打开应用
const value = uni.getStorageSync('launchFlag');
if (value) {
// 如何已经有,直接去home首页
uni.navigateTo({
url: '/pages/index/home'
});
} else {
// 没有值,跳到引导页,并存储,下次打开就不会进去引导页
uni.setStorage({
key: 'launchFlag',
data: true
});
uni.navigateTo({
url: '/pages/index/guide'
});
}
}
注意:
注意 switchTab 只能跳转到带有 tab 的页面,不能跳转到不带 tab 的页面跳转不带 tab 的页面是用 redirectTo 或者 navigateTo 我这里是因为跳转的不带 tab 的页面,但用的是 switchTab ,所以跳转报错
之前的代码:
wx.switchTab({
url: `/${path}`
})
现在更改完的代码:
wx.navigateTo({
url: `/${path}`
})
3.guide.vue页面就可以写引导页的内容了。
<template>
<view id="guide">
<swiper
class="swiper"
circular
:indicator-dots="true"
:current="tabIndex"
@change="changeTab">
<swiper-item
class="item"
v-for="(item, index) in guidelList" :key="index">
<image :src="item.src" mode="aspectFill"></image>
</swiper-item>
</swiper>
</view>
</template>
pages.json里面引导页去掉头部标题栏,同时设置样式使swiper全屏。
"titleNView": false,