uniapp applet access Umeng

Different from native small program development, since the project created by uniapp does not havepackage.json files, how do we implement it?

uniapp`npm` placement:

1. Open the command console in the root directory of the project:

npm init -y

At this time, it will be in the updated directorypackage.json (we don’t need to modify the file here)

2. Download the Umeng package

npm install umtrack-wx  --save

3.Configuration

Since uniapp is used, it cannot be configured according to the official method:

Let’s add the following content tomain.js the file:

import uma from 'umtrack-wx';
uma.init({
    
    
	appKey: '你在友盟创建的程序key', //由友盟分配的APP_KEY
	// 使用Openid进行统计，此项为false时将使用友盟+uuid进行用户统计。
	// 使用Openid来统计微信小程序的用户，会使统计的指标更为准确，对系统准确性要求高的应用推荐使用Openid。
	useOpenid: false,
	// 使用openid进行统计时，是否授权友盟自动获取Openid，
	// 如若需要，请到友盟后台"设置管理-应用信息"(https://mp.umeng.com/setting/appset)中设置appId及secret
	autoGetOpenid: false,
	debug: true, //是否打开调试模式
	uploadUserInfo: false // 自动上传用户信息，设为false取消上传，默认为false
})

// 此处用来挂载入uma到组件实例上，方便组件内使用this.$uma
uma.install = function (Vue) {
    
    
	Vue.prototype.$uma = uma;
}

Vue.use(uma);

4.Use

If you want to use it, please operate it according to the project requirements. I only need to count the events in the program; so I directly enter the backend management of Umeng and add自定义事件Then add the following code to the corresponding event in the mini program to monitor the number of clicks.
Insert image description here

onClick(){
    
    
	this.$uma.trackEvent('eventID');//eventID是在友盟后台你自己创建的
}

For native configuration, please refer to:Mini program npm configuration

Other configurations, such as server configuration, are the same as those provided on the official website; just follow the steps;

Umeng Mini Program Documentation

Insert image description here