uniapp多媒体组件及配置项

最新推荐文章于 2024-09-03 22:46:04 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_46314560/article/details/104835373

本文详细介绍了uniapp中的音频、图片和视频组件的常用属性，如音频的loop和controls，图片的mode属性，以及视频的autoplay和loop。此外，还阐述了uni-app的配置文件，包括全局配置、应用配置、条件编译、主题样式和主组件的用途，特别是tabBar配置和导航栏样式定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.audio音频

<view>
	<audio :src="audioSrc" controls></audio>
</view>

data:function() {
	return {
		audioSrc:"https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3"
	}
}

常用属性：

src 播放地址
loop 是否循环播放默认值false
controls 是否显示默认控件默认值false

二.image图片

<view>
	<image src="/static/img/shuijiao.jpg" style="width:50%;" mode="widthFix"></image>
</view>

常用属性：mode 图片裁剪、缩放的模式

mode有效值：4种缩放模式，9种裁剪模式
缩放：
scaleToFill 默认值，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素；
widthFix宽度不变，高度自动变化，保持原图宽高比不变

裁剪：
top不缩放图片，只显示图片的顶部区域
left不缩放图片，只显示图片的左边区域
top left不缩放图片，只显示图片的左上边区域

注：①<image> 组件默认宽度 300px、高度 225px；
②使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，设置 image{will-change: transform} ,可优化此问题

三.video视频

<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4" @error="videoErrorCallback" controls></video>

常用属性：

autoplay 是否自动播放默认值false
loop 是否循环播放默认值false
controls 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）默认值true

注：<video> 默认宽度 300px、高度 225px，可通过 css 设置宽高

四.配置

1.pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。

(1)pages.json中的tabBar
可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页
注：
①tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序
②tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad
③代码跳转到tabbar页面，api只能使用uni.switchTab，不能使用uni.navigateTo、uni.redirectTo；使用navigator组件跳转时必须设置open-type="switchTab"

(2)pages.json中的globalStyle

"globalStyle": {
	"navigationBarTextStyle": "black",
	"navigationBarTitleText": "uni-app",
	"navigationBarBackgroundColor": "#F8F8F8",
	"backgroundColor": "#F8F8F8",
}

navigationBarTextStyle：导航栏文字的样式
navigationBarTitleText：导航栏文字
navigationBarBackgroundColor：导航栏的背景颜色
backgroundColor：整个页面的背景颜色

2.manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等
3.package.json文件中增加uni-app扩展节点，可实现自定义条件编译平台
4.vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载
5.uni.scss文件是为了方便整体控制应用的风格。比如按钮颜色、边框风格
6.App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。
7.main.js是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex