位置: IT常识 - 正文

Uniapp-微信小程序实现全局事件监听并进行数据埋点(uniapp微信小程序头像获取与服务器对接)

编辑:rootadmin
Uniapp-微信小程序实现全局事件监听并进行数据埋点 Uniapp-微信小程序实现全局事件监听并进行数据埋点零、前言

推荐整理分享Uniapp-微信小程序实现全局事件监听并进行数据埋点(uniapp微信小程序头像获取与服务器对接),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp微信小程序开发知识点,uniapp微信小程序一键登录,uniapp微信小程序获取手机号,uniapp微信小程序表单验证,uniapp微信小程序支付流程,uniapp微信小程序获取手机号,uniapp微信小程序兼容,uniapp微信小程序获取手机号,内容如对您有帮助,希望把文章链接给更多的朋友!

最近接到需求,领导希望使用微信开放平台上免费的We分析进行数据埋点,但又不希望在现有uniapp开发的微信小程序代码上做侵入式修改,笔者奉命进行了技术调研,考虑通过劫持事件的方式来实现捕获特定事件并上传分析平台的功能。

需要特别注意的是,微信小程序是不能得到document对象的,$el上挂载的也是undefined,自然也就不能通过全局addEventListener的方式来监听特定事件。在调研中想到可以通过劫持小程序的自定义组件构造器Component()来实现事件的监听。

为了便于理解,部分数据结构通过TypeScript接口形式进行描述。

一、软件环境HbuilderX 3.4.7.20220422微信开发者工具 Stable 1.05.2203070小程序基础库版本 2.24.4 [749]二、相关分析及实现uniapp编译微信小程序时对于事件的处理分析Uniapp-微信小程序实现全局事件监听并进行数据埋点(uniapp微信小程序头像获取与服务器对接)

部分知识via掘金:https://juejin.cn/post/6968438754180595742#heading-20

uniapp使用了uni-app runtime这个运行时将小程序发行代码进行打包,实现了Vue与小程序之间的数据及事件同步。

源Vue模板及编译产物wxml对照

uniapp的模板编译器代码在/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/uni-template-complier下。

首先以一个简单的Vue模板为例,观察uniapp是如何将Vue template编译为wxml的:

<template> <div @click="add();subtract(2)" @touchstart="mixin($event)">{{ num }}</div></template>

编译结果为:

<view data-event-opts="{{ [ ['tap', [['add'],['subtract',[2]]] ], ['touchstart', [['mixin',['$event']]] ] ] }}" bindtap="__e" bindtouchstart="__e" class="_div"> {{num}}</view>

可以看到,uniapp将tap和touchstart事件绑定到__e函数上,然后将事件对应的动作放到了名为eventOpts的dataset中。

data-event-opts

data-event-opts非常重要。data-event-opts是一个二维数组,每个子数组代表一个事件类型。事件类型有两个值,第一个表示事件类型名称,第二个表示触发事件函数的个数。事件函数又是一个数组,第一个值表述事件函数名称,第二个是参数表。下面用TypeScript的类型

本文链接地址:https://www.jiuchutong.com/zhishi/283644.html 转载请保留说明!

上一篇:Win11 Dev 预览版22509.1011更新补丁KB5008918发布(附更细内容汇总)(win11预览版dev改beta)

下一篇:绿萝的养殖方法和注意事项——办公室养殖版(图文)(大型绿萝的养殖方法)

  • 法人个人账户收款是否属于公司业务
  • 组成计税价格包括什么
  • 房产税计税依据是什么
  • 递延收益所得税负债
  • 简易计税是什么意思?
  • 牵引车和挂车都要购买交强险吗
  • 社保阶段性减免延长到年底
  • 总公司设立分公司的决定
  • 红字信息表能开多少行
  • 银行结构性存款是理财吗
  • 电器电子产品及配件入账
  • 房地产企业交纳所得税吗
  • 企业所得税前扣除是啥意思
  • 税率变化递延所得税资产如何调整
  • 公司利润如何提取避税
  • 物业公司收物业费如何入账
  • 租个人房子开发票税率是多少
  • 销售方未抄报税的专票购买方能抵扣吗?
  • 转账支票签章如何盖及相关注意事项
  • 小规模纳税人开专票税率是1%还是3%
  • 财产保险合同的主体变更
  • 营改增后出售以前年度的固定资产怎么申报?
  • 对方发票丢失开什么证明
  • linux系统怎么安装网卡驱动
  • 其他流动负债有利息吗
  • 在建工程人工费计入什么科目
  • 本年利润有余额可以结账吗
  • windows 10月更新
  • php imagick
  • 红字发票开具后蓝字发票开具时限的问题
  • layui iconfont
  • 月初红字冲回估价入账存货借贷
  • Yii2使用表单上传文件的实例代码
  • 企业在什么情况下会被列入经营异常
  • 购进农产品增值税进项税额的确认方法
  • php ajax 实现
  • 稽查补缴以前年度的社保
  • opencv 边缘检测
  • YOLOv5|YOLOv7|YOLOv8改各种IoU损失函数:YOLOv8涨点Trick,改进添加SIoU损失函数、EIoU损失函数、GIoU损失函数、α-IoU损失函数
  • 清除命令窗口所有内容用()命令,清除变量用()命令
  • 域名续费多久生效
  • 织梦专题页模板
  • 工会经费计算公式的例子
  • 税票电子发票怎么开
  • sql server2005一个表中可以设置
  • row number函数的使用场景
  • 旅行社小规模纳税人差额征税
  • 地税发票丢失应如何处理
  • 小规模纳税人购车是怎么抵税的
  • 贷款利息进项税额转出
  • 银行季度结息怎么记账
  • 一般来说,采取质押贷款方式
  • 员工报销材料费用会计分录
  • 物流公司账务处理流程及方法
  • 企业收到劳务费会计分录怎么做账
  • 贷款应提准备的资料包括
  • 实收资本应补缴哪些税
  • 事业单位企业所得税汇算清缴怎么做
  • 怎样计算存款利息?
  • sql server怎么添加数据
  • 一个简单的群规怎么写
  • windows7用户
  • xp系统怎么连接电脑
  • 怎样修改mac
  • win8在哪里看安装的所有程序
  • 三种方法完美解决问题
  • ie8-ie11浏览器
  • 如何汉化游戏
  • linuxvim编辑器的用法
  • sublime text配置node.js调试(图文教程)
  • linux如何创建守护进程
  • jquery左右移动动画效果
  • jquery层级选择器
  • vue的自定义组件
  • 胰腺在人体的哪个部位图解
  • python中lxml模块
  • python简要介绍
  • 税务工作秘密管理暂行办法
  • 代理业如何缴纳印花税
  • 忘记了密码怎么打开手机
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设