出發點

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

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

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

代碼實現

1. 制作一張gif動圖或者靜態提示圖片也行
   

   

2. wxml布局如下

<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代碼如下

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

結果

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

組件源碼在minicode-debug項目的/add-tip目錄下，可直接拿去復用或者參照修改。