问题描述

由于产品需要做一个小程序监控统计，于是选择了友盟+；在对接过程中，发现一个严重的问题，如果代码写固定一个配置参数appkey的话，怎么对接都可以，但是现在我做的是第三方平台做小程序模板的，一套代码分给各个小程序，那么就需要动态拿到当前是哪个小程序，哪个appkey，一个appkey对应一个友盟+应用，也是区分统计小程序的原因。
问题就来了，友盟SDK初始化必须要在vue实例之前配置好，这就需要等待获取appkey返回配置好初始化内容，在继续实例化vue。
这里声明一下，我用的是uniapp框架开发

问题解决思路

之前想了很多办法，然后刚开始探索比较成功的方法，现在小程序配置内容写上appkey不要在接口返回，因为接口返回太慢了（等待几十毫秒）异步时间太长；我把vue实例封装成一个函数，用小程序方法 wx.getExtConfig 获取当前小程序配置信息appkey，拿到后初始化友盟配置信息，在初始化vue实例，结果开发工具、安卓手机成功了，让我信心满满。

当测试总监拿去苹果手机测试时，打开小程序正常打开，但是页面点击无效了，在一看控制台，wocao，报错了，报的还是框架的错误，没办法定位错误。。。
然后思索良久，居然不能用异步，那我同步总可以吧（这里的同步指的是小程序api同步方法，如果自己写代码await可能不行）于是我找到了同步方法wx.getExtConfigSync，写好判断条件，运行开发工具没问题，安卓手机没问题，拿出最新一款iPhone13打开查看结果，幸运的跑起来了，没有任何报错了。心里的大石终于落地了，可以不害怕跌落了，但是小程序昨晚已经发布了，今天才搞好，还是有点尴尬哈

代码展示

首先可以去友盟+官方下载SDK或者用npm安装
使用npm安装指令：npm install umtrack-wx@latest --save

SDK文件下载：点我下载地址
下载后
将解压后的文件目录放在小程序目录下（比如：/src/utils目录）。
添加代码：具体可查看集成文档：目录地址

各框架写法引入方式：Umeng小程序demo

本人改造适配第三方平台小程序写法

// main.js文件, vue入口文件

import App from './App'

import {
	umaInit
} from './utils/uma.js'; // 友盟+

import Vue from 'vue'
import store from './store'

Vue.prototype.$store = store

let uma = '';
let extConfig = uni.getExtConfigSync? uni.getExtConfigSync(): null; // 必须要用微信的同步方法，否则苹果手机会报错
if(extConfig) {
	if (extConfig.uMengKey) umaInit(extConfig.uMengKey); // 友盟+ 数据统计
	initApp();
} else {
	initApp();
}

// 由于友盟+初始化要在创建vue实例之前完成，故才有此操作
function initApp() {
	// #ifndef VUE3
	// import Vue from 'vue'
	Vue.config.productionTip = false
	
	// Vue.prototype.$uma = uma;
	Vue.use(uma); // 友盟+
	
	App.mpType = 'app'
	const app = new Vue({
		store,
		...App
	})
	app.$mount()
	// #endif

	// #ifdef VUE3
	import {
		createSSRApp
	} from 'vue'
	export function createApp() {
		const app = createSSRApp(App)
		return {
			app
		}
	}
	// #endif
}

// uma.js文件，友盟初始配置

import Vue from 'vue';
let uma = '';
export function umaInit(appKey) {
	if (!appKey) return; // 如果没有key,不需要统计
	uma = require('../umtrack-wx/lib/index.js')
	uma.init({
		appKey: appKey,
		useOpenid: false,
		autoGetOpenid: false,
		debug: false,
		uploadUserInfo: true,
	});
	// 适配vue插件如此可通过Vue.use(uma)来安装
	uma.install = function(Vue) {
		Vue.prototype.$uma = uma;
	}
	Vue.use(uma); // 友盟+
};