解决 uni-app 微信小程序项目中腾讯统计 mta 不上报数据的问题
2020/5/25 14:26:25
本文主要是介绍解决 uni-app 微信小程序项目中腾讯统计 mta 不上报数据的问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
解决 uni-app 微信小程序项目中腾讯统计 mta 不上报数据的问题
在 uni-app
微信小程序项目开发中,发现腾讯统计 mta
不上报数据。
1. 原因
-
uni-app
框架与mta
组件都对原生的Page
对象进行了重写,在onLoad
生命周期函数中上报数据,这一点开发者无感知 - 因为
uni-app
框架会首先加载自身框架脚本,导致mta
后加载的脚本对Page
对象重写无效(两者冲突) - 所以,
mta
组件中设置了"autoReport": true
会导致数据不上报("autoReport": false
配置不受影响,因为不需要重写Page
)
uni-app 框架脚本重写 Page
:
var MPPage = Page; Page = function Page() {var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; initHook('onLoad', options); return MPPage(options); };
mta-wechat-analysis.js 重写 Page
:
function initOnload() { var a = Page; Page = function (b) { var c = b.onLoad; b.onLoad = function (a) { c && c.call(this, a); MTA.Data.lastPageQuery = MTA.Data.pageQuery; MTA.Data.pageQuery = a; MTA.Data.lastPageUrl = MTA.Data.pageUrl; MTA.Data.pageUrl = getPagePath(); MTA.Data.show = !1; MTA.Page.init() }; a(b) } }
按理说,前后两次对 Page
进行重写,应该是不冲突、都有效的,但 uni-app
在对 Vue 组件转微信小程序原生组件时,使用了局部封装的函数,导致后面其他脚本对 Page
的重写无效
function createPage(vuePageOptions) { return Component(parsePage(vuePageOptions)); }
2. 解决
有两个解决方案:
- 把
mta-wechat-analysis.js
脚本放到uni-app
框架脚本之前加载,但官方并没有提供这个功能,所以放弃这个方法 - 重写 Vue 组件,在 Vue 组件里上报统计数据
因为 Vue 组件是不能重写生命周期函数的,所以只能重写调用生命周期函数的方法 Vue.prototype.__call_hook
:
mta-wechat-analysis.js
:
- function initOnload() { - var a = Page; - Page = function (b) { - var c = b.onLoad; - b.onLoad = function (a) { - c && c.call(this, a); - MTA.Data.lastPageQuery = MTA.Data.pageQuery; - MTA.Data.pageQuery = a; - MTA.Data.lastPageUrl = MTA.Data.pageUrl; - MTA.Data.pageUrl = getPagePath(); - MTA.Data.show = !1; - MTA.Page.init() - }; - a(b) - } - } + import Vue from 'vue'; + + function initOnload() { + // 重写 Vue.prototype.__call_hook 方法 + Vue.prototype.__call_hook_proxy = Vue.prototype.__call_hook; + Vue.prototype.__call_hook = function(hook, args) { + if (hook === 'onLoad') { + MTA.Data.lastPageQuery = MTA.Data.pageQuery; + MTA.Data.pageQuery = args; + MTA.Data.lastPageUrl = MTA.Data.pageUrl; + MTA.Data.pageUrl = getPagePath(); + MTA.Data.show = !1; + MTA.Page.init(); + } + this.__call_hook_proxy(hook, args); + }; + }
改写后的 mta-wechat-analysis.js 脚本可以点这里下载。
后续
更多博客,查看 https://github.com/senntyou/blogs
作者:深予之 (@senntyou)
版权声明:自由转载-非商用-非衍生-保持署名(创意共享 3.0 许可证)
这篇关于解决 uni-app 微信小程序项目中腾讯统计 mta 不上报数据的问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-24Vite多环境配置学习:新手入门教程
- 2024-11-23实现OSS直传,前端怎么实现?-icode9专业技术文章分享
- 2024-11-22在 HTML 中怎么实现当鼠标光标悬停在按钮上时显示提示文案?-icode9专业技术文章分享
- 2024-11-22html 自带属性有哪些?-icode9专业技术文章分享
- 2024-11-21Sass教程:新手入门及初级技巧
- 2024-11-21Sass学习:初学者必备的简单教程
- 2024-11-21Elmentplus入门:新手必看指南
- 2024-11-21Sass入门:初学者的简单教程
- 2024-11-21前端页面设计教程:新手入门指南
- 2024-11-21Elmentplus教程:初学者必备指南