uni-app快速入门（十）--常用内置组件（下）

      本文介绍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>