uniapp多媒体组件及配置项_!L的博客-程序员宅基地

一.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%[email protected]" @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

本文链接：https://blog.csdn.net/weixin_46314560/article/details/104835373

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

android录制amr音频文件,android – 以AMR文件格式录制音频_weixin_39923137的博客-程序员宅基地

我想以AMR文件格式录制音频.我目前正在使用波纹管代码来录制音频：outputFile = Environment.getExternalStorageDirectory().getAbsolutePath() + "Sample.3gp";myRecorder = new MediaRecorder();myRecorder.setAudioSource(MediaRecorder.AudioS...

SAP License：SAP学习心得_SAP权限管控的博客-程序员宅基地

1、组织架构–用途：责任、统计、数据分类、数据关联、关键字。2、SAP应用技巧–功能/元素对应业务项/ 点，预提升业务则需启用功能或补录数据项。3、SAP系统概念业务释义手册，业务单据关键字段清单及描述。4、系统可以多项集成，形成多个口径，提供多维管理视图，但统计口经必须选其一、必须唯一一致；如成本中心可与设备位置之工作中心集成，也可与设备组织结构之成本中心。5、SAP是飞机、一般企业能玩得转、用的上么；需要的是顾问的艺术、管理者的决心。6、主数据及业务表单各数据字段业务含义及系统作用影响描述；.

java 崩溃日志,minecraft崩溃日志_发条粽子的博客-程序员宅基地

该楼层疑似违规已被系统折叠隐藏此楼查看此楼可以帮我看看吗-- Head --Thread: Client threadStacktrace:at java.lang.Class.forName0(Native Method)at java.lang.Class.forName(Unknown Source)at net.minecraftforge.fml.common.FMLModContai...

BigDecimal除法保留小数位_兴趣使然的小小的博客-程序员宅基地_bigdecimal除法保留小数点

BigDecimal num1 = new BigDecimal(100);BigDecimal num2 = new BigDecimal(32);System.out.print(num1.divide(num2, 2, RoundingMode.HALF_UP));RoundingMode.DOWN 直接删除多余的小数位，如2.35会变成2.3RoundingMode.UP 进位处理，2.35变成2.4RoundingMode.HALF_UP 四舍五入，2.35变成2.4Rounding

NotePad++ 语法高亮 INC 文件_weixin_33947521的博客-程序员宅基地

2019独角兽企业重金招聘Python工程师标准>>> ...

C++含变量的后缀表达式计算__程序设计_的博客-程序员宅基地

C++含变量的后缀表达式计算接了个老外的作业，要求是在原代码基础上添加支持变量的后缀表达式的计算，题目要求如下：Make the Reverse Polish Notation calculator work with variablesIf the input is2 3 4 +* -> a =that means work out 2*( 3+4) and remember that as the value of a.-> needs to be handled special