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

2020/5/25 14:26:25

本文主要是介绍解决 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 许可证)



这篇关于解决 uni-app 微信小程序项目中腾讯统计 mta 不上报数据的问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程