支持uni-app框架多端小程序快速接入
uni-app 可以支持一个框架开发多个平台的小程序,友盟+小程序SDK支持微信、支付宝、百度、QQ、字节等小程序平台uniapp框架开发的小程序;选择对应的小程序平台并按相应步骤成功集成SDK后,即可查看友盟+为您小程序提供的数据采集服务。
uni-app集成Demo
集成demo地址:https://github.com/umeng/mp-demos/tree/master/uniapp
1. 注册友盟账号,获取应用的appkey


2. 集成SDK
2.1 获取SDK
小程序平台 | 获取及安装SDK的方式 |
微信 | NPM安装: |
支付宝 | NPM安装: |
百度 | NPM安装: |
字节 | |
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,可以通过 | 不同平台小程序请注意使用不同接口前缀 |
微信小程序、QQ小程序 | setUnionid(id) | 获取到unionid,便于用户分群中下载到用户unionid直接进行运营使用 | 不同平台小程序请注意使用不同接口前缀 |