引导页的路由配置

首先，我们在index目录里创建三个文件，并在page.json配置好路由：

index/launch：首页，存放用于判断引导页是否展示逻辑
index/guide：引导页
index/index：业务首页

page.json：

 {
     "pages": [ //pages数组中第一项表示应用启动页
         {
             "path": "pages/index/launch",
             "style": {
                 "titleNView": false //去掉顶部标题栏
             }
         },
         {
             "path": "pages/index/guide",
             "style": {
                 "navigationBarTitleText": "引导面",
                 "titleNView": false,
                 "app-plus": {
                     "bounce": "none" //禁止页面下拉显示空白，关闭回弹属性
                 }
             }
         },
         {
             "path": "pages/index/index",
             "style": {
                 "navigationBarTitleText": "首页",
                 "navigationStyle": "custom"
             }
         }
     ],
     "tabBar": {
         "color": "#46484b",
         "selectedColor": "#0081ff",
         "borderStyle": "black",
         "backgroundColor": "#F8F8F8",
         "list": [{
                 "pagePath": "pages/index/index",
                 "text": "首页"
             }
 
         ]
     },
     "globalStyle": {
         "navigationBarTextStyle": "black",
         "navigationBarTitleText": "uni-app123",
         "navigationBarBackgroundColor": "#F8F8F8",
         "backgroundColor": "#55aa7f"
     },
     "uniIdRouter": {}
 }

首页判断逻辑

首先，引导页一般是安装App后，进入应用的首页前，从缓存中获取是否已读的标识，如有直接进首页，没有就进引导页。这个逻辑我们放在launch.vue中的onload()生命周期函数中来判断。

launch.vue：

 onLoad(options) {       
     // 从本地缓存中同步获取指定 key 对应的内容，用于判断是否是第一次打开应用
     const flag = uni.getStorageSync('runFlag');
     if (flag) {
         // 如有直接进首页
         uni.switchTab({
             url:'../index/index'
         });
     } else {
         // 值不存在，跳到引导页，并存储标识易读状态，下次进入应用就不再展示引导页
         uni.setStorage({
             key: 'runFlag',
             data: true
         });
         uni.redirectTo({
             url:'../index/guide'
         });
     }                 
 },

引导页的设计

动画.gif 引导页内容使用swiper组件来实现一个三屏图片滑动的效果。定义guideImglList数组来存放图片，使用uni.getSystemInfo方法，来获取屏幕高度windowHeight，使得swiper图片自适应高度，点击图片时，使用goIndex()方法跳转到首页。

 <template>
     <view style="width:100%;">
         <swiper :style="{height:windowHeight+'px'}" :indicator-dots="true" :autoplay="true" :interval="3000"
             :duration="1000" @click="goIndex">
             <swiper-item v-for="(item,index) in guideImglList" :key="index">
                 <image class="img" :src="item"></image>
             </swiper-item>
         </swiper>
     </view>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 // 轮播图片的地址
                 guideImglList: [
                     "/static/images/1.jpg",
                     "/static/images/2.jpg",
                     "/static/images/3.jpg"
                 ],
                 // 设备高度
                 windowHeight: 0
             }
         },
         onLoad() {
             // 使用uni.getSystemInfo方法，来获取屏幕高度windowHeight
             uni.getSystemInfo({
                 success: res => {
                     this.windowHeight = res.windowHeight; //窗口高度
                 }
             });
         },
         methods: {
             goIndex() {
                 uni.switchTab({
                     url: '../index/index'
                 })
             }
         }
     }
 </script>
 
 <style>
     .img {
         height: 100%;
         width: 100%;
     }
 </style>

首页清空Flag

 <template>
     <view class="content">
         首页
         <button type="primary" @click="clearFunFlag()" style="margin-top: 120px;">清除runFlag</button>
     </view>
 </template>
 <script>
     export default {
         methods: {
             clearFunFlag() {
                 uni.setStorage({
                     key: 'runFlag',
                     data: false,
                     success: () => {
                         uni.reLaunch({
                             url: '/'
                         })
                     }
                 })
             }
         }
     }
 </script>
 
 <style>
     .content {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
     }
 </style>

以上就是制作uni-app引导页的简单教程，你学废了吗！？

客官，点赞，再走！

学会uni-app引导页制作，这一篇就够了

引导页的路由配置

首页判断逻辑

引导页的设计

首页清空Flag