解決 uni-app 微信小程序項目中騰訊統計 mta 不上報數據的問題

解決 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 許可證）