Quick Tracking：小程式 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()