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

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

  • 税金及附加怎么来的
  • 国税税务登记号查询
  • 缴纳社保的基数是什么意思
  • 票面3个点的增值税发票是交几个点的税金
  • 承兑汇票给别人时对方需要出具什么
  • 出纳工人借支与贷款区别
  • 自然灾害造成的房屋损失怎么处理
  • 总公司可以给分公司买车吗
  • 不动产在建工程使用的外购物资可以抵扣吗
  • 部门会议要点
  • 简易征收进项税额转出什么意思
  • 建筑业预缴税款都要填哪些表
  • 超市商品打折怎么算出来
  • 总公司调到子公司
  • 小规模纳税人进材料怎么做账
  • 汽车租赁油费怎么算
  • 海关进口需要什么手续
  • 认证过的进项税怎么记账
  • 租入的固定资产属于资产吗
  • 税种案例分析
  • 借款利息开什么票
  • 金税四期再出新公告
  • 合伙人未出资能成为合伙人吗
  • 公户转账备注写错会查吗
  • 总公司签合同发票可以给子公司吗
  • 所得税会计方法有哪几种
  • 公司将自有车辆对外出租
  • 期间费用的研究费用填什么
  • 进口货物的企业有哪些
  • 安全处罚管理规定
  • 收到非税收入一般缴款书开发票吗
  • windows7怎么操作
  • 运输费用会计科目
  • php获取图片
  • 先征后返的会计分录
  • vue3的生命周期
  • php获取api内容
  • 什么是神经网络算法
  • 遗传算法排课代码python
  • php session用法
  • windows刻录cd
  • 两个公司可以是法人吗
  • 个人工程款结算了对方不付怎么办
  • 补记以前年度固定资产怎么记账
  • 委托加工应税消费品
  • sql server干嘛的
  • 赠品要做视同销售申报纳税吗?
  • 幼儿园伙食账目
  • 建筑附加税税率
  • 个人住房租赁给公司如何开票
  • 累计带薪缺勤账务怎么处理
  • 还借款收据怎么写
  • 票据质押如何做账
  • 工伤七至十级有伤残津贴吗
  • 劳动纠纷给员工的建议
  • 建筑施工企业会计分录大全
  • sqlserver 自动备份所有数据库的SQL
  • linux文本处理常用命令
  • 文件夹隐藏属性怎么弄
  • win7更改win10系统要怎么更改
  • linux calloc
  • windows 进度条
  • linux中压缩文件
  • win7手动更新在哪里设置
  • win10系统怎么设置最好
  • win10预览版bug
  • win7桌面文件夹路径
  • g++编译debug
  • 使用jquery
  • css div模糊
  • 游戏开发unity3d
  • android自动开关机失效
  • Node.js中的construct构造函数
  • shell bash sh
  • java script
  • js 上传
  • 福建2021年水利水电招聘
  • 企业去哪查
  • 车船税与船舶吨税法律制度ppt
  • 土地税是怎么缴纳按什么缴纳
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设