出发点

开发了一个小程序，经过一段时间的观察，发现访问人数和添加到我的小程序的数据差异比较大，我想可能存在2种可能：

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

那为了验证可能性，我就做了这个引导添加的提示组件，组件开发非常简单，这里分享给大家。

代码实现

制作一张gif动图或者静态提示图片也行  
![](https://image.wxopen.club/content_a0313d5c-81be-11eb-bc43-001a7dda7111.gif)

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目录下，可直接拿去复用或者参照修改。