用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2020-5-26 00:31

# 解决 uni-app 微信小程序项目中腾讯统计 mta 不上报数据的问题 在 `uni-app` 微信小程序项目开发中,发现腾讯统计 `mta` 不上报数据。 ## 1. 原因 1. `uni-app` 框架与 `mta` 组件都对原生的 `Page` 对象进行了重 ...

# 解决 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/blob/master/resources/mta-wechat-analysis.js) 脚本可以[点这里下载](https://github.com/senntyou/blogs/blob/master/resources/mta-wechat-analysis.js)。

## 后续

更多博客,查看 [https://github.com/senntyou/blogs](https://github.com/senntyou/blogs)

作者:[深予之 (@senntyou)](https://github.com/senntyou)

版权声明:自由转载-非商用-非衍生-保持署名([创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh))
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: senntyou 来自: segmentfault