uniapp 小程序自定义启动页

### 实现 UniApp 小程序自定义启动页 #### 创建启动页逻辑 为了创建一个有效的自定义启动页，可以按照如下方式构建： 在 `App.vue` 文件中设置全局监听应用生命周期事件来处理启动页显示逻辑。当应用程序首次加载时展示启动页，并延迟一定时间后自动关闭并进入首页。 ```javascript export default { onLaunch(options) { // 获取小程序启动参数 console.log('App Launch', options); // 显示启动页 this.showSplashScreen(); }, methods: { showSplashScreen() { setTimeout(() => { // 关闭启动页动画效果结束后跳转至主页或其他指定页面 uni.reLaunch({ url: '/pages/home/home' }); }, 2000); // 延迟两秒模拟启动画面停留时间 } } } ``` #### 设计启动页界面布局 创建一个新的 Vue 组件作为启动页模板文件 (`splash-screen.vue`) ，设计简洁美观的视觉样式以吸引用户的注意力。 ```html <template> <view class="splash-container"> <!-- 启动图片 --> <image src="/static/images/splash.png"></image> <!-- 版权声明或品牌标志等其他元素可选添加 --> </view> </template> <style scoped lang="scss"> .splash-container { width: 100vw; height: 100vh; background-color: white; display: flex; justify-content: center; align-items: center; } /* 图片居中 */ .splash-container image { max-width: 80%; max-height: 60%; } </style> ``` #### 配置路由规则 确保项目配置中的 pages.json 正确设置了入口路径指向启动页组件。 ```json { "pages": [ { "path": "components/splash-screen", "style": {} }, ... ], "globalStyle": {}, "tabBar": {} } ``` #### 处理冷热启动场景差异 对于不同类型的启动情况（如从后台恢复），可能需要调整启动流程。利用 `onShow()` 生命周期钩子判断当前是否处于前台状态从而决定是否重新渲染启动页[^2]。 ```javascript import { ref, watchEffect } from 'vue'; import { onShow } from '@dcloudio/uni-app'; let isFirstStart = true; export default { setup() { const appState = ref(); onShow((options) => { if (isFirstStart && !appState.value?.isActive) { // 只有第一次打开才显示启动页 isFirstStart = false; // 调用前面提到的方法显示启动页 this.showSplashScreen(); } // 更新活动状态标记 appState.value.isActive = true; // 当应用退到后台一段时间后再回到前台时不触发启动页再次出现 watchEffect(() => { if (!appState.value?.isActive) { isFirstStart = true; } }); return () => {}; }); } }; ```