组件操控 Component

Component API 提供对页面内组件的程序化操控能力。

在线试用

playpauseseek(30)

createSelectorQuery → boundingClientRect

选择器结果将显示在下方

组件 API 试用

视频上下文与选择器查询；操作会在右下出现 SDK 日志，查询结果在下方

Vue

<script setup>
import { onMounted, ref } from 'vue'
import woo from 'mini-sdk'

const rect = ref(null)
let videoCtx

onMounted(() => {
  videoCtx = woo.createVideoContext('myVideo')

  const query = woo.createSelectorQuery()
  query.select('#box').boundingClientRect((res) => {
    rect.value = res
  })
  query.exec()
})
</script>

<template>
  <video id="myVideo" src="/demo.mp4" />
  <button @click="videoCtx.play()">播放</button>
  <button @click="videoCtx.pause()">暂停</button>
  <pre v-if="rect">{{ rect }}</pre>
</template>

React

import { useEffect, useRef, useState } from 'react'
import woo from 'mini-sdk'

function ComponentDemo() {
  const videoCtx = useRef(null)
  const [rect, setRect] = useState(null)

  useEffect(() => {
    videoCtx.current = woo.createVideoContext('myVideo')

    const query = woo.createSelectorQuery()
    query.select('#box').boundingClientRect((res) => {
      setRect(res)
    })
    query.exec()
  }, [])

  return (
    <>
      <video id="myVideo" src="/demo.mp4" />
      <button onClick={() => videoCtx.current?.play()}>播放</button>
      <button onClick={() => videoCtx.current?.pause()}>暂停</button>
      {rect && <pre>{JSON.stringify(rect, null, 2)}</pre>}
    </>
  )
}

导入

import woo from 'mini-sdk'
// 或
import { createVideoContext, createInputContext, createSelectorQuery } from 'mini-sdk'

createVideoContext

创建视频上下文，操控页面中的 <video> 组件。

const videoCtx = woo.createVideoContext(videoId: string)

VideoContext 方法

videoCtx.play()           // 播放
videoCtx.pause()          // 暂停
videoCtx.stop()           // 停止
videoCtx.seek(position)   // 跳转到指定位置（秒）
videoCtx.requestFullScreen()  // 全屏
videoCtx.exitFullScreen()     // 退出全屏

示例：

const videoCtx = woo.createVideoContext('myVideo')

// 播放
videoCtx.play()

// 跳转到第 30 秒
videoCtx.seek(30)

// 全屏播放
videoCtx.requestFullScreen()

createInputContext

创建输入框上下文，操控页面中的 <input> 组件。

const inputCtx = woo.createInputContext(inputId: string)

InputContext 方法

inputCtx.focus()   // 获取焦点
inputCtx.blur()    // 失去焦点

createSelectorQuery

创建选择器查询对象，用于获取节点信息。

const query = woo.createSelectorQuery()

SelectorQuery API

// 选择单个节点
query.select('#myElement')

// 选择所有匹配节点
query.selectAll('.item')

// 获取节点信息
const nodes = await query.select('#myElement').boundingClientRect()

// 获取滚动信息
const scroll = await query.select('#scrollView').scrollOffset()

NodeInfo 结构

interface NodeInfo {
  id: string
  dataset: Record<string, unknown>
  left: number
  right: number
  top: number
  bottom: number
  width: number
  height: number
}

完整示例：

Vue

<script setup>
import { onMounted, ref } from 'vue'
import woo from 'mini-sdk'

const nodeInfo = ref(null)

onMounted(async () => {
  const query = woo.createSelectorQuery()
  nodeInfo.value = await query.select('#banner').boundingClientRect()
})
</script>

<template>
  <div v-if="nodeInfo">
    <p>元素尺寸：{{ nodeInfo.width }} x {{ nodeInfo.height }}</p>
    <p>元素位置：({{ nodeInfo.left }}, {{ nodeInfo.top }})</p>
  </div>
</template>

React

import { useState, useEffect } from 'react'
import woo from 'mini-sdk'

function BannerInfo() {
  const [nodeInfo, setNodeInfo] = useState(null)

  useEffect(() => {
    ;(async () => {
      const query = woo.createSelectorQuery()
      const info = await query.select('#banner').boundingClientRect()
      setNodeInfo(info)
    })()
  }, [])

  if (!nodeInfo) return null
  return (
    <div>
      <p>元素尺寸：{nodeInfo.width} x {nodeInfo.height}</p>
      <p>元素位置：({nodeInfo.left}, {nodeInfo.top})</p>
    </div>
  )
}

API 速查表

方法	说明	签名
createVideoContext	创建视频上下文	(videoId) → VideoContext
createCanvasContext	创建画布上下文	(canvasId) → CanvasContext
createSelectorQuery	创建选择器查询	() → SelectorQuery
createIntersectionObserver	创建交叉观察器	(options?) → IntersectionObserver