评论

uni-app开发经验总结(一)——如何将阿拉丁SDK集成至uni-app框架构建的小程序中

uni-app开发经验总结(一)——如何将阿拉丁SDK集成至uni-app框架构建的小程序中

最近刚刚上手使用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中实现使用阿拉丁插件版统计数据完全实现。

如果你有更好的实现方案,欢迎留言!

最后一次编辑于  2019-06-30  
点赞 1
收藏
评论

1 个评论

  • 社恐的王同学
    社恐的王同学
    2019-12-26

    uniapp 组件版照这个模式引入没用呀

    2019-12-26
    赞同
    回复
登录 后发表内容