跳转到主要内容
PRODUCT DOCUMENTS

快速找到所需文档,高效完成接入与排障

浏览产品文档与友盟 Skill,展开目录并阅读正文。

支持uni-app框架多端小程序快速接入

uni-app 可以支持一个框架开发多个平台的小程序,友盟+小程序SDK支持微信、支付宝、百度、QQ、字节等小程序平台uniapp框架开发的小程序;选择对应的小程序平台并按相应步骤成功集成SDK后,即可查看友盟+为您小程序提供的数据采集服务。

uni-app集成Demo

集成demo地址:https://github.com/umeng/mp-demos/tree/master/uniapp

1. 注册友盟账号,获取应用的appkey

image.pngimage.png

2. 集成SDK

2.1 获取SDK

小程序平台

获取及安装SDK的方式

微信

NPM安装:npm install umtrack-wx --save

支付宝

NPM安装:npm install umtrack-alipay --save

百度

NPM安装:npm install umtrack-swan --save

字节

SDK下载:https://devs.umeng.com/sdk

QQ

SDK下载:https://devs.umeng.com/sdk

NPM安装参考代码:

cd path-to-uniappproject
npm install umtrack-alipay --save
npm install umtrack-wx --save
npm install umtrack-swan --save

微信、支付宝、百度小程序SDK可以通过NPM方式安装。

字节和QQ目前还不支持NPM方式,可以使用链接进行SDK下载,下载最新的SDK文件,将文件移动到uniapp工程某目录,比如./libs/umtrack-tt/uma.min.js 。

2.2 利用条件编译集成sdk

可以采用条件编译,支持一段代码多个平台一次集成。SDK集成位置尽量靠前main.js

// #ifdef MP-WEIXIN
import uma from 'umtrack-wx';
uma.init({
    appKey:'xxxx',
    useOpenid:false,
    autoGetOpenid:false,
    debug:true
});
// #endif
// #ifdef MP-ALIPAY
import uma from 'umtrack-alipay';
uma.init({
    appKey:'xxxx',
    debug:false
});
// #endif
// 字节sdk
// #ifdef MP-TOUTIAO
import uma from './libs/umtrack-tt/uma.min.js'
uma.init({
    appKey:'YOUR_UMENG_APPKEY',//由友盟分配的APP_KEY
    autoGetOpenid:true,// 是否需要通过友盟后台获取openid或匿名openid,如若需要,请到友盟后台设置appId及secret
    debug:true,//是否打开调试模式
    uploadUserInfo:false// 自动上传用户信息,设为false取消上传,默认为false
})
// #endif
// 此处用来挂载入uma到组件实例上,方便组件内使用this.$uma
uma.install =function(Vue){
Vue.prototype.$uma = uma;
}
importVue from 'vue'
importApp from './App'


Vue.config.productionTip =false
Vue.use(uma);
App.mpType ='app'

const app =newVue({
...App
})
app.$mount()

2.3 根据需求配置参数

适用小程序平台

参数配置项

类型/值

首次使用默认值

参数功能

注意事项

微信小程序、QQ小程序

useOpenid

true / false

true

统计的用户标识为openid

如果设置为true,但是没有设置友盟+获取openid或者没有上报openid,则用户数据不会发送

微信小程序、QQ小程序百度小程序、字节跳动小程序

autoGetOpenid

true / false

true

sdk进行请求获取openid(百度获取swanid,字节获取anonymousid);授权友盟+通过后台自动获取openid,可防止数据统计过程中因未采集到OpenID而造成数据丢失

设置后,需要在后台「设置」功能中填写小程序的appid及appsecrect,否则也不会获取openid;注意,如果是微信小程序和QQ小程序,当此配置项为true时,请一定将useOpenid 配置项设为 true;如果服务商无法获得appid(百度为appkey)和appsecrect,则请将此配置项设为false,然后调用 setOpenid() 手动上报openid(百度为swanid,字节为anonymousid)

微信小程序、支付宝小程序、QQ小程序百度小程序、字节跳动小程序

uploadUserInfo

true / false

false

获取用户的信息和头像,可以在「分享分析」功能中根据头像查看用户的分享排行

开启为true时,请确认在启动时获取用户信息。

微信小程序、支付宝小程序、QQ小程序百度小程序、字节跳动小程序

debug

true / false

true

是否打开调试模式;建议打开,可以帮助在小程序端进行数据上报的debug

暂无

支付宝小程序

enableVerify

true / false

false

剪切板是用于埋点验证获取测试设备信息,以便进行埋点验证的测试工作

剪切板功能是用于埋点验证获取测试设备信息的;当开启为true时,用户侧可能会被提示获取剪切板信息;请确认线上发布版本设置为false。

2.4 配置友盟的域名到小程序模板后台

**登录小程序后台,在「设置」中添加request合法域名:https://umini.shujupie.com注:一定注意设置,否则友盟+接收不到数据。

3.自定义事件

参考:小程序自定义事件文档

4. SDK接口使用

适用小程序平台

接口

接口功能

接口使用注意事项

微信小程序、QQ小程序百度小程序、字节跳动小程序

setOpenid(openid)

openid是用户登录app并打开小程序进行授权后,可以获取到登录用户在小程序中的唯一识别id,部分平台要求openid为唯一标识,需要使用此接口上报openid

微信、QQ小程序,如果设置useOpenid为true,且autoGetOpenid 为false时,一定要注意使用此接口上报openid;不同平台小程序请注意使用不同接口前缀

微信小程序、支付宝小程序、QQ小程序百度小程序、字节跳动小程序

setUserid(userId, provider)

用户在您的小程序上注册以后,您的应用服务端会在用户数据库里添加一条记录并且分配一个用户ID,可以通过 setUserid 接口设置该用户ID,以便后续做数据打通或基于应用用户ID做计算时使用。

不同平台小程序请注意使用不同接口前缀

微信小程序、QQ小程序

setUnionid(id)

获取到unionid,便于用户分群中下载到用户unionid直接进行运营使用

不同平台小程序请注意使用不同接口前缀