解决 uni-app 微信小程序项目中腾讯统计 mta 不上报数据的问题

在 uni-app 微信小程序项目开发中，发现腾讯统计 mta 不上报数据。

1. 原因

1. uni-app 框架与 mta 组件都对原生的 Page 对象进行了重写，在 onLoad 生命周期函数中上报数据，这一点开发者无感知
2. 因为 uni-app 框架会首先加载自身框架脚本，导致 mta 后加载的脚本对 Page 对象重写无效（两者冲突）
3. 所以，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. 解决

有两个解决方案：

1. 把 mta-wechat-analysis.js 脚本放到 uni-app 框架脚本之前加载，但官方并没有提供这个功能，所以放弃这个方法
2. 重写 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 许可证）