Device — 设备能力

获取设备信息、系统信息、网络状态，以及调用相机、相册、扫码等硬件能力。

交互示例

设备信息查询

在文档中直接调用 getSystemInfo() 和 getDeviceInfo()，模拟器环境返回浏览器的真实设备数据。

<script setup lang="ts">
import { ref } from 'vue'
import woo from 'mini-sdk'

const systemInfo = ref<any>(null)
const deviceInfo = ref<any>(null)
const networkType = ref<string | null>(null)
const loading = ref(false)

async function getSystemInfo() {
  loading.value = true
  systemInfo.value = await woo.getSystemInfo()
  loading.value = false
}

async function getDeviceInfo() {
  loading.value = true
  deviceInfo.value = await woo.getDeviceInfo()
  loading.value = false
}

async function getNetwork() {
  const { networkType: nt } = await woo.getNetworkType()
  networkType.value = nt
}

async function vibrateShort() {
  await woo.vibrateShort()
}
</script>

<template>
  <div class="demo-device">
    <div class="btn-row">
      <button class="btn btn-primary" :disabled="loading" @click="getSystemInfo">getSystemInfo()</button>
      <button class="btn btn-outline" :disabled="loading" @click="getDeviceInfo">getDeviceInfo()</button>
      <button class="btn btn-outline" @click="getNetwork">getNetworkType()</button>
      <button class="btn btn-ghost" @click="vibrateShort">vibrateShort()</button>
    </div>

    <div v-if="networkType !== null" class="info-chip">
      网络类型：<strong>{{ networkType }}</strong>
    </div>

    <div v-if="systemInfo" class="info-grid">
      <div class="info-title">SystemInfo</div>
      <div v-for="(val, key) in systemInfo" :key="key" class="info-row">
        <span class="info-key">{{ key }}</span>
        <span class="info-val">{{ val }}</span>
      </div>
    </div>

    <div v-if="deviceInfo" class="info-grid">
      <div class="info-title">DeviceInfo</div>
      <div v-for="(val, key) in deviceInfo" :key="key" class="info-row">
        <span class="info-key">{{ key }}</span>
        <span class="info-val">{{ val }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.demo-device { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { padding: 7px 14px; border-radius: 6px; border: none; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: #6366f1; color: white; }
.btn-primary:hover:not(:disabled) { background: #4f46e5; }
.btn-outline { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); color: var(--vp-c-text-1); }
.btn-outline:hover:not(:disabled) { background: var(--vp-c-bg-soft); }
.btn-ghost { background: transparent; color: var(--vp-c-text-2); border: 1px dashed var(--vp-c-divider); }
.btn-ghost:hover { background: var(--vp-c-bg-soft); }
.info-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2); border-radius: 6px; font-size: 13px; color: #6366f1; }
.info-grid { border: 1px solid var(--vp-c-divider); border-radius: 8px; overflow: hidden; }
.info-title { padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vp-c-text-3); background: var(--vp-c-bg-soft); border-bottom: 1px solid var(--vp-c-divider); }
.info-row { display: flex; padding: 7px 14px; border-bottom: 1px solid var(--vp-c-divider); font-size: 12.5px; }
.info-row:last-child { border-bottom: none; }
.info-key { width: 140px; flex-shrink: 0; color: var(--vp-c-text-3); font-family: var(--vp-font-family-mono); }
.info-val { color: var(--vp-c-text-1); font-family: var(--vp-font-family-mono); }
</style>

API 参考

woo.getSystemInfo()

获取系统信息。

const info = await woo.getSystemInfo()
console.log(info.platform)      // 'ios' | 'android'
console.log(info.screenWidth)   // 393
console.log(info.pixelRatio)    // 3
console.log(info.SDKVersion)    // '1.0.0'

Result

字段	类型	说明
screenWidth	number	屏幕宽度（px）
screenHeight	number	屏幕高度（px）
windowWidth	number	可用窗口宽度（px）
windowHeight	number	可用窗口高度（px）
deviceName	string	设备型号名称
platform	'ios' | 'android'	平台
system	string	系统版本（如 'iOS 17.2'）
version	string	Mini-App 版本号
SDKVersion	string	SDK 版本号
pixelRatio	number	设备像素比
statusBarHeight	number	状态栏高度（px）

---

woo.getDeviceInfo()

获取设备详细信息，含唯一 ID、品牌、系统版本等。

const info = await woo.getDeviceInfo()
console.log(info.deviceId) // 设备唯一 ID
console.log(info.model)    // 'Pixel 8 Pro'
console.log(info.brand)    // 'Google'

---

woo.getDeviceId()

获取设备唯一 ID（轻量版，仅返回 ID）。

const { deviceId } = await woo.getDeviceId()
trackEvent('page_view', { deviceId })

---

woo.getAppInfo()

获取应用信息。

const info = await woo.getAppInfo()
console.log(info.appId)   // 'com.example.miniapp'
console.log(info.version) // '2.1.0'
console.log(info.env)     // 'simulator' | 'production'

---

woo.getNetworkType()

获取当前网络类型。

const { networkType } = await woo.getNetworkType()
// 'wifi' | '5g' | '4g' | '3g' | '2g' | 'unknown' | 'none'

---

woo.chooseImage(options?)

从相册或相机选择图片，默认超时 120 秒。

const result = await woo.chooseImage({
  count: 3,
  sizeType: ['compressed'],
  sourceType: ['album'],
})
console.log(result.tempFilePaths) // base64 DataURL 列表

Options

参数	类型	默认值	说明
count	number	9	最多选择数量
sizeType	('original' | 'compressed')[]	['original']	图片质量
sourceType	('album' | 'camera')[]	['album', 'camera']	来源

---

woo.takePhoto(options?)

调用相机拍照。

const result = await woo.takePhoto({ quality: 'high' })

---

woo.scanCode(options?)

扫描二维码 / 条形码。

const { result, scanType } = await woo.scanCode()
console.log(result)   // 'https://example.com'
console.log(scanType) // 'QR_CODE'

---

woo.vibrateShort() / woo.vibrateLong()

触发震动反馈。

await woo.vibrateShort() // 短震动（操作反馈）
await woo.vibrateLong()  // 长震动（提醒类）

---

woo.makePhoneCall(options)

拨打电话。

await woo.makePhoneCall({ phoneNumber: '010-12345678' })

---

woo.openMap(options)

打开地图导航。

await woo.openMap({
  latitude: 39.9042,
  longitude: 116.4074,
  name: '天安门广场',
  address: '北京市东城区天安门广场',
})

---

woo.setScreenOrientation(options) / woo.getScreenOrientation()

控制和查询屏幕方向。

await woo.setScreenOrientation({ orientation: 'landscape' })
const { orientation } = await woo.getScreenOrientation()

---

woo.onScreenOrientationChange(handler)

订阅屏幕方向变化事件，返回取消订阅函数。

const off = woo.onScreenOrientationChange(({ orientation }) => {
  if (orientation === 'landscape') enterFullscreen()
  else exitFullscreen()
})
// 页面销毁时取消订阅
off()