小程序 SDK

SDK接入流程概览

在集成前需要先获取appKey。

1. 下载SDK

下载SDK安装包，解压ZIP包后放到小程序源码工程中，以备引用。

• 支付宝小程序下载地址

• 微信小程序下载地址

2. 开发配置

2.1 微信小程序后台配置

1. 添加微信小程序域名白名单，（域名白名单为apm服务部署的收数域名）。

   操作入口：开发管理->开发设置-> 服务器域名->修改->填写request合法域名

   在微信中操作如下图所示：

2. 
3. 
4. 

2. 若暂时无法配置域名白名单，开发阶段可先在小程序编辑器的面板中勾选不校验合法域名。

   操作步骤如下图所示：

2.2 支付宝配置

1. 设置域名白名单（域名白名单为apm服务部署的收数域名）。

2. 若暂时无法配置域名白名单，开发阶段可先在小程序编辑器的面板中勾选不校验合法域名。

3. SDK集成

在app.js顶部开始位置引用第1步下载的sdk,集成方式支付宝和微信相同,微信引用wx开头的文件，支付引用alipay开头的文件，按照下面的方式来集成。

如图所示,其中cjs为commonjs 封包，一般在原生小程序中通过require引用，esm为es模块封包，一般使用import来引用，开发者根据自己的业务情况选择何时的引入方式。

3.1 方式一声明式写法，适用于原生小程序开发

// esm 引入方式 import { init } from './build/wx.esm'; // commonjs 引入方式如下 require('./build/wx.cjs'); App({ umengConfig: { appKey: 'xxxxxx', dsn:'https://example.com', debug: true, version:'x.y.z' } });

3.2 方式二命令式写法

适用于uni-app、taro等三方框架

// esm 引入方式 import { init } from './build/wx.esm'; // commonjs 引入方式如下 const uapm = require('./build/wx.cjs'); uapm.init({ appKey: 'xxxxxx', dsn:'https://example.com', debug: true, version:'x.y.z' });

4. 初始化参数说明

IFiler类型说明：

黑白名单设置pageFilter errorFilter apiFilter 继承自IFilter，过滤目标分别是：pageFilter页面path，errorFilter为堆栈内容，apiFilter为请求的url。

用于设置采集的项的黑白名单，可以在黑名单和白名单中选择其一，如果选择白名单的方式，那么只有符合标准的页面会被采集，如果选择的是黑名单的方式，那么符合标准的页面不会被采集。

此项非必须参数，用于判断是否过滤日志，包含如下属性。

实例方法说明

当引入SDK初始化后会在全局挂载实例$umapm对象，可分别通过wx.$umapm my.$umapm 调用以下方法。

5. 案例

案例1

支持App umengConfig自定义属性设置配置参数：

// wechat
const umapm = require('./wx.cjs');

App({
 umengConfig: {
 appKey: 'APPKEY',
 dsn:'https://example.com',
 debug: true,
 version:'x.y.z'
 debug: true,
 	pageFilter: {
 mode: 'match',
 rules: ['/home']
 }
 },
 onLaunch: function () {
 wx.request({
 url: "https://xxx/getUserId",
 method: "post",
 success: (res) => {
 	 wx.$umapm.setUserid(res.data.userid);
				}
 })
 }
});

案例2

支持实例init方法配置初始化：

// wechat
var umapm = require('./wx.cjs');
umapm.init({
 appKey: 'APPKEY',
 dsn:'https://example.com',
 debug: true,
 version:'x.y.z'
 debug: true,
 	pageFilter: {
 mode: 'match',
 rules: ['/home']
 }
});

App({
 onLaunch: function () {
 	 wx.request({
 url: "https://xxx/getUserId",
 method: "post",
 success: (res) => {
 wx.$umapm.setUserid(res.data.userid);
 }
 });
 }
});

案例3

uni-app框架下利用条件编译集成SDK：

// 初始化的参数配置
// #ifdef MP-WEIXIN
import { init } from "./wx.esm";
init({
 appKey: 'APPKEY',
 dsn:'https://example.com',
 version:'x.y.z'
 pageFilter: { mode: "ignore", rules: [] },
});
// #endif

// #ifdef MP-ALIPAY
import { init } from "./alipay.esm";
init({
 appKey: 'APPKEY',
 dsn:'https://example.com',
 version:'x.y.z'
 pageFilter: { mode: "ignore", rules: [] },
});
// #endif

// #ifdef H5
import { init } from "./apm";
init({
 pageFilter: { mode: "ignore", rules: [] },
 pid: "appkey",
 logLevel:3,
});
// #endif

在main.js中引入uapm.js

import Vue from 'vue'
import App from './App'
import './uapm';

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
 ...App
})
app.$mount()