位置: IT常识 - 正文
Uniapp-微信小程序实现全局事件监听并进行数据埋点(uniapp微信小程序头像获取与服务器对接)
编辑：rootadmin推荐整理分享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编译微信小程序时对于事件的处理分析
部分知识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-optsdata-event-opts非常重要。data-event-opts是一个二维数组，每个子数组代表一个事件类型。事件类型有两个值，第一个表示事件类型名称，第二个表示触发事件函数的个数。事件函数又是一个数组，第一个值表述事件函数名称，第二个是参数表。下面用TypeScript的类型
上一篇：Win11 Dev 预览版22509.1011更新补丁KB5008918发布(附更细内容汇总)(win11预览版dev改beta)
下一篇：绿萝的养殖方法和注意事项——办公室养殖版(图文)(大型绿萝的养殖方法)
