> 使用插件 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  ### 廣告類引導頁 > 含倒計時，倒計時結束后，自動會進行頁面切換，可根據以上的例子，自行進行修改