小程序SDK

已支持小程序平台

• 微信小程序
• 字节小程序
• 支付宝小程序
• 百度小程序
• 飞书小程序

已支持三方框架

• Taro
• Uni App

支持的插件

• PV插件
• JS错误插件
• 面包屑插件
• XHR监控插件
• 性能监控相关插件
• 页面性能监控插件
• 应用启动性能监控插件
• setData 监控插件

小程序SDK接入

步骤一：接入SDK

原生小程序接入

CJS（推荐）

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

1. 获取SDK。

• 微信平台SDK地址：CJS、ESM
• 抖音平台SDK地址：CJS、ESM
• 支付宝平台SDK地址：CJS、ESM
• 百度平台SDK地址：CJS、ESM
• 飞书平台SDK地址：CJS、ESM

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

1. 接入并初始化。

• 使用node module(require)方式集成，将以下内容添加至 app.js 文件中，完成初始化。

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

// App({...})

• 使用ES module(import)方式集成，将以下内容添加至 app.js 文件中，完成初始化。

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

// App({...})

NPM

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

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

• 微信小程序平台：WxAdapter
• 抖音小程序平台：TtAdapter
• 支付宝小程序平台：MyAdapter
• 百度小程序平台：SwanAdapter
• 飞书小程序平台：LarkAdapter

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

npm install @owl-js/mini-program

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

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

// App({...})

三方框架接入

NPM(推荐)

npm install @owl-js/mini-program

1. Taro

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

• 如果您的产物是一个平台，以微信小程序为例。将以下内容添加至 app.js 文件中以完成初始化。

// app.js
import { createMiniProgramClient, WxAdapter } from '@owl-js/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 '@owl-js/mini-program'
const client = createMiniProgramClient([WxAdapter])
export default client

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

// tt.js
import { createMiniProgramClient, TtAdapter } from '@owl-js/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 '@owl-js/mini-program';
const client = createMiniProgramClient([MyAdapter]);
if (client) {
  client.init({
    aid: 123, // 替换成您的aid
    token:'xxx-xxx' // 替换成您的token
    integrations: [FrameworksAdapterIntegration({ Taro })],
  });
  client.start();
}

2. Uni app

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

import { createMiniProgramClient, WxAdapter, TtAdapter } from '@owl-js/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版本不同导致环境变量名不同，需根据实际业务场景进行代码优化。