uniapp iOS 启动页到登录页的实现

在使用 uniapp 进行移动端开发时，尤其在 iOS 平台上，下载完成后首次打开 APP，很多开发者可能会遇到启动页到登录页期间出现白色高度闪烁的问题。接下来，我们将一起分析和解决这个问题。

流程概述

我们将这个问题的解决流程分为以下步骤：

步骤 描述 具体实现
1 准备启动页和登录页 创建 launch.vue 和 login.vue
2 路由设置 配置路由文件
3 添加白色背景 在启动页中添加白色背景
4 状态管理 使用 Vuex 或简单的状态管理
5 优化显示效果 控制启动页的显示时间

具体步骤与代码

步骤 1: 准备启动页和登录页

首先，我们需要创建两个简单的页面：

  1. launch.vue (启动页)
  2. login.vue (登录页)
launch.vue 示例代码
<template>
  <view class="launch">
    <text>欢迎使用我们的App</text>
  </view>
</template>

<script>
export default {
  mounted() {
    // 利用 setTimeout 模拟启动页面持续3秒后跳转到登录页
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    }, 3000); // 3000毫秒后跳转
  }
}
</script>

<style>
.launch {
  height: 100vh; /* 全屏高度 */
  background-color: white; /* 白色背景 */
  display: flex;
  justify-content: center; /* 居中 */
  align-items: center; /* 居中 */
}
</style>
  • setTimeout 用于设置启动页的显示时间，3秒后自动跳转到登录页。
  • 样式部分简单设置为全屏和白色背景。
login.vue 示例代码
<template>
  <view class="login">
    <text>登录页面</text>
  </view>
</template>

<script>
export default {
  // 登录逻辑在这里
}
</script>

<style>
.login {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

步骤 2: 路由设置

接下来，我们需要在 pages.json 中配置这两个页面的路由。

{
  "pages": [
    {
      "path": "pages/launch/launch",
      "name": "launch",
      "style": {
        "navigationBarTitleText": "启动页"
      }
    },
    {
      "path": "pages/login/login",
      "name": "login",
      "style": {
        "navigationBarTitleText": "登录页"
      }
    }
  ]
}

步骤 3: 添加白色背景

我们在 launch.vue 的样式中已经添加了白色背景，确保在启动期间不会看到任何其他颜色。

步骤 4: 状态管理

为了管理用户登录状态，可以使用 Vuex 或者简单的状态管理。下面是使用 Vuex 的基本示例。

store.js 示例代码
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isLoggedIn: false // 用户是否登录的状态
  },
  mutations: {
    setLogin(state, status) {
      state.isLoggedIn = status;
    }
  },
  actions: {
    login({ commit }) {
      commit('setLogin', true);
    }
  }
});

步骤 5: 优化显示效果

要优化启动页的显示效果，可以在进入登录页时，使用动画过渡效果来改善用户体验。

login.vue 更新后的代码
<template>
  <view @click="login" class="login">
    <text>点击登录</text>
  </view>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['login']),
    login() {
      this.login(); // 调用 Vuex 登录方法
      // 跳转到主页面或其他页面
    }
  }
}
</script>

<style>
.login {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

序列图

在这一过程中，页面之间的转换可以用以下序列图表示：

sequenceDiagram
    participant User
    participant LaunchPage
    participant LoginPage

    User ->> LaunchPage: 打开App
    LaunchPage ->> User: 显示启动页
    LaunchPage ->> LoginPage: 经过3秒后跳转
    LoginPage ->> User: 显示登录页

结尾

通过以上步骤，我们实现了在 iOS 上，用户首次打开 APP 时，从启动页到登录页的平滑过渡，并避免了底部白色高度闪烁的问题。希望这篇文章能帮助你理解这个过程并在实际项目中应用，永远保持学习的热情！若有其它问题，欢迎随时交流。