@qiniu/miku-delivery-mp
v1.2.1
Published
Mini Program SDK for Miku Delivery
Downloads
117
Readme
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 步:
- 在小程序启动时初始化 SDK
- 替换界面上的媒体组件
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