@qiniu/miku-delivery-mp
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

Miku 微信小程序 SDK 文档

安装

npm install @qiniu/miku-delivery-mp --save

关于小程序中使用 npm 安装第三方包的注意事项,详见 npm 支持

注意事项

在使用前,需要在小程序管理后台( https://mp.weixin.qq.com/ )进行如下配置:

  • “开发/开发管理/开发设置/服务器域名/”页面,向“request合法域名”中添加

    https://api.qiniudns.com;
    

使用

使用 Miku Delivery SDK 分为 2 步:

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

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

在小程序的 App 定义处(一般是 app.js)引入 SDK 并在 App onLaunch 回调中初始化:

import { init as initMD } from '@qiniu/miku-delivery-mp'

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

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

对于基础媒体组件 image & video,Miku Delivery SDK 提供了与之对应的组件;这里以视频(video)为例:

在使用视频(video)的页面对应的 json 文件中添加

{
  "usingComponents": {
    "md-video": "@qiniu/miku-delivery-mp/components/video"
  }
}

在页面对应的 wxml 文件中,将

<video src="..."><video>

替换为

<md-video src="..."><md-video>

即可(<md-video><video> 的属性、事件均一致);如果该视频 src 对应的域名出现在上面初始化 SDK 时指定的 domains 中,则该视频资源会被 SDK 代理;若视频 src 对应的域名不在初始化 SDK 时指定的 domains 中,则 SDK 不会对该资源进行代理,即,此时 <md-video> 的行为等价于 <video>

通过 VideoContext 操作对应的 video 组件

上面提到,<md-video><video> 的属性、事件均一致;不过如果要通过 VideoContext 操作对应的 video 组件,这里需调整获取 VideoContext 实例的姿势:

首先给 <md-video> 添加 id(如 video-1):

<md-video id="video-1" src="..."><md-video>

然后通过 selectComponent 获取到组件的导出:

let mdVideo = this.selectComponent('#video-1')

通过组件实例(mdVideo)上的 getVideoContext 方法即可得到对应的 VideoContext 实例,如:

let videoContext = mdVideo.getVideoContext()
videoContext.play()

即可控制视频开始播放。

API Reference

/** 初始化 SDK */
async function init(
  /** 初始化配置 */
  config: InitConfig
): Promise<void>

/** SDK 初始化配置信息 */
export type InitConfig = {
  /** 应用信息 */
  app: AppInfo
  /** 需要被代理的域名列表 */
  domains: string[]
  /** 开启 debug 模式 */
  debug?: boolean
}

/** App 信息 */
type AppInfo = {
  appID: string
  appSalt: string
}

/** 组件 @qiniu/miku-delivery-mp/components/video */
// 同 video,见 https://developers.weixin.qq.com/miniprogram/dev/component/video.html

/** 组件 @qiniu/miku-delivery-mp/components/image */
// 同 image,见 https://developers.weixin.qq.com/miniprogram/dev/component/image.html

Package Sidebar

Install

npm i @qiniu/miku-delivery-mp

Weekly Downloads

31

Version

1.2.1

License

UNLICENSED

Unpacked Size

272 kB

Total Files

100

Last publish

Collaborators

  • cn0809
  • liaoyu
  • qiniu-pkg
  • nighca
  • lzfee0227