位置: 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)

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

  • 收到退税款怎么入账
  • 增值税是价内税,消费者是税款的最终负担者( ) A对 B错
  • 个体户怎么网上报税流程
  • 应收账款周转率正常值范围
  • 一般纳税人差额征税申报表怎么填
  • 进项税额有留底怎么做分录
  • 金税三期报税软件
  • 非正常损失进项转出额如何计算
  • 摊销费用怎么计提
  • 公司股权平价转让要交税吗
  • 一张发票多个单位报销,怎么分辨
  • 劳务分包服务费率
  • 房地产企业预缴企业所得税怎么算
  • 不合规进项税如何账务处理
  • 防伪税控技术维护费是进项还是销项
  • 所得税费用什么时候结转到本年利润
  • 国税2017年16号文
  • 广告公司怎样
  • 公司购买的车辆购置税怎么入账
  • php生成guid
  • 工资及社保外包服务
  • 鸿蒙系统怎么设置导航键
  • 苹果系统的声音
  • zmweb.exe是什么进程
  • php缩放图片
  • 收到银行承兑汇票的账务处理
  • 股权转让要交什么税举例
  • php简单实例
  • php最好的编程语言
  • 低值易耗品现在还用吗
  • 博茨瓦纳热吗
  • 常用的3个第三方类库
  • php中可用于设置变量类型的函数
  • 简单实现php留言功能
  • 微信小程序怎么制作自己的小程序
  • webpack打包步骤
  • css背景图
  • 14个Python处理Excel的常用操作,非常好用
  • /ncrc命令
  • laravel 实例
  • git主干
  • PHPCMS num 参数是什么意思?
  • 客户要发票加收怎么办
  • 企业预收账款缴纳个税吗
  • 一般纳税人作废小规模时开的发票怎么报税
  • sql server基本知识
  • 可以直接申请一个微信吗
  • 农机免税发票能抵扣吗
  • 应收账款借方余额
  • 酒吧会计如何做工作
  • 政府补助的分类包括
  • 农村土地征用补偿价格
  • 增值税申报表中期初未缴税额指什么
  • 科技项目扶持资金
  • 自营工程的账务处理
  • 一次性工伤医疗补助金怎么领取
  • 租赁的初始直接费用有哪些
  • 行政事业单位支出范围和标准
  • 库存商品用于投资
  • 现金账务处理原则规定
  • 明细账要如何做账
  • win2000服务器
  • Windows Server 2016怎么安装?Windows Server 2016安装、激活、设置详细图文教程
  • win10系统无法开机怎么修复
  • win8应用商店废了
  • windows移动中心有什么用
  • wind移动版
  • win7提示内部版本7601副本不是正版
  • number fields to_char
  • nodejs formidable
  • 批处理界面
  • JavaSacript中charCodeAt()方法的使用详解
  • python tornado框架
  • 车船税缴费电子凭证
  • 深圳市国家税务局电子税务局官网
  • 开票风险预警机制蓝色预警怎么办
  • 小微企业如何申报增值税
  • 公司自有房产出租缴税
  • 河南省焦煤集团董事长
  • 城镇土地使用税税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设