最近刚刚上手使用uni-app框架开发微信小程序,因为小程序中使用了吐个槽的插件,所以需要接入插件版的阿拉丁SDK,但是在uni社区及网上找了很久也没有找到合适的解决方案,以下是自己实现的方法,已经可以成功统计数据,希望可以帮到有同样困惑的小伙伴。
实现方案如下
因为uni-app最初引用了mpvue框架,而阿拉丁官方已经提供了mpvue 的插件版的支持,所以想参考mpvue的方式实现在uni-app中进行实现。
一、配置应用及页面的生命周期时间监听,基本和myvue的引用方式一致。
1、去阿拉丁官网下载 SDK,将解压得到的文件夹 sdk 拷贝到小程序项目的 common 目录中。
2、使用编辑器打开 ald-stat-conf.js 文件,填写在阿拉丁申请的 app_key并配置plugin为true;
3、在项目中入口文件main.js引入SDK,这样就在全局注册好了阿拉丁,代码如下:
import { MpvueApp } from './common/ald-stat' //关键代码
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue( MpvueApp(App) )//关键代码
app.$mount()
4、在每个页面引入阿拉丁,监听页面事件
import { MpvuePage } from '../../common/ald-stat'
但是接着按照mpvue的文档操作如下代码就报错了
const app = new Vue( MpvuePage(App) )
5、配置request合法域名
以上配置应用及页面监听统计结束。
二、使用高级功能,自定义事件统计
仍然按照myvue的文档敲如下代码:
var app = getApp();
app.aldstat.sendEvent('事件名称');
代码报错如下,发现在getApp()中没有获取到aldstat这个属性,所以报错了:
“Cannot read property ‘sendEvent’ of undefined;”
于是我打印了getApp()信息查看,发现里面有一个$vm属性,是Vue的实例,猜想可能阿拉丁是注册到这个实例里面了,点开查看里面果然有
aldstat这个属性,尝试一下吧,结果成功了,引用代码如下:
var {$vm: app} = getApp();
app.aldstat.sendEvent('事件名称');
这里为了和之前的引用方式统一,所以给$vm属性起了别名,还是叫app,接着我们测试一下,在控制台会发现请求正常发送了。
至此,在uni-app中实现使用阿拉丁插件版统计数据完全实现。
uniapp 组件版照这个模式引入没用呀