营销型网站建设网站手机延庆网站建设优化seo
本文介绍uni-app的textarea多行文本框组件、web-view组件、image图片组件、switch开关组件、audio音频组件、video视频组件。
一、textarea多行文本框组件
textarea组件在HTML 中相信大家非常熟悉，组件的官方介绍见：
textarea | uni-app官网uni-app,uniCloud,serverless,textarea,inputmode 有效值
https://uniapp.dcloud.net.cn/component/textarea.html 这个比较简单，看官方例子即可。
二、web-view组件
web-view组件相信大家在微信小程序开发中已经很熟悉了。就是用来承载网页的容器，默认自动铺满整个页面，如果使用native vue开发，则需手工指定宽高。
web-view在H5中会转为iframe标签，小程序端仅支持加载网络网页，不支持加载本地网页。小程序端的web-view组件一定要有原生导航栏，并且一定是全屏的web-view组件。App平台同事支持网络网页和本地网页，但本地网页及js和css须放在uni-app项目根目录的/hybrid/html文件夹下。
web-view 的官方介绍见：
web-view | uni-app官网uni-app,uniCloud,serverless,web-view,uni.postMessage(OBJECT),uni.getEnv(CALLBACK),App端web-view的扩展,web-view组件的层级问题解决,web-view组件的浏览器内核说明,UniAppJSBridgeRhttps://uniapp.dcloud.net.cn/component/web-view.html
三、image图片组件
image图片组件在H5中会转为img标签。官网介绍见：
nulluni-app,uniCloud,serverless,image,图片格式说明：,mode 有效值,示例https://uniapp.dcloud.net.cn/component/image.html
四、switch开关组件
switch开关选择器组件在实际开发中经常使用，官网介绍见：
switch | uni-app官网uni-app,uniCloud,serverless,switchhttps://uniapp.dcloud.net.cn/component/switch.html
五、audio音频组件
audio音频组件的官网介绍见：
nulluni-app,uniCloud,serverless,audiohttps://uniapp.dcloud.net.cn/component/audio.html
在官网介绍中，提到以下几点：
微信小程序平台自基础库 1.6.0 版本开始，不再维护 audio 组件，推荐使用API方式而不是组件方式来播放音频。API见 uni.createInnerAudioContext 替代。
app-nvue也不支持此组件。
如果需要带ui的样式，可以自己做，也可以在插件市场搜索相关插件
本组件在vue3项目中废弃，只可以在vue2项目中使用。
可以从插件市场搜索自己需要的音频组件：DCloud 插件市场DCloud 插件市场https://ext.dcloud.net.cn/search?q=audio
六、video视频组件
video视频组件在H5平台支持MP4，webm和ogg格式的视频。App平台支持本地视频mp4/flv、网络视频mp4/flv/m3u8以及流媒体视频rtmp/hsl/rtsp。
官方介绍见：nulluni-app,uniCloud,serverless,videohttps://uniapp.dcloud.net.cn/component/video.html 如果大家开发短视频、培训类APP等，需要深入研究video组件的使用。比如在video中加弹幕。
下面是示例代码：
<template>
<view>
<video :src="videoUrl" controls style="width:100%;height:500rpx;" object-fit="fill"></video>
</view>
</template>
<script>
export default {
name: "video-component",
data(){
return {
videoUrl:"http://xxxx/video/demo.mp4"
}
}
}
</script>
<style scoped>
</style>