在 uni-app
微信小程序项目开发中,发现腾讯统计 mta
不上报数据。
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)); }
有两个解决方案:
mta-wechat-analysis.js
脚本放到 uni-app
框架脚本之前加载,但官方并没有提供这个功能,所以放弃这个方法因为 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 许可证)