首先，我們分兩步走
1. 引導頁實現
2. 如何后續不再進入引導頁
引導頁實現
第一步app.json 添加一個新頁面（也就是引導頁面）
1 { 2 "pages":[ 3 "pages/index/guide", 4 "pages/welcome/welcome"
5
6 ], 7 "window":{ 8 "backgroundTextStyle":"light", 9 "navigationBarBackgroundColor": "#b3d4db", 10 "navigationBarTitleText": "歡迎", 11 "navigationBarTextStyle":"black"
12 } 13 }
第二步利用swiper實現普通單引導頁面（配合ui添加一些文字介紹）
guide.js
1 Page({ 2 data: { 3 imgs: [ 4 "http://img.kaiyanapp.com/5edbf92b929f9174e3b69500df52ee21.jpeg?imageMogr2/quality/60", 5 "http://img.kaiyanapp.com/f2c497cb520d8360ef2980ecd0efdee7.jpeg?imageMogr2/quality/60", 6 "http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60", 7 ], 8
9 img: "http://img.kaiyanapp.com/7ff70fb62f596267ea863e1acb4fa484.jpeg", 10 }, 11
12 start() { 13 wx.navigateTo({ 14 url: '../welcome/welcome'
15 }) 16 }, 17
18
19 })
guide.wxml
1 <swiper indicator-dots="true">
2 <block wx:for="{{imgs}}" wx:for-index="index">
3 <swiper-item class="swiper-items">
4 <image class="swiper-image" src="{{item}}"></image>
5 <button class="button-img" bindtap="start" wx:if="{{index == imgs.length - 1}}">立即體驗</button>
6 </swiper-item>
7 </block>
8 </swiper>
guide.wxss
1 swiper { 2 /*這個是絕對布局*/ 3 position: absolute; 4 height: 100%; 5 width: 100%; 6 } 7
8 .swiper-image { 9 height: 100%; 10 width: 100%; 11 /*透明度*/ 12 opacity: 0.9; 13 } 14
15 .button-img { 16 /*這個是絕對布局*/ 17 position: relative; 18 bottom: 90px; 19 height: 40px; 20 width: 120px; 21 opacity: 0.6; 22 }
第三步，判斷是否第一次進入？ 如果復雜些，那就是要后台傳值過來，簡單的話就是本地緩存一個有用戶信息的key
在app.js 里面的onLaunch里面的判斷
1.設置緩存
2.讀取緩存 - > 是否存在 - > 是 -> 進入welcome
讀取緩存- > 是否存在 - > 否 -> 進入引導頁
打包的文件點擊：小程序 -引導頁 ， 即可下載
好了，只要不clear這個小程序的緩存，那么它就不會進入第一次的引導頁！