根據(jù)不同的需求，現(xiàn)在出現(xiàn)了給小程序添加新用戶引導(dǎo)頁面。

設(shè)計(jì)流程：指引用戶點(diǎn)擊右上角，將本小程序添加到我的小程序。點(diǎn)擊“去試試”后不再顯示。前提是新用戶或者首次打開。

設(shè)計(jì)圖：

實(shí)現(xiàn)步驟：

1》思路：在小程序首頁生命周期函數(shù)中，加入條件判斷。在用戶點(diǎn)擊【記住了，我去試試】事件上增加緩存信息。
2》用這個(gè)緩存在用戶每次打開小程序的時(shí)候來判斷是否顯示
頁面的代碼：

<view class='page-cont'>
  <view class='top'>
    <image src='http://www.wxapp-union.com/{{cdnPath}}img/firstOpen/topjiantou.png'></image>
    <view class='p_one'>添加友途車服小程序，解決更多養(yǎng)車問題</view>
  </view>
  <view class='cont'>
    <view class='cont-p'>
      <view class='text'><text>1</text></view><view>點(diǎn)擊右上角</view>
      <image src='http://www.wxapp-union.com/{{cdnPath}}img/firstOpen/[email protected]'></image>
    </view>
    <view class='cont-p'>
      <view class='text'><text>2</text></view><view>點(diǎn)擊“添加我的小程序”</view>
    </view>
    <view class='cont-p'>
      <view class='text'><text>3</text></view><view>回到微信首頁下拉聊天列表，</view>
    </view>
    <view class='cont-p-lib'>
      <view class='text' style='opacity:0;'><text>3</text></view><view>從“我的小程序”里打開“友途車服VIP”</view>
    </view>
    <view class='cont-p-three'>
      <image src='http://www.wxapp-union.com/{{cdnPath}}img/firstOpen/jiantou.png'></image>
      <view class='right' style='background:url({{cdnPath}}img/firstOpen/bg.png) no-repeat center; background-size: 100% 100%;'>
          <view class='left-p'>
            <view class='title'>我的小程序</view>
            <image src='http://www.wxapp-union.com/{{cdnPath}}img/firstOpen/[email protected]'></image>友途車服VIP</view>
          <view class='left-p'>
            <view class='title' style='opacity:0;'>我的小程序</view>
            <view style='color:#4C4C4E;width:27px;height:27px;border-radius:50%;background:#4C4C4E;'></view>小程序</view>
      </view>
    </view>
  </view>
  <view class='bottom' bindtap='closeThis'>記住了  我去試試</view>
</view>

樣式代碼：

.page-cont,.shadow-box{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background-color: rgba(22, 23, 24, 0.5);
}
.page-cont .top{
  width:100%;
  display:flex;
  flex-direction: column;
}
.page-cont .top image{
  width:32px;
  height:41px;
  margin:4% 0 4% 77%;
}
.page-cont .top .p_one{
  float:right;
  width:80%;
  font-size:28rpx;
  line-height:72rpx;
  color:#fff;
  background:#27C084;
  text-align:center;
  border-radius:34rpx;
  margin: 0 0 0 15%;
}
.page-cont .cont{
  width:100%;
  margin-top:30rpx;
  display:flex;
  flex-direction:column;
}
.page-cont .cont .cont-p{
  width:80%;
  margin-left:5%;
  margin-top:30rpx;
  display:flex;
  color:#fff;
  font-size:30rpx;
  line-height:72rpx;
}
.page-cont .cont .cont-p .text{
  color:#fff;
  font-size:30rpx;
  line-height:40rpx;
  width:40rpx;
  height:40rpx;
  text-align:center;
  border-radius:50%;
  background:#27C084;
  margin-right:20rpx;
  margin-top:16rpx;
  display:flex;
  flex-direction:column;
}
.page-cont .cont .cont-p image{
  width:41px;
  height:28px;
  margin:8rpx 0 0 20rpx;
  border:1px dashed #fff;
}
.page-cont .cont .cont-p-lib{
  width:90%;
  margin-left:5%;
  display:flex;
  color:#fff;
  font-size:30rpx;
}
.page-cont .cont .cont-p-lib .text{
  color:#fff;
  font-size:30rpx;
  line-height:40rpx;
  width:40rpx;
  height:40rpx;
  text-align:center;
  border-radius:50%;
  background:#27C084;
  margin-right:20rpx;
  margin-top:16rpx;
  display:flex;
  flex-direction:column;
}
.page-cont .cont .cont-p-three{
  width:80%;
  margin-left:10%;
  margin-top:30rpx;
  display:flex;
  align-items: center;
  color:#fff;
  font-size:30rpx;
  line-height:72rpx;
}
.page-cont .cont .cont-p-three image{
  width:41px;
  height:32px;
  margin-right:20rpx;
}
.cont-p-three .right{
  width:120px;
  height:79px;
  border:1px dashed #fff;
  display:flex;
  text-align:center;
}
.cont-p-three .right{
  font-size:18rpx;
  line-height:46rpx;
  color:#FFF;
}
.cont-p-three .right .left-p{
  display:flex;
  flex-direction: column;
  flex:1;
  text-align:center;
  align-items:center;
}
.cont-p-three .right .left-p image{
  width:27px;
  height:27px;
}
.page-cont .bottom{
  width:60%;
  font-size:30rpx;
  line-height:72rpx;
  text-align:center;
  border-radius:44rpx;
  border:1px solid #fff;
  margin:10% auto 0 auto;
  color:#fff;
}

JS中的主要代碼：

data:{
	isTiptrue: true,
},
onLoad: function (query) {
    let firstOpen = wx.getStorageSync("loadOpen")
    console.log("是否首次打開本頁面==",firstOpen)
    if (firstOpen == undefined || firstOpen == '') { //根據(jù)緩存周期決定是否顯示新手引導(dǎo)
      this.setData({
        isTiptrue: true,
      })
    } else {
      this.setData({
        isTiptrue: false,
      })
    }
 },
closeThis(e){
    wx.setStorage({
      key: 'loadOpen',
      data: 'OpenTwo'
    })
    this.setData({
      isTiptrue:false
    })
  },