小程序

首先，我们分两步走

 

1. 引导页实现

2. 如何后续不再进入引导页

 

 

引导页实现

第一步app.json 添加一个新页面（也就是引导页面）

{
  "pages":[
    "pages/index/guide",
    "pages/welcome/welcome"
    
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#b3d4db",
    "navigationBarTitleText": "欢迎",
    "navigationBarTextStyle":"black"
  }
}

 

第二步利用swiper实现普通单引导页面（配合ui添加一些文字介绍）

 

guide.js

Page({
  data: {
    imgs: [
      "http://img.kaiyanapp.com/5edbf92b929f9174e3b69500df52ee21.jpeg?imageMogr2/quality/60",
      "http://img.kaiyanapp.com/f2c497cb520d8360ef2980ecd0efdee7.jpeg?imageMogr2/quality/60",
      "http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
    ],

    img: "http://img.kaiyanapp.com/7ff70fb62f596267ea863e1acb4fa484.jpeg",
  },

  start() {
    wx.navigateTo({
      url: '../welcome/welcome'
    })
  },


})

guide.wxml

<swiper indicator-dots="true">
  <block wx:for="{{imgs}}" wx:for-index="index">
    <swiper-item class="swiper-items">
      <image class="swiper-image" src="{{item}}"></image>
      <button class="button-img" bindtap="start" wx:if="{{index == imgs.length - 1}}">立即体验</button>
    </swiper-item>
  </block>
</swiper>

guide.wxss

swiper {
  /*这个是绝对布局*/
  position: absolute;
  height: 100%;
   100%;
}

.swiper-image {
  height: 100%;
   100%;
  /*透明度*/
  opacity: 0.9;
}

.button-img {
  /*这个是绝对布局*/
  position: relative;
  bottom: 90px;
  height: 40px;
   120px;
  opacity: 0.6;
}

 

第三步，判断是否第一次进入？ 如果复杂些，那就是要后台传值过来，简单的话就是本地缓存一个有用户信息的key

在app.js 里面的onLaunch里面的判断

1.设置缓存

2.读取缓存 - > 是否存在 - > 是 -> 进入welcome

　读取缓存- > 是否存在 - > 否 -> 进入引导页

打包的文件点击：小程序 -引导页 ， 即可下载

好了，只要不clear这个小程序的缓存，那么它就不会进入第一次的引导页！