python3 朋友圈访客朋友圈访客记录小程序

转载

imking 2024-04-01 10:49:15

文章标签 python3 朋友圈访客小程序 javascript 当前页点击事件 文章分类 Python 后端开发

记录页面停留时间、功能点击次数

// wxml
<view id="btn1" bindtap="handlerClick">点我</view>

// js
const { startToTrack, startByClick, startByBack } = require("../../utils/track");

Page({
	// 点击 tab 时用此方法触发埋点
	onTabItemTap: () => startToTrack(),
	
	// 被跳转的页面用此方法触发埋点
	onShow: () => startToTrack(),

	// 返回上一页时调用此方法(tab切换时不需要)
	onUnload: () => startByBack(),

	// 点击节点时触发埋点
	handlerClick(res) {
		startByClick(res.currentTarget.id);
	}
})

track.js：足迹文件

// 新建页面埋点
let newStorage = data => {
  return {
    time: data && data.time || 0,// 页面访问时间
    click: data && data.click || [],// 点击事件次数
  }
}
let route = "";// 当前页面路由
let storage = null;// 埋点信息
let TIME = null;// 当前页累计访问时间(秒)

// 计时器：记录当前页面停留时间
let buying = function () {
  let func = () => storage.time++;
  TIME = setInterval(func, 1000);
}

// 获取埋点数据
let getSession = () => {
  wx.getStorage({
    key: route,
    success: res => storage = newStorage(res.data),// 已有当前页信息
    fail: res => storage = newStorage(),// 没有当前页信息
    complete: () => buying()// 开始计时
  })
}

// 停止统计 && 保存埋点数据 && 初始化页面变量
let setSession = () => {
  clearInterval(TIME);// 停止统计
  wx.setStorage({ key: route, data: storage })// 保存埋点数据
  initData();// 初始化
}

// 小程序切前台
wx.onAppShow( res => {
  route = res.path;
  getSession();
})

// 小程序切后台
wx.onAppHide( res => setSession() )

// 异常捕捉
wx.onError( error => console.error("捕获到异常错误：", error) )

// 初始化信息
let initData = () => {
  route = "";
  storage = null;
  TIME = null;
}

module.exports = {
  // 页面触发埋点
  startToTrack() {
    setSession();// 停止旧页面统计 && 保存旧页面信息

    let arr = getCurrentPages();// 获取页面信息
    route = arr[arr.length - 1].route;// 获取页面路由
    getSession();// 获取新页面埋点信息 && 开始统计
  },

  // 返回按钮触发埋点
  startByBack(){
    setSession();// 停止旧页面统计 && 保存旧页面信息
    
    let arr = getCurrentPages();// 获取页面信息
    route = arr[arr.length - 2].route;// 获取页面路由
    getSession();// 获取新页面埋点信息 && 开始统计
  },

  // 通过点击事件触发埋点 id--以dom的id属性作为storage里唯一的key值
  startByClick(id){
    let arr = storage.click.filter(item => item.id === id);// 查找元素历史足迹
    if(arr.length) {
      arr[0].num++;// 继续增长
      storage.click.concat(arr);
    }else{
      storage.click.push({ id: id, num: 1 });// 新增
    }
  },

  // 查询storage用量, 同一个小程序 storage最大限制10MB
  getBalance(){
    wx.getStorageInfo({
      success: option => {
        console.log("当前内存使用量：", option.currentSize, "KB");
        console.log("剩余内存可用量：", `${option.limitSize - option.currentSize}KB(${100 - (option.currentSize / option.limitSize)}%)`)
      }
    })
  }
}

2021年5月28日更新