audio
音频
常用属性说明(详情属性说明请戳)
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
id | String | audio 组件的唯一标识符 | |
src | String | 要播放音频的资源地址 | |
loop | Boolean | false | 是否循环播放 |
controls | Boolean | false | 是否显示默认控件 |
poster | String | 默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 | |
name | String | 未知音频 | 默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效 |
author | String | 未知作者 | 默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效 |
示例:
<template>
<view>
<view class="page-body">
<view class="page-section page-section-gap" style="text-align: center;">
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: {
poster: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.jpg',
name: '致爱丽丝',
author: '暂无',
src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3',
},
audioAction: {
method: 'pause'
}
}
}
}
</script>
camera
页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。
常用属性说明(详情属性说明请戳)
属性名 | 类型 | 默认值 | 说明 | 平台差异 |
---|---|---|---|---|
mode | String | normal | 有效值为 normal, scanCode | 微信小程序 |
device-position | String | back | 前置或后置,值为front, back | |
flash | String | auto | 闪光灯,值为auto, on, off |
注意:
- camera 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。
- 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。
- 同一页面只能插入一个 camera 组件。
- 相关API:createCameraContext
<template>
<view>
<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" @click="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" :src="src"></image>
</view>
</template>
<script>
export default {
data() {
return {
src:""
}
},
methods: {
takePhoto() {
const ctx = uni.createCameraContext();
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.src = res.tempImagePath
}
});
},
error(e) {
console.log(e.detail);
}
}
}
</script>
image
图片
属性名 | 类型 | 默认值 | 说明 | 平台差异 |
---|---|---|---|---|
src | String | 图片资源地址 | ||
mode | String | ‘scaleToFill’ | 图片裁剪、缩放的模式 | |
lazy-load | Boolean | false | 图片懒加载。只针对page与scroll-view下的image有效 | 微信小程序、App、百度小程序、头条小程序 |
fade-show | Boolean | true | 图片显示动画效果 | 仅App-nvue 2.3.4+ Android有效 |
@error | HandleEvent | 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: ‘something wrong’} | ||
@load | HandleEvent | 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’} |
注意:
<image>
组件默认宽度 300px、高度 225px;app-nvue平台,暂时默认为屏幕宽度
src
仅支持相对路径、绝对路径,支持 base64 码;- 页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置
image{will-change: transform}
,可优化此问题。 - 自定义组件里面使用
<image>
时,若src
使用相对路径可能出现路径查找失败的情况,故建议使用绝对路径。 - webp格式的图片,app-vue下,iOS不支持,Android支持;app-nvue下,iOS和Android均支持。app-vue下也支持gif。
mode 有效值:
mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。(传送门