npm package: @owl-js/mini-program
Description: * 微信小程序 * 字节小程序 * 支付宝小程序 * 百度小程序 * 飞书小程序
Author: codeteenager
Latest version: 1.0.1

# 小程序SDK

### 已支持小程序平台
* 微信小程序
* 字节小程序
* 支付宝小程序
* 百度小程序
* 飞书小程序

### 已支持三方框架
* Taro
* Uni App

### 支持的插件
* PV插件
* JS错误插件
* 面包屑插件
* XHR监控插件
* 性能监控相关插件
* 页面性能监控插件
* 应用启动性能监控插件
* setData 监控插件

## 小程序SDK接入

### 步骤一：接入SDK

#### 原生小程序接入
##### CJS（推荐）
相对于NPM，CJS接入方式省去构建NPM的步骤。

1. 获取SDK。

* 微信平台SDK地址：[CJS](https://www.unpkg.com/@owl-js/mini-program@latest/lib/wx.cjs.js)、[ESM](https://www.unpkg.com/@owl-js/mini-program@latest/lib/wx.esm.js)
* 抖音平台SDK地址：[CJS](https://www.unpkg.com/@owl-js/mini-program@latest/lib/tt.cjs.js)、[ESM](https://www.unpkg.com/@owl-js/mini-program@latest/lib/tt.esm.js)
* 支付宝平台SDK地址：[CJS](https://www.unpkg.com/@owl-js/mini-program@latest/lib/my.cjs.js)、[ESM](https://www.unpkg.com/@owl-js/mini-program@latest/lib/my.esm.js)
* 百度平台SDK地址：[CJS](https://www.unpkg.com/@owl-js/mini-program@latest/lib/swan.cjs.js)、[ESM](https://www.unpkg.com/@owl-js/mini-program@latest/lib/swan.esm.js)
* 飞书平台SDK地址：[CJS](https://www.unpkg.com/@owl-js/mini-program@latest/lib/lark.cjs.js)、[ESM](https://www.unpkg.com/@owl-js/mini-program@latest/lib/lark.esm.js)
<!-- * [钉钉平台SDK地址]() -->

将SDK地址下的内容复制并放在 `小程序/monitor/index.js` 文件中。

1. 接入并初始化。

* 使用node module(require)方式集成，将以下内容添加至 app.js 文件中，完成初始化。

```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 文件中，完成初始化。

```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接入指南](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html) 。
2. 安装NPM。

```shell
npm install @owl-js/mini-program
```

3. 将以下代码添加到app.js文件中，接入并初始化。

```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(推荐)
```shell
npm install @owl-js/mini-program
```

1. Taro

Taro支持产物为微信小程序、抖音小程序、支付宝小程序、百度小程序

* 如果您的产物是一个平台，以微信小程序为例。将以下内容添加至 app.js 文件中以完成初始化。
```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。

```js
// wx.js
import { createMiniProgramClient, WxAdapter } from '@owl-js/mini-program'
const client = createMiniProgramClient([WxAdapter])
export default client
```

2. 添加抖音小程序对应的文件tt.js。

```js
// tt.js
import { createMiniProgramClient, TtAdapter } from '@owl-js/mini-program'
const client = createMiniProgramClient([TtAdapter])
export default client
```

3. 在app.js中根据环境名TARO_ENV动态引入指定文件。

```js
// 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。
  
```js
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也支持产物为微信小程序、抖音小程序、支付宝小程序、百度小程序。如果你的产物是多个平台，可以用条件编译按需引入正确的适配层，示例代码如下：

```js
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版本不同导致环境变量名不同，需根据实际业务场景进行代码优化。