小程序 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 引入方式

// esm 引入方式 import { init } from './build/wx.esm';
import { init } from './build/wx.esm'

init({
  appKey: '您应用的唯一标识',
  dsn: '收数域名',
  debug: true, //开启调试日志
  version:'x.y.z' //设置应用版本号
})

commonjs 引入方式

// commonjs 引入方式如下
require('./build/wx.cjs');
App({
  umengConfig: {
    appKey: '您应用的唯一标识',
    dsn:'收数域名',
    debug: true, //开启调试日志
    version:'x.y.z' //设置应用版本号
  }
});

3.2 方式二命令式写法

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

// commonjs 引入方式如下
const uapm = require('./build/wx.cjs');
uapm.init({
  appKey: '您应用的唯一标识',
  dsn:'收数域名',
  debug: true, //开启调试日志
  version:'x.y.z' //设置应用版本号
});

4. 初始化参数说明

IFiler类型说明

pageFilter、errorFilter 和 apiFilter 均继承自 IFilter 接口，分别用于以下过滤目标：

• pageFilter：用于过滤页面路径（path）

• errorFilter：用于过滤堆栈信息

• apiFilter：用于过滤请求的 URL

您可以设置采集项的白名单或黑名单策略，二者选其一：

• 若选择白名单方式，则仅符合规则的页面会被采集

• 若选择黑名单方式，则符合规则的页面将被排除，不会被采集

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

RumConfig类型说明

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

实例方法说明

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

5. 案例

案例1

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

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

App({
  umengConfig: {
    appKey: '应用唯一标识',
    dsn:'收数域名',
    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: '应用唯一标识',
  dsn:'收数域名',
  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: '应用唯一标识',
  dsn: '收数域名',
  version:'x.y.z',
  pageFilter: {
    mode: "ignore", 
    rules: []
  },
});
// #endif

// #ifdef MP-ALIPAY
import { init } from "./alipay.esm";
init({
  appKey: '应用唯一标识',
  dsn: '收数域名',
  version:'x.y.z',
  pageFilter: {
    mode: "ignore", 
    rules: [] 
  },
});
// #endif

// #ifdef H5
import { init } from "./apm";
init({
  pageFilter: { mode: "ignore", rules: [] },
  pid: "H5应用唯一标识",
  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()