出發點

開發了一個(gè)小程序，經過一段時間的觀察，發現訪問(wèn)人數和(hé)添加到我的小程序的數據差異比較大，我想可(kě)能存在2種可(kě)能：

1. 用戶不清楚有添加到我的小程序功能
2. 本身産品做的不夠好，不願意添加

那為了驗證可(kě)能性，我就做了這個(gè)引導添加的提示組件，組件開發非常簡單，這裡分享給大家。

代碼實現

1. 制作一張gif動(dòng)圖或者靜态提示圖片也行
   

   

2. wxml布局如(rú)下(xià)

<view wx:if="{{showTip}}" class="tip-wraper">
  <image class="tip-gif" 
  mode="widthFix" 
  src="./images/add_tip.gif"></image>
  
  <image bindtap="closeTip"
  class="tip-close" 
  src='./images/close.png'></image>
</view>

3. js代碼如(rú)下(xià)

methods: {
    // 初始化關(guān)注提示
    initTip() {
        let showTip = wx.getStorageSync('showTip')
        this.setData({
            showTip: typeof showTip=='boolean'?showTip:true
        })
    },
    // 關(guān)閉提示
    closeTip() {
        wx.setStorageSync('showTip', false)
        this.setData({
            showTip: false
        })
    }
},
lifetimes:{
    attached:function(){
        this.initTip()
    }
}

結果

上線2天後，發現添加人數相比之前是倍數增長，這也就驗證了産品本身其實沒有什麼大問(wèn)題，大多數用戶是不知道這個(gè)功能，或者說用戶的行為需要我們去小小的引導一下(xià)，就能産生意想不到的收獲。

組件源碼在minicode-debug項目的/add-tip目錄下(xià)，可(kě)直接拿去複用或者參照修改。