## mpvue插件版小程序框架接入指南 **准备工作** 注册并登录[阿拉丁统计平台](http://tongji.aldwx.com/),并在统计平台创建自己的小程序。 **接入流程**:登录统计平台 - 创建微信小程序 - 提交小程序信息 - 开始接入 ## ## 一、设置域名 登录[微信公众平台](http://mp.weixin.qq.com/)(mp.weixin.qq.com),在 开发→开发者设置->服务器域名 找到「 request 合法域名」,点击「修改」,将 log.aldwx.com 添加 request 合法域名中。 复制下方域名并添加 ``` 1 log.aldwx.com ``` ![](http://aldpicsh.aldwx.com/doc_aldwx/xcxtj-mpvuecjbxcxkjjrzn01.png) ## 二、 配置SDK ## 1、[点击下载](http://tongji.aldwx.com/tool/ald-stat.zip)微信小程序SDK,并将下载的文件解压,将解压后的文件夹移动到小程序根目录中 static 文件夹下。 ![](http://aldpicsh.aldwx.com/doc_aldwx/xcxtj-mpvuecjbxcxkjjrzn02.png) 2、使用微信开发者工具打开 ald-stat-conf.js 文件(文件路径:static/sdk/ald-stat-conf.js ),登录[阿拉丁小程序平台](http://tongji.aldwx.com/)\-管理-小程序列表-找到需要集成的小程序,复制对应小程序的 AppKey 到 exports.app\_key = ""; 的双引号中间;其次,需要将 exports.plugin 设置为 true 。 引号前后不能有空格;其他配置项请勿随意更改。 ![](http://aldpicsh.aldwx.com/doc_aldwx/xcxtj-mpvuecjbxcxkjjrzn03.png) 3、在小程序项目的根目录下打开 src 文件夹下的 main.js 文件,通过 import { MpvueApp } from '../static/sdk/ald-stat' 引入SDK;其次,在实例化 Vue 的时候调用MpvueApp 并以参数的形式传入。 复制下方代码并添加 ``` 1 import { MpvueApp } from '../static/sdk/ald-stat' //第一行添加此行代码 2 import Vue from 'vue' 3 import App from './App' 4 5 Vue.config.productionTip \= false 6 App.mpType \= 'app' 7 8 //实例化Vue的时候调用MpvueApp并以参数的形式传入 9 const app \= new Vue( MpvueApp(App) ) 10 app.$mount() ``` ![](http://aldpicsh.aldwx.com/doc_aldwx/xcxtj-mpvuecjbxcxkjjrzn04.png) 4、打开小程序根目录下 src 文件夹中 pages 文件下所有 main.js 结尾的文件,通过 import { MpvueApp } from '../static/sdk/ald-stat' 引入SDK,其次,在实例化Vue的时候调用 MpvuePage 并以参数的形式传入。 pages 文件下所有 main.js 结尾的文件都需要引入。 复制下方域名并添加 ``` 1 import { MpvuePage } from '../static/sdk/ald-stat' //第一行添加此行代码 2 import Vue from 'vue' 3 import App from './App' 4 5 //实例化Vue的时候调用MpvuePage并以参数的形式传入 6 const app \= new Vue( MpvuePage(App) ) 7 app.$mount() ``` ![](http://aldpicsh.aldwx.com/doc_aldwx/xcxtj-mpvuecjbxcxkjjrzn05.png) ## ## 三、检测上报状态 在微信开发者工具中,查看控制台中的 Network 是否存在 d.html 开头的请求,点击后可看到 log.aldwx.com 的域名信息,且 status 状态为 200。 ![](http://aldpicsh.aldwx.com/doc_aldwx/xcxtj-mpvuecjbxcxkjjrzn06.png) 验证成功后,将所有代码提交至微信审核,审核通过后需发布版本。 以上流程全部配置完成后了,表示小程序已经成功接入了阿拉丁统计平台。 如果遇到问题可以咨询您的同事(前端技术人员)或者咨询阿拉丁统计平台客服(微信ID:alddandan)。 ## **高级功能** 为了提高数据准确性,我们建议您上报 OpenID ,采用 OpenID 的方式进行计算。 [ 上报用户 OpenID ](https://docresource.aldwx.com/mini-program/join/sendopenid) 自定义事件是阿拉丁统计平台为开发者提供的自助分析功能。用户在小程序上的行为,我们定义为事件,可以帮助您更好的分析用户的关键行为,做到针对性运营。