New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@qiniu/miku-delivery-mp

Package Overview
Dependencies
Maintainers
5
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@qiniu/miku-delivery-mp

Mini Program SDK for Miku Delivery

  • 1.2.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
5
Created
Source

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

Keywords

FAQs

Package last updated on 26 Feb 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc