# uni-app 中使用小程序 SDK

## 说明

* Miku Delivery 小程序 SDK 为小程序自定义组件形式，由于不同小程序平台的能力/行为存在差异，目前为微信、抖音、快手小程序提供了不同的 SDK。
* uni-app 项目中使用小程序自定义组件请参考 uni-app 官方文档 [小程序自定义组件支持](https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject.html)。
* 请先阅读 SDK 使用文档（`README.md`），除以下步骤外，其它用法及注意事项是一致的。

## 安装

uni-app 对小程序组件存放目录有特殊约定，请查阅官方文档。

```shell
# 微信小程序
npm install @qiniu/miku-delivery-mp --save
mkdir wxcomponents
cp -r node_modules/@qiniu/miku-delivery-mp/dist ./wxcomponents/miku-delivery

# 抖音小程序
npm install @qiniu/miku-delivery-mp-tt --save
mkdir ttcomponents
cp -r node_modules/@qiniu/miku-delivery-mp-tt/dist ./ttcomponents/miku-delivery

# 快手小程序
npm install @qiniu/miku-delivery-mp-ks --save
mkdir kscomponents
cp -r node_modules/@qiniu/miku-delivery-mp-ks/dist ./kscomponents/miku-delivery
```

## 使用

使用 Miku Delivery SDK 分为 2 步：

1. 在小程序启动时初始化 SDK
2. 替换界面上的媒体组件

### 1. 在小程序启动时初始化 SDK

在小程序 App 的 `onLaunch` 回调中（一般位于 `App.vue` 文件）初始化：

```js
export default {

  onLaunch: function() {
    // 用 __non_webpack_require__ 生成一个不会被 webpack 解析的 require，然后使用小程序的 require 动态加载 SDK 入口文件
    // 这段代码编译完会出现在小程序代码的 common/main.js 里，SDK 入口文件需要写运行时的相对路径
    // #ifdef MP-WEIXIN
    const mikuDelivery = __non_webpack_require__('../wxcomponents/miku-delivery/index.js')
    // #endif
    // #ifdef MP-TOUTIAO
    const mikuDelivery = __non_webpack_require__('../ttcomponents/miku-delivery/index.js')
    // #endif
    // #ifdef MP-KUAISHOU
    const mikuDelivery = __non_webpack_require__('../kscomponents/miku-delivery/index.js')
    // #endif

    mikuDelivery.init({
      /** Miku 应用信息 */
      app: { appID: '<APP_ID>', appSalt: '<APP_SALT>' },
      /** 需要被代理的域名列表 */
      domains: ['proxy-example.com']
    })
  }
}
```

### 2. 替换界面上的媒体组件

对于基础媒体组件 `image` & `video`，Miku Delivery SDK 提供了与之对应的组件；这里以视频（`video`）为例：

编辑 uni-app 项目的 `pages.json`，在使用视频（`video`）的页面对应的 `style` 中添加

```
"usingComponents": {
    // #ifdef MP-WEIXIN
    "md-video": "/wxcomponents/miku-delivery/components/video"
    // #endif
    // #ifdef MP-TOUTIAO
    "md-video": "/ttcomponents/miku-delivery/components/video"
    // #endif
    // #ifdef MP-KUAISHOU
    "md-video": "/kscomponents/miku-delivery/components/video"
    // #endif
}
```

在页面对应的 vue 文件中将 `video` 替换为 `md-video` 即可，详见 `README.md`