小程序SDK接入

步骤一：接入SDK

原生小程序接入

CJS（推荐）

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

获取SDK。

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

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

接入并初始化。

使用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

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

shell

npm install @owl-js/mini-program

将以下代码添加到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(推荐)

shell

npm install @owl-js/mini-program

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

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

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

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

// tt.js
import { createMiniProgramClient, TtAdapter } from '@owl-js/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 '@owl-js/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 '@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()
}

TIP

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

小程序SDK接入 ​

步骤一：接入SDK ​

原生小程序接入 ​

CJS（推荐） ​

NPM ​

三方框架接入 ​

NPM(推荐) ​

Taro ​

Uni app ​