文档中心

应用性能监控全链路版

SDK 接入

小程序 Pro SDK 接入

小程序 Pro SDK 接入

本文介绍小程序如何接入应用性能监控全链路版提供的SDK，直接使用平台上的产品及服务。

使用限制

不同地域的 SDK 请求地址各不相同，详细信息参见：开服地域中的客户端 SDK 接入地址。

步骤一：接入SDK

原生小程序接入

CJS（推荐）

相对于NPM，CJS接入方式省去构建NPM的步骤。

获取SDK。

微信平台SDK地址

抖音平台SDK地址

支付宝平台SDK地址

百度平台SDK地址

飞书平台SDK地址

将SDK地址下的内容复制并放在小程序/monitor/apmplus.js文件中。

接入并初始化。

使用node module(require)方式集成

将以下内容添加至app.js文件中，完成初始化。

// app.js
const client = require('./monitor/apmplus.js');
client.init({
aid: 123, // 替换成您的aid
token:'xxx-xxx' // 替换成您的token
})
client.start()

// App({...})

使用ES module(import)方式集成

将以下内容添加至app.js文件中，完成初始化。

// app.js
import client from './monitor/apmplus.js'
client.init({
aid: 123, // 替换成您的aid
token:'xxx-xxx' // 替换成您的token
})
client.start()

// App({...})

NPM

NPM方式接入SDK需要引入指定小程序的适配层。

所有平台的适配层如下所示：

微信小程序平台：WxAdapter

抖音小程序平台：TtAdapter

支付宝小程序平台：MyAdapter

百度小程序平台：SwanAdapter

飞书小程序平台：LarkAdapter

例如，在微信小程序平台则引入WxAdapter，可有效减少无用代码冗余。下面以微信小程序为例，介绍使用NPM方式接入SDK的步骤。

小程序接入NPM。

每个小程序平台都有各自NPM的接入方式，例如：微信小程序NPM接入指南。

安装NPM。

npm install @apmplus/mini-program

将以下代码添加到app.js文件中，接入并初始化。

// app.js
import { createMiniProgramClient, WxAdapter } from '@apmplus/mini-program'
const client = createMiniProgramClient([WxAdapter])
client.init({
aid: 123, // 替换成您的aid
token:'xxx-xxx' // 替换成您的token
})
client.start()

// App({...})

三方框架接入

NPM（推荐）

Taro

Taro支持产物为微信小程序、抖音小程序、支付宝小程序、百度小程序、飞书小程序。

如果您的产物是一个平台，以微信小程序为例。

将以下内容添加至app.js文件中以完成初始化。

// app.js
import { createMiniProgramClient, WxAdapter } from '@apmplus/mini-program';

const client = createMiniProgramClient([WxAdapter]);
if (client) {
client.init({
aid: 123, // 替换成您的aid
token:'xxx-xxx' // 替换成您的token
});
client.start();
}
// class App extends Component {

如果您的产物是多个平台，那么可以用环境变量TARO_ENV的方式按需引入正确的适配层。

例如您要编译两个端：微信小程序、抖音小程序的产物。

添加微信小程序对应的文件wx.js。

// wx.js
import { createMiniProgramClient, WxAdapter } from '@apmplus/mini-program'
const client = createMiniProgramClient([WxAdapter])
export default client

添加抖音小程序对应的文件tt.js。

// tt.js
import { createMiniProgramClient, TtAdapter } from '@apmplus/mini-program'
const client = createMiniProgramClient([TtAdapter])
export default client

在app.js中根据环境名TARO_ENV动态引入指定文件。

// app.js
let client
if (process.env.TARO_ENV === 'weapp') {
client = require('./wx').default
} else if (process.env.TARO_ENV === 'tt') {
client = require('./tt').default
}
if (client) {
client.init({
aid: 123, // 替换成您的aid
token:'xxx-xxx' // 替换成您的token
})
client.start()
}
// class App extends Component {

如果您的产物下包含支付宝小程序平台，则需要额外配置一个integration。

import Taro from '@tarojs/taro';
import { createMiniProgramClient, MyAdapter, FrameworksAdapterIntegration } from '@apmplus/mini-program';
const client = createMiniProgramClient([MyAdapter]);
if (client) {
client.init({
aid: 123, // 替换成您的aid
token:'xxx-xxx' // 替换成您的token
integrations: [FrameworksAdapterIntegration({ Taro })],
});
client.start();
}

Uni app

Uni app也支持产物为微信小程序、抖音小程序、支付宝小程序、百度小程序、飞书小程序。如果你的产物是多个平台，可以用条件编译按需引入正确的适配层，示例代码如下：

说明

Uni App版本不同导致环境变量名不同，需根据实际业务场景进行代码优化。

步骤二：设置合法域名

以下以微信小程序为例，介绍设置合法域名的详细操作步骤。

登录微信小程序后台。

在左侧导航栏，选择开发 > 开发管理。

单击开发设置页签，在服务器域名区域，单击修改。

在身份验证页面，管理员完成身份验证。

在配置服务器域名页面，request合法域名后输入https://apmplus.volces.com，然后单击保存并提交。

（可选）步骤三：详细配置

步骤四：验证上报

所有已接入的小程序平台可以使用以下方式验证是否成功接入SDK。

以微信小程序为例，介绍详细操作步骤。

登录微信小程序后台。

在左侧导航栏，选择开发者工具 > network。

观察页面请求触发的情况。

至少触发以下两个请求，表示接入成功，且稍等片刻后平台也会有对应数据展示。

注意事项

尽量将初始化SDK放到App初始化前，这样获取对开发者的可用信息更为全面。如果您需要等待某个接口下发后配置userId再进行上报，请参见API参考。

通过getSystemInfo获取的设备信息，在开发者工具调试时，上报的数据与线上(真机调试)有些差异，具体差异体现在：

mver：小程序版本

menv：小程序环境

model：设备型号

brand：设备品牌

最近更新时间：2026.02.10 19:56:19

这个页面对您有帮助吗？

有用

有用

无用

无用