微信小程序——首次使用顯示“添加到我的小程序”

話不多說，先上代碼

.wxml

<cover-view class = "guideBackground" wx:if = "{{isTiptrue}}">  	       
  <cover-view class = "guideInfo">    
    <cover-view class = "guideText"> 點擊右上角 </cover-view>    
    <cover-view class = "curcleL"></cover-view>    
    <cover-view class = "curcleM"></cover-view>    
    <cover-view class = "curcleL"></cover-view>    
    <cover-view class = "guideText"> 添加到我的小程序 </cover-view>
  </cover-view>
  
  <cover-view class = "guideClose" bindtap = "closeGuide">    
    <cover-view class = "closeText"> × </cover-view>  
  </cover-view>
</cover-view>

.wxss

.guideBackground {  
  width: 80%;  
  height: 70rpx;  
  z-index: 99999;  
  position: fixed;  
  top: 0;  
  border-radius:35rpx;  
  margin-top: 20rpx;  
  margin-left: 10%;  
  margin-right: 10%;  
  background-color: rgba(22, 23, 24, 0.5);  
  display: flex;  
  flex-direction: row;  
  justify-content: center;  
  align-items: center;
}

.guideInfo {  
  width: 90%;  
  height: 100%;  
  display: flex;  
  flex-direction: row;  
  justify-content: center;  
  align-items: center;
}
.guideClose {  
  width: 10%;  
  height: 100%;  
  display: flex;  
  flex-direction: row;  
  justify-content: center;  
  align-items: center;
}
.closeText {  
  font-size: 100%;  
  color: white;  
  display: flex;  
  flex-direction: row;  
  justify-content: center;  
  align-items: center;  
  width: 100%;
}
.guideText {  
  font-size: 80%;  
  color: white;  
  display: flex;  
  flex-direction: row;  
  justify-content: center;  
  align-items: center;  
  margin-left: 20rpx; 
  margin-right: 20rpx;
}
.curcleL {  
  height: 8rpx;  
  width: 8rpx;  
  border-radius: 4rpx;  
  background-color:white;
}
.curcleM {  
  height: 12rpx;  
  width: 12rpx;  
  margin-left: 8rpx;  
  margin-right: 8rpx;  
  border-radius: 6rpx;  
  background-color:white;
}

.js：將以下程序分別對應地添加到你的首頁代碼中

Page({
  data: {    
    // data中添加變量
    isTiptrue: true
  },

  onLoad: function () {
  // onLoad中添加以下代碼
  let firstOpen = wx.getStorageSync("loadOpen")    
  if (firstOpen == undefined || firstOpen == '') { // 根據緩存週期決定是否顯示新手引導      
    this.setData({ isTiptrue: true })    
  } 
  else {      
    this.setData({ isTiptrue: false })    
  },

  // Page中添加關閉引導
  closeGuide: function (e) {    
    wx.setStorage({      
      key: 'loadOpen',      
      data: 'OpenTwo'    
    })    
    this.setData({ isTiptrue: false }) 
  },
  
})

效果預覽

.
.
.
.
.
.
.
.
.
.
.
…
.
.
.