位置: 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年还能用吗
  • 库存商品报废进项转出
  • 个人去税局开劳务费需要注意什么
  • 应付职工薪酬包括公积金吗
  • 新三板企业转主板条件
  • 房产税从价计征的计税依据
  • 股权转让交的印花税怎么做会计分录
  • 应付账款少说明什么
  • 长期待摊费用与折旧区别
  • 去年开的增值税普通发票今年可以作废吗
  • Windows10如何解压rar
  • 期间费用可以计入产品成本的费用吗
  • 金税盘纳税申报
  • 企事业承包承租经营所得税税法
  • 对方开红票需要寄给我吗
  • win10开机强制进入
  • PHP:spl_autoload_call()的用法_spl函数
  • 高新技术企业在哪申报年报
  • 日落之前是什么时辰
  • css样式修改
  • php中字符串的连接运算符是( )
  • sed指令可以打印文件的奇数或偶数行
  • python 捕捉窗口
  • 发票收款人与复核人为空
  • 如何区分误餐费和补助费
  • 印花税是根据什么申报的
  • 即征即退进项税怎么划分合算
  • 网上学电脑
  • c语言fread函数的用法示例
  • 货款分批付的会计分录
  • 年终奖的个税税率表
  • 直接转销法还允许使用吗
  • 检查记账凭证的内容包括
  • 定货还是订货
  • 长租公寓如何纳税
  • 现金比率的计算公式是什么意思
  • 购进生产车间增值税税率
  • 为什么贷款要收手续费
  • 税务入账的加油费怎么算
  • 银行回单自助打印可以打多久的记录
  • 通行费发票电子化 机场路
  • 账簿按形式分几种
  • mysql 更改密码
  • sqlserver 优化配置
  • linux系统关机重启命令
  • 服务器找不到存储盘
  • igs文件是什么文件
  • windows无法更改设置
  • win7 桌面空白
  • linux 限制内存
  • win8功能
  • win7系统开机黑屏只有鼠标且打不开任务管理器
  • perl处理特殊符号
  • 多媒体播放器使用方法
  • iframe移动端自适应
  • 如何用python处理pdf
  • java物流功能
  • android时间轴实现
  • 动作手游排行榜2020前十名
  • unity3d操作
  • js实现自动定时功能
  • Node.js+ES6+dropload.js实现移动端下拉加载实例
  • JavaScript中的数据类型分为两大类
  • JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
  • 重庆地方税务局刘飞虎
  • 如何查询企业是小规模还是一般
  • 河北国家税务局官网站
  • 实木地板什么
  • 预缴增值税最后怎么处理
  • 购销合同印花税最新政策2023
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设