mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,314 @@
|
||||
---
|
||||
name: Media Components
|
||||
description: Image, video, audio, and camera components
|
||||
---
|
||||
|
||||
# Media Components
|
||||
|
||||
## image
|
||||
|
||||
Display images with various mode options.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<!-- Basic usage -->
|
||||
<image src="/static/logo.png" mode="aspectFit" />
|
||||
|
||||
<!-- With event handling -->
|
||||
<image
|
||||
:src="imageUrl"
|
||||
mode="aspectFill"
|
||||
:lazy-load="true"
|
||||
:show-menu-by-longpress="true"
|
||||
@load="onImageLoad"
|
||||
@error="onImageError"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
**Properties:**
|
||||
|
||||
| Property | Type | Default | Description |
|
||||
|----------|------|---------|-------------|
|
||||
| src | String | | Image source URL |
|
||||
| mode | String | scaleToFill | Display mode (see below) |
|
||||
| lazy-load | Boolean | false | Lazy load image |
|
||||
| show-menu-by-longpress | Boolean | false | Show menu on long press |
|
||||
| webp | Boolean | false | Parse WebP format (Android) |
|
||||
|
||||
**Mode Values:**
|
||||
|
||||
| Mode | Description |
|
||||
|------|-------------|
|
||||
| scaleToFill | Fill container, may distort |
|
||||
| aspectFit | Contain within container |
|
||||
| aspectFill | Cover container, may clip |
|
||||
| widthFix | Width fixed, height auto |
|
||||
| heightFix | Height fixed, width auto |
|
||||
| top / bottom / center / left / right | Align to position |
|
||||
| top left / top right / bottom left / bottom right | Corner alignment |
|
||||
|
||||
**Events:**
|
||||
- `@load` - Image loaded successfully
|
||||
- `@error` - Image failed to load
|
||||
|
||||
## video
|
||||
|
||||
Video player component.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<video
|
||||
id="myVideo"
|
||||
src="https://example.com/video.mp4"
|
||||
:controls="true"
|
||||
:autoplay="false"
|
||||
:loop="false"
|
||||
:muted="false"
|
||||
initial-time="30"
|
||||
:duration="300"
|
||||
poster="/static/poster.jpg"
|
||||
object-fit="contain"
|
||||
@play="onPlay"
|
||||
@pause="onPause"
|
||||
@ended="onEnded"
|
||||
@timeupdate="onTimeUpdate"
|
||||
@fullscreenchange="onFullscreenChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady() {
|
||||
this.videoContext = uni.createVideoContext('myVideo')
|
||||
},
|
||||
methods: {
|
||||
play() {
|
||||
this.videoContext.play()
|
||||
},
|
||||
pause() {
|
||||
this.videoContext.pause()
|
||||
},
|
||||
seek(time) {
|
||||
this.videoContext.seek(time)
|
||||
},
|
||||
sendDanmu(danmu) {
|
||||
this.videoContext.sendDanmu({
|
||||
text: danmu.text,
|
||||
color: danmu.color
|
||||
})
|
||||
},
|
||||
playbackRate(rate) {
|
||||
this.videoContext.playbackRate(rate)
|
||||
},
|
||||
onFullscreenChange(e) {
|
||||
console.log('Fullscreen:', e.detail.fullScreen)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
**Properties:**
|
||||
|
||||
| Property | Type | Default | Description |
|
||||
|----------|------|---------|-------------|
|
||||
| src | String | | Video source URL |
|
||||
| controls | Boolean | true | Show controls |
|
||||
| autoplay | Boolean | false | Auto play |
|
||||
| loop | Boolean | false | Loop playback |
|
||||
| muted | Boolean | false | Muted |
|
||||
| initial-time | Number | 0 | Start time (s) |
|
||||
| duration | Number | | Total duration (s) |
|
||||
| poster | String | | Poster image URL |
|
||||
| object-fit | String | contain | contain/cover/fill |
|
||||
| danmu-list | Array | | Danmu list |
|
||||
| danmu-btn | Boolean | false | Show danmu button |
|
||||
| enable-danmu | Boolean | false | Enable danmu |
|
||||
| show-center-play-btn | Boolean | true | Show center play button |
|
||||
| show-play-btn | Boolean | true | Show play button |
|
||||
| show-fullscreen-btn | Boolean | true | Show fullscreen button |
|
||||
| page-gesture | Boolean | false | Enable page gesture |
|
||||
| enable-progress-gesture | Boolean | true | Enable progress gesture |
|
||||
|
||||
## audio
|
||||
|
||||
Audio player (deprecated, use `uni.getBackgroundAudioManager` instead).
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<audio
|
||||
:src="audioSrc"
|
||||
:poster="posterUrl"
|
||||
:name="audioName"
|
||||
:author="author"
|
||||
:controls="true"
|
||||
:loop="false"
|
||||
@play="onPlay"
|
||||
@pause="onPause"
|
||||
@ended="onEnded"
|
||||
@timeupdate="onTimeUpdate"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
## camera
|
||||
|
||||
Camera component for capturing photos/videos.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<camera
|
||||
device-position="back"
|
||||
flash="auto"
|
||||
resolution="high"
|
||||
frame-size="large"
|
||||
@stop="onCameraStop"
|
||||
@error="onCameraError"
|
||||
@initdone="onCameraReady"
|
||||
/>
|
||||
<button @click="takePhoto">Take Photo</button>
|
||||
<button @click="startRecord">Start Record</button>
|
||||
<button @click="stopRecord">Stop Record</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady() {
|
||||
this.cameraContext = uni.createCameraContext()
|
||||
},
|
||||
methods: {
|
||||
takePhoto() {
|
||||
this.cameraContext.takePhoto({
|
||||
quality: 'high',
|
||||
success: (res) => {
|
||||
console.log(res.tempImagePath)
|
||||
}
|
||||
})
|
||||
},
|
||||
startRecord() {
|
||||
this.cameraContext.startRecord({
|
||||
success: () => console.log('Recording started')
|
||||
})
|
||||
},
|
||||
stopRecord() {
|
||||
this.cameraContext.stopRecord({
|
||||
success: (res) => {
|
||||
console.log(res.tempVideoPath)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
**Properties:**
|
||||
|
||||
| Property | Type | Default | Description |
|
||||
|----------|------|---------|-------------|
|
||||
| mode | String | normal | normal/scanCode |
|
||||
| resolution | String | medium | low/medium/high |
|
||||
| device-position | String | back | front/back |
|
||||
| flash | String | auto | auto/on/off |
|
||||
| frame-size | String | large | small/medium/large |
|
||||
|
||||
## live-player / live-pusher
|
||||
|
||||
Live streaming components (mini-program only).
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<!-- Live player -->
|
||||
<live-player
|
||||
src="rtmp://example.com/live/stream"
|
||||
mode="live"
|
||||
:autoplay="true"
|
||||
:muted="false"
|
||||
orientation="vertical"
|
||||
object-fit="contain"
|
||||
@statechange="onStateChange"
|
||||
@error="onError"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
## map
|
||||
|
||||
Map component for displaying maps and markers.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<map
|
||||
id="myMap"
|
||||
style="width: 100%; height: 300px;"
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:scale="14"
|
||||
:markers="markers"
|
||||
:polyline="polyline"
|
||||
:circles="circles"
|
||||
:controls="controls"
|
||||
:show-location="true"
|
||||
@markertap="onMarkerTap"
|
||||
@regionchange="onRegionChange"
|
||||
@tap="onMapTap"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
markers: [{
|
||||
id: 1,
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
title: 'Marker 1',
|
||||
iconPath: '/static/marker.png',
|
||||
width: 30,
|
||||
height: 30
|
||||
}],
|
||||
polyline: [{
|
||||
points: [
|
||||
{ latitude: 39.909, longitude: 116.39742 },
|
||||
{ latitude: 39.91, longitude: 116.4 }
|
||||
],
|
||||
color: '#FF0000',
|
||||
width: 2
|
||||
}]
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.mapContext = uni.createMapContext('myMap')
|
||||
},
|
||||
methods: {
|
||||
moveToLocation() {
|
||||
this.mapContext.moveToLocation({
|
||||
latitude: 39.91,
|
||||
longitude: 116.4
|
||||
})
|
||||
},
|
||||
getCenterLocation() {
|
||||
this.mapContext.getCenterLocation({
|
||||
success: (res) => {
|
||||
console.log(res.latitude, res.longitude)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://gitcode.com/dcloud/unidocs-zh/blob/main/docs/component/image.md
|
||||
- https://gitcode.com/dcloud/unidocs-zh/blob/main/docs/component/video.md
|
||||
- https://gitcode.com/dcloud/unidocs-zh/blob/main/docs/component/audio.md
|
||||
- https://gitcode.com/dcloud/unidocs-zh/blob/main/docs/component/camera.md
|
||||
- https://gitcode.com/dcloud/unidocs-zh/blob/main/docs/component/live-player.md
|
||||
- https://gitcode.com/dcloud/unidocs-zh/blob/main/docs/component/map.md
|
||||
-->
|
||||
Reference in New Issue
Block a user