uniapp启动图和引导页的处理逻辑

pages.js
pages节点的第一项为应用入口页（即首页，这里作为启动页来使用），
可以在home.vue放如一张gif动图，动图时间位2秒，设置定时器在2.5秒后跳转。

如图所示，添加两个vue页面作为启动页，和引导页

home页面(启动页)，这里只记录页面逻辑，样式代码请自行设置

onLoad() {//APP端//#ifdef APP-PLUSif (uni.getStorageSync('first_falg')) { // first_falg用来判断是否是第一次启动APP。this.goBack();} else { // 是第一次进入APP，跳转到引导页setTimeout(function() {uni.navigateTo({url: '/pages/home/home2',animationType: 'pop-in',animationDuration: 300});}, 3000)}//#endif// H5端//#ifdef H5if (uni.getStorageSync('token')) { // 有token，直接进入首页uni.switchTab({url: '/pages/index/index',animationType: 'pop-in',animationDuration: 300});} else {uni.navigateTo({ // 没有token去登录url: '/pages/login/login',animationType: 'pop-in',animationDuration: 300});}//#endif
},
methods: {goBack(name) {if (uni.getStorageSync('access_token')) {//有tokensetTimeout(function() {uni.switchTab({url: '/pages/index/index',animationType: 'pop-in',animationDuration: 300});}, 2500)} else {setTimeout(function() {//去登录uni.reLaunch({url: '/pages/login/login',animationType: 'pop-in',animationDuration: 300});}, 2500)}},
},

home2引导页，只记录页面逻辑部分

//轮播图滑动到最后一张，当点击开始使用
goBack(name) {if (uni.getStorageSync('token')) { // 有token进首页uni.switchTab({url: '/pages/index/index',animationType: 'pop-in',animationDuration: 300});} else {uni.reLaunch({ // 没有token进登录，这里页需要uni.reLaunch跳转，防止安卓物理返回时重新进入到引导页url: '/pages/login/login',animationType: 'pop-in',animationDuration: 300});}
},

登录页面和首页,需要把first_falg存起来，下次不用再进入引导页

uni.setStorageSync('first_falg', true);//是否第一次进入APP，true不是，跳过引导页

uniapp启动图和引导页的处理逻辑相关推荐

【Android】如何实现启动APP时引导页、欢迎页功能设置之（二）设置只在第一次启动APP时跳入引导界面
这会先看效果图: (二)设置欢迎页并判断是否程序实第一次开启,来判断是否加载引导页. 实现关键功能: 1.欢迎页面的定时设置 2.判断程序是否是第一次启动,如果是则跳入引导页,否则跳入主界面 3.记 ...
uniapp 电子印章_第二章《uni-app记账小程序引导页+登录+注册篇》
前言: uni-app的框架结构本质上和vue有很多相似的地方,只不过为了实现多端跨平台做了部分转换处理.所以只要你会写基本的css 和vue 基本没什么问题. 这次介绍的是uni-app 的< ...
uniapp 引导页启动页闪屏页功能介绍及部分功能实现
启动页设置 uniapp自带的启动页是一个白底的页面,上面有个uni的logo,然后周围有个圆圈的进度条,这个是启动页. uniapp中可以自定义启动页,注意两点: 不要勾选"启动界面显示等 ...
【Android 小功能】启动 App 时实现启动页、引导页功能，并且只在第一次启动 App 时跳入引导页面
[Android]如何实现启动APP时引导页.欢迎页功能之(一)引导页功能的实现 [Android]如何实现启动APP时引导页.欢迎页功能设置之(二)设置只在第一次启动APP时跳入引导界面
mui 启动页和引导页
一.启动页和引导页的概念 "启动页"(splash):app的启动界面,每次启动都会看到的(每次打开QQ都会看到一只企鹅). "引导页"(guide):guid ...
UI设计素材|APP引导页简约风格特征
简约的APP引导页,需要对内容进行合理的把控,运用最清晰的设计元素,仅用APP产品内容本身来做设计布局,为内容留出畅快呼吸的空间,引导和协助用户的视觉动线,有序的区分引导页传递的信息与操作,用最直接的 ...
swift有一句代码搞定APP引导页（图片/GIF/视频）
APP启动引导页(图片/gif/视频) 在APP启动时候设置引导页,不管图片,gif,还是视频只需要一个方法视频引导页视频核心代码如下 URL为本地视频地址,如果为网络视频建议预下载在本地然后下 ...
uni-app 启动页，引导页，广告页
1 勾选自定义启动图这个需要打包才能生效 2 引导页,广告页 1 plus.navigator.closeSplashscreen();//为关闭启动页,需要设置启动页为不自动关闭 2 请求接口后再 ...
uniapp开发App引导页
App的引导页是当用户第一次打开一款App时所展示的3-5精美的图片,用于告知用户产品的功能及特点.好的引导页会促使用户对产品增加更多的兴趣,当然这是UI设计的能力体现了,尽管很多人都会快速的滑过.对 ...

uniapp启动图和引导页的处理逻辑

uniapp启动图和引导页的处理逻辑相关推荐

最新文章

热门文章