本文介绍小程序如何接入应用性能监控全链路版提供的SDK，直接使用平台上的产品及服务。 ## 使用限制不同地域的 SDK 请求地址各不相同，详细信息参见：[开服地域](https://www.volcengine.com/docs/6431/1339362) 中的客户端 SDK 接入地址。 ## 步骤一：接入SDK ### 原生小程序接入 #### CJS（推荐）相对于NPM，CJS接入方式省去构建NPM的步骤。 1. 获取SDK。 * [微信平台SDK地址](https://apm.volccdn.com/mars-web/apmplus/mini_program/wx.cn.cjs.js) * [抖音平台SDK地址](https://apm.volccdn.com/mars-web/apmplus/mini_program/tt.cn.cjs.js) * [支付宝平台SDK地址](https://apm.volccdn.com/mars-web/apmplus/mini_program/my.cn.cjs.js) * [百度平台SDK地址](https://apm.volccdn.com/mars-web/apmplus/mini_program/swan.cn.cjs.js) * [飞书平台SDK地址](https://apm.volccdn.com/mars-web/apmplus/mini_program/lark.cn.cjs.js) 将SDK地址下的内容复制并放在`小程序/monitor/apmplus.js`文件中。 2. 接入并初始化。 * 使用node module(require)方式集成将以下内容添加至`app.js`文件中，完成初始化。 ```JavaScript // 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`文件中，完成初始化。 ```javascript // 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的步骤。 1. 小程序接入NPM。每个小程序平台都有各自NPM的接入方式，例如：[微信小程序NPM接入指南](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)。 2. 安装NPM。 ```Bash npm install @apmplus/mini-program ``` 3. 将以下代码添加到`app.js`文件中，接入并初始化。 ```JavaScript // 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（推荐） ```bash npm install @apmplus/mini-program ``` #### Taro Taro支持产物为微信小程序、抖音小程序、支付宝小程序、百度小程序、飞书小程序。 * 如果您的产物是一个平台，以**微信小程序**为例。将以下内容添加至`app.js`文件中以完成初始化。 ```javascript // 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的方式](https://taro-docs.jd.com/docs/envs#processenvtaro_env)按需引入正确的适配层。例如您要编译两个端：微信小程序、抖音小程序的产物。 1. 添加微信小程序对应的文件`wx.js`。 ```javascript // wx.js import { createMiniProgramClient, WxAdapter } from '@apmplus/mini-program' const client = createMiniProgramClient([WxAdapter]) export default client ``` 2. 添加抖音小程序对应的文件`tt.js`。 ```typescript // tt.js import { createMiniProgramClient, TtAdapter } from '@apmplus/mini-program' const client = createMiniProgramClient([TtAdapter]) export default client ``` 3. 在`app.js`中根据环境名TARO_ENV动态引入指定文件。 ```javascript // 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**。 ```javascript 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也支持产物为微信小程序、抖音小程序、支付宝小程序、百度小程序、飞书小程序。如果你的产物是**多个平台**，可以用[条件编译](https://uniapp.dcloud.net.cn/tutorial/platform.html#preprocessor)按需引入正确的适配层，示例代码如下： ```javascript import { createMiniProgramClient, WxAdapter, TtAdapter } from '@apmplus/mini-program' const getCorrectAdapter = () => { switch (process.env.VUE_APP_PLATFORM) { case 'mp-weixin': return [WxAdapter] case 'mp-toutiao': return [TtAdapter] default: return null } } const client = createMiniProgramClient(getCorrectAdapter()) if (client) { client.init({ aid: 123, // 替换成您的aid token:'xxx-xxx' // 替换成您的token }) client.start() } ```

说明

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

## 步骤二：设置合法域名以下以微信小程序为例，介绍设置合法域名的详细操作步骤。 1. 登录[微信小程序后台](https://mp.weixin.qq.com/)。 2. 在左侧导航栏，选择**开发 \> 开发管理**。 3. 单击**开发设置**页签，在**服务器域名**区域，单击**修改。** 4. 在**身份验证**页面，管理员完成身份验证。 5. 在**配置服务器域名**页面，**request合法域名**后输入**https://apmplus.volces.com**，然后单击**保存并提交**。 ![图片](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_537f4c9deccc3ad11973ab6edeea752f.png) ## （可选）步骤三：详细配置 ```JavaScript export type InitOptions = { aid: number // 应用ID，必填参数 token: string // 应用 token，必填参数 userId?: string // 手动用户ID deviceId?: string // 设备ID useLocalConfig?: boolean = false // 是否使用本地配置，若设置为true，则不拉取平台配置的采样 domain?: string // 私有化部署方式必填，填写部署的域名 plugins?: Plugins // 插件配置详情见「配置插件」文档 integrations?: Integration[] // 集成配置，在兼容Taro支付宝小程序时用到，详情见「按需加载集成」文档 } ``` ## 步骤四：验证上报所有已接入的小程序平台可以使用以下方式验证是否成功接入SDK。以微信小程序为例，介绍详细操作步骤。 1. 登录[微信小程序后台](https://mp.weixin.qq.com/)。 2. 在左侧导航栏，选择**开发者工具 \> network**。 3. 观察页面请求触发的情况。至少触发以下两个请求，表示接入成功，且稍等片刻后平台也会有对应数据展示。 ![图片](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_674558cdafc8426e5b7fd8e8b93a4b71.png) ### 注意事项 * 尽量将初始化SDK放到App初始化前，这样获取对开发者的可用信息更为全面。如果您需要等待某个接口下发后配置userId再进行上报，请参见[API参考](https://www.volcengine.com/docs/6431/133880)。 * 通过getSystemInfo获取的设备信息，在开发者工具调试时，上报的数据与线上(真机调试)有些差异，具体差异体现在： * mver：小程序版本 * menv：小程序环境 * model：设备型号 * brand：设备品牌