npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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 步:

  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