111 lines
3.0 KiB
Markdown
111 lines
3.0 KiB
Markdown
|
# 引导页
|
|||
|
|
|
|||
|
|
### 基于uni-app框架的swiper组件打开的时候启动。
|
|||
|
|
|
|||
|
|
> 首次启动展示引导页，之后启动不再展示。那么就意味着，我们需要一个标识来确定，App是否已经启动过。
|
|||
|
|
|
|||
|
|
> 我们可以在本地存储一个key来做为已经启动过App的标识。那么，我们在入口这里，就可以读取这个key，来决定是否展示引导页。
|
|||
|
|
|
|||
|
|
> 因工作繁忙目前该程序金对安卓做了适配，IOS可根据环境自己适配。谢谢
|
|||
|
|
|
|||
|
|
## 目录结构
|
|||
|
|
* /pages/index/index.vue //入口页
|
|||
|
|
### 存储key
|
|||
|
|
* 向本地存储中设置launchFlag的值，即启动标识；
|
|||
|
|
### 获取key
|
|||
|
|
* 向本地存储中设置launchFlag的值，即启动标识；
|
|||
|
|
* 获取本地存储中launchFlag的值
|
|||
|
|
* 若存在，说明不是首次启动，直接进入首页；
|
|||
|
|
* 若不存在，说明是首次启动，进入引导页；
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<view class="main">
|
|||
|
|
<code-elf-guide v-if="guidePages"></code-elf-guide>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import codeElfGuide from '@/components/code-elf-guide/code-elf-guide.vue'
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
codeElfGuide
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
guidePages:true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(){
|
|||
|
|
this.loadExecution()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
loadExecution: function(){
|
|||
|
|
/**
|
|||
|
|
* 获取本地存储中launchFlag的值
|
|||
|
|
* 若存在，说明不是首次启动，直接进入首页；
|
|||
|
|
* 若不存在，说明是首次启动，进入引导页；
|
|||
|
|
*/
|
|||
|
|
try {
|
|||
|
|
// 获取本地存储中launchFlag标识
|
|||
|
|
const value = uni.getStorageSync('launchFlag');
|
|||
|
|
if (value) {
|
|||
|
|
// launchFlag=true直接跳转到首页
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: '/pages/tabBar/component/component'
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// launchFlag!=true显示引导页
|
|||
|
|
this.guidePages = true
|
|||
|
|
}
|
|||
|
|
} catch(e) {
|
|||
|
|
// error
|
|||
|
|
uni.setStorage({
|
|||
|
|
key: 'launchFlag',
|
|||
|
|
data: true,
|
|||
|
|
success: function () {
|
|||
|
|
console.log('error时存储launchFlag');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.guidePages = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
```css
|
|||
|
|
page,.main{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 首页清除key，进行测试
|
|||
|
|
* 清除本地存储中设置launchFlag的值，即启动标识；
|
|||
|
|
* 两秒后重启APP，进行测试
|
|||
|
|
```javascript
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '清除launchFlag值',
|
|||
|
|
content: '确定要清除launchFlag值，进行重启测试？',
|
|||
|
|
success: function (res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
console.log('用户点击确定');
|
|||
|
|
// 清除缓存
|
|||
|
|
uni.clearStorage();
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
duration:3000,
|
|||
|
|
title: '清除成功2秒后重启'
|
|||
|
|
});
|
|||
|
|
// 两秒后重启
|
|||
|
|
setTimeout(function() {
|
|||
|
|
uni.hideToast();
|
|||
|
|
plus.runtime.restart();
|
|||
|
|
}, 2000);
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
```
|