> 使用插件 https://ext.dcloud.net.cn/plugin?id=192，其实就是一个例子，导入到项目中后，拷贝需要的资源  ## pages.json > 将guide.vue设置为第1个启动的页面 ~~~ { "pages": [ { "path": "pages/index/guide", "style": { "navigationBarTitleText": "引导页", "app-plus": { "titleNView": false } } }, { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/index/list-news", "style": { "navigationBarTitleText": "新闻" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#FFFFFF", "list": [ { "text": "首页", "pagePath": "pages/index/index", "iconPath": "static/1.png", "selectedIconPath": "static/1_active.png" }, { "text": "新闻", "pagePath": "pages/index/list-news", "iconPath": "static/2.png", "selectedIconPath": "static/2_active.png" } ] } } ~~~ ## guide.vue > 该页会判断是否已经展示过引导页，如果展示了则直接切换到 首页 ~~~ <template> <view view class="main"> <code-elf-guide v-if="guidePages"></code-elf-guide> </view> </template> <script> import codeElfGuide from '@/components/code-elf-guide/code-elf-guide.vue' export default { components:{ codeElfGuide }, data() { return { guidePages:false, } }, onLoad() { this.loadExecution() }, methods: { loadExecution: function(){ /** * 获取本地存储中launchFlag的值 * 若存在，说明不是首次启动，直接进入首页； * 若不存在，说明是首次启动，进入引导页； */ try { // 获取本地存储中launchFlag标识 const value = uni.getStorageSync('launchFlag'); if (value) { console.log(111) // launchFlag=true直接跳转到首页 uni.switchTab({ url: '/pages/index/index' }); } else { console.log(222) // launchFlag!=true显示引导页 this.guidePages = true } } catch(e) { console.log(333) // error uni.setStorage({ key: 'launchFlag', data: true, success: function () { console.log('error时存储launchFlag'); } }); this.guidePages = true } } } } </script> <style> page,.main{ width: 100%; height: 100%; } </style> ~~~ ## index.vue > 首页 提供了 “清除缓存，重新启动引导页” 功能，供测试用途 ~~~ <template> <view> <button type="default" @tap="clear">清除缓存，重新启动引导页</button> </view> </template> <script> export default { data() { return { } }, methods: { clear: function(){ 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('用户点击取消'); } } }); } } } </script> ~~~ ## 其他类型 ### 视频引导页 > 有些引导页会做成视频展示方式，可参考: https://segmentfault.com/a/1190000021118361  ### 广告类引导页 > 含倒计时，倒计时结束后，自动会进行页面切换，可根据以上的例子，自行进行修改