引导添加到我的小程序组件开发

Veröffentlicht am | in

出发点

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

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

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

代码实现

  1. 制作一张gif动图或者静态提示图片也行

  2. wxml布局如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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代码如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    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目录下，可直接拿去复用或者参照修改。