微信小程序记录用户行为浏览记录和停留时间以及小程序全局分享

小程序 专栏收录该内容
3 篇文章 0 订阅

微信小程序记录用户行为浏览记录和停留时间以及小程序全局分享

项目需求

1、后台统计一个用户在我们小程序的每个页面的停留时间
2,前台用户可以在个人中心看到自己的分享记录以及多少人查看

需求分析

需求一:想要记录用户在每个页面的停留时间,无非就是记录用户进来的时间和退出页面的时间,获取时间差。
需求二:每个页面在分享的时候做记录(附带用户的唯一标识openid或者其他跟后端对接)我的分享例

相信大家在看到这个需求之后都会有这样的思路,但是如果在每一个页面都这样操作重复代码太多,后期维护也过于麻烦,因此如果可以做一个全局函数,就可以避免这些问题,下面就是我的代码和具体操作,代码有不足欢迎指正优化,如果有更好的方法我们可以互相share学习一下()。

在app.js中
添加一个重写分享的方法(记录用户行为的操作也放在里面了,代码里面有注释),在onLaunch中调用

  //重写分享方法
  overShare: function () {
    var that = this
    //监听路由切换
    //间接实现全局设置分享内容
    wx.onAppRoute(function (res) {
      //获取加载的页面
      let pages = getCurrentPages(),
          //获取当前页面的对象
          view = pages[pages.length - 1],
          data;
          data = view.data;
          data.timeStart = Date.now() //在当前页面的data中,记录进入页面的时间
      if(!data.addonHide) {
        var oldOnHide = view.onHide  // 记录单独在某些页面onhide里做的一些操作,防止全局覆盖原有页面操作
        data.addonHide = true
        view['onHide'] = function(view) {  //全局添加的一些操作
          // 做一些我们自己想做的事情
          let timeEnd = Date.now()  // 记录onhide时候的时间戳(用户离开页面的操作有两种(跳转页面走的是onhide,直接关闭小程序走的是onUnload )下面onUnload 不做解释,同样的操作)
          var stayTime = timeEnd - data.timeStart // 获取停留时间
          var stayArray = wx.getStorageSync('record') || [] // 这里我获取到当前页面的停留时间之后没有直接调用接口上报,而是先存起来(10条后上报,特殊情况除外(不够十条,用户关闭了小程序)),防止多次提交
          stayArray.push({ //具体数据和相关参数跟后端对接
            userId: wx.getStorageSync('tokenAdmin').frontUserId,
            openId: wx.getStorageSync('tokenAdmin').openId,
            type: data.shareType || '',
            sourceId: data.id || '', // 资源id,(对于需要id的详情页)
            page: res.path,
            stay: stayTime,
            timeStart: data.timeStart,
            timeEnd: timeEnd
          })
          wx.setStorageSync('record', stayArray)
          if(wx.getStorageSync('record').length == that.globalData.recordNumber) { // that.globalData.recordNumber即你规定的条数(多少条后上报)
            that.setRecordBatch() // 调用上报的函数(根据自己接口编写,这里不展示)
          }
           // 调用原来的onHide方法
          oldOnHide.call(that, res) 
        }
        var oldOnUnload = view.onUnload 
        view['onUnload'] = function(view) {
          // 做一些我们自己想做的事情
          let timeEnd = Date.now()
          var stayTime = timeEnd - data.timeStart
          var stayArray = wx.getStorageSync('record') || []
          stayArray.push({
            userId: wx.getStorageSync('tokenAdmin').frontUserId,
            openId: wx.getStorageSync('tokenAdmin').openId,
            type: data.shareType || '',
            sourceId: data.id || '',
            page: res.path,
            stay: stayTime
          })
          wx.setStorageSync('record', stayArray)
          if(wx.getStorageSync('record').length == that.globalData.recordNumber) {
            that.setRecordBatch()
          }
          // 调用原来的onUnload 方法
          oldOnUnload.call(that, res)
        }
      }
      //到此处 记录用户轨迹的操作结束,下面是针对全局分享的操作 (下面注释的这部分代码:统计用户是通过哪种方式查看的小程序,用户用户个人中心我的分享展示,如图一)
      // var scene = '?' + decodeURIComponent(res.query.scene) 
      // var rid =  getUrlParams(scene, 'rid') || ''
      // if (view) {
       //  if(res.query.openid) {
         //  that.setClickRecord(res)
        // }
       //  if(wx.getStorageSync('tokenAdmin')) {
         //  if(rid) {
           //  that.setPosterRecord(rid)
          // }
        // }
        // console.log('是否重写分享方法', data.isOverShare)
        if (data.isOverShare) { // isOverShare参数为是否需要需要重写分享方法,在需要的页面加上该变量
          view.onShareAppMessage = function () {
            if(wx.getStorageSync('tokenAdmin')) { //防止用户在该页面多次分享给不同的人记录成条分享记录,看需求
              if(!data.isShareRecord) {
                that.getshareRecord(res, data)
              }
            }
            if(data.id) { //带id的页面分享参数和不带区分()
              // console.log(data)
              return {
                title: data.shareTitle,
                imageUrl: data.shareImage,
                path: `${view.route}?id=${data.id}&openid=${wx.getStorageSync('tokenAdmin').openId}&ts=${Date.parse(new Date())}`,
              }
            } else {
              return {
                title: data.shareTitle,
                path: `${view.route}?openid=${wx.getStorageSync('tokenAdmin').openId}&ts=${Date.parse(new Date())}`,
                imageUrl: data.shareImage
              }
            }
          }
        }
      }
    })
  },
个人中心我的分享

在这里插入图片描述
都看到这儿了,如果帮到了你,留下你的小心心吧~~ (^-^)V

  • 6
    点赞
  • 2
    评论
  • 28
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 2 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

彡木

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值