You need to enable JavaScript to run this app.
导航

小程序Pro SDK接入

最近更新时间2023.08.31 14:40:10

首次发布时间2022.09.01 16:20:36

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

使用限制

目前SDK仅限中国地区应用使用(不包括港澳台地区)。

步骤一:接入SDK

原生小程序接入

CJS(推荐)

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

  1. 获取SDK。
  2. 接入并初始化。
    • 使用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的步骤。

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

  2. 安装NPM。

    npm install @apmplus/mini-program
    
  3. 将以下代码添加到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(推荐)

npm install @apmplus/mini-program

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的方式按需引入正确的适配层。
    例如您要编译两个端:微信小程序、抖音小程序的产物。

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

      // wx.js
      import { createMiniProgramClient, WxAdapter } from '@apmplus/mini-program'
      const client = createMiniProgramClient([WxAdapter])
      export default client
      
    2. 添加抖音小程序对应的文件tt.js

      // tt.js
      import { createMiniProgramClient, TtAdapter } from '@apmplus/mini-program'
      const client = createMiniProgramClient([TtAdapter])
      export default client
      
    3. 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也支持产物为微信小程序、抖音小程序、支付宝小程序、百度小程序、飞书小程序。如果你的产物是多个平台,可以用条件编译按需引入正确的适配层,示例代码如下:

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. 登录微信小程序后台
  2. 在左侧导航栏,选择开发 > 开发管理
  3. 单击开发设置页签,在服务器域名区域,单击修改。
  4. 身份验证页面,管理员完成身份验证。
  5. 配置服务器域名页面,request合法域名后输入https://apmplus.volces.com,然后单击保存并提交
    图片

(可选)步骤三:详细配置

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. 登录微信小程序后台
  2. 在左侧导航栏,选择开发者工具 > network
  3. 观察页面请求触发的情况。
    至少触发以下两个请求,表示接入成功,且稍等片刻后平台也会有对应数据展示。
    图片

注意事项

  • 尽量将初始化SDK放到App初始化前,这样获取对开发者的可用信息更为全面。如果您需要等待某个接口下发后配置userId再进行上报,请参见API参考
  • 通过getSystemInfo获取的设备信息,在开发者工具调试时,上报的数据与线上(真机调试)有些差异,具体差异体现在:
    • mver:小程序版本
    • menv:小程序环境
    • model:设备型号
    • brand:设备品牌