uni-app快速入门(十)--常用内置组件(下)

      本文介绍uni-app的textarea多行文本框组件、web-view组件、image图片组件、switch开关组件、audio音频组件、video视频组件。

一、textarea多行文本框组件

      textarea组件在HTML 中相信大家非常熟悉,组件的官方介绍见:

textarea | uni-app官网uni-app,uniCloud,serverless,textarea,inputmode 有效值icon-default.png?t=O83Ahttps://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组件的浏览器内核说明,UniAppJSBridgeRicon-default.png?t=O83Ahttps://uniapp.dcloud.net.cn/component/web-view.html

三、image图片组件

      image图片组件在H5中会转为img标签。官网介绍见:

nulluni-app,uniCloud,serverless,image,图片格式说明:,mode 有效值,示例icon-default.png?t=O83Ahttps://uniapp.dcloud.net.cn/component/image.html

四、switch开关组件

      switch开关选择器组件在实际开发中经常使用,官网介绍见:

switch | uni-app官网uni-app,uniCloud,serverless,switchicon-default.png?t=O83Ahttps://uniapp.dcloud.net.cn/component/switch.html

五、audio音频组件

      audio音频组件的官网介绍见:

nulluni-app,uniCloud,serverless,audioicon-default.png?t=O83Ahttps://uniapp.dcloud.net.cn/component/audio.html

       在官网介绍中,提到以下几点:

       微信小程序平台自基础库 1.6.0 版本开始,不再维护 audio 组件,推荐使用API方式而不是组件方式来播放音频。API见 uni.createInnerAudioContext 替代。

        app-nvue也不支持此组件。

        如果需要带ui的样式,可以自己做,也可以在插件市场搜索相关插件

        本组件在vue3项目中废弃,只可以在vue2项目中使用。

        可以从插件市场搜索自己需要的音频组件:DCloud 插件市场DCloud 插件市场icon-default.png?t=O83Ahttps://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,videoicon-default.png?t=O83Ahttps://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>
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/920388.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CSS中Flex布局应用实践总结

① 两端对齐 比如 要求ul下的li每行四个&#xff0c;中间间隔但是需要两段对齐&#xff0c;如下图所示&#xff1a; 这是除了基本的flex布局外&#xff0c;还需要用到:nth-of-type伪类来控制每行第一个与第四个的padding。 .hl_list{width: 100%;display: flex;align-items…

Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现

Spring Boot Vue 基于 RSA 的用户身份认证加密机制实现 什么是RSA&#xff1f;安全需求介绍前后端交互流程前端使用 RSA 加密密码安装 jsencrypt库实现敏感信息加密 服务器端生成RSA的公私钥文件Windows环境 生成rsa的公私钥文件Linux环境 生成rsa的公私钥文件 后端代码实现返…

Three.js + AI:AI 算法生成 3D 萤火虫飞舞效果~

AI 驱动 3D 动画 大家好&#xff0c;我是石小石&#xff01;随着 Web 技术的发展&#xff0c;Three.js 成为构建 3D 图形和动画的主流工具。与此同时&#xff0c;人工智能&#xff08;AI&#xff09;在图像处理、动作生成等领域表现出强大能力。将 AI 与 Three.js 结合&#x…

bpmn.js显示流程图

目标&#xff1a;vue2 接口返回xml - 弹窗显示流程图 - 根据需求高亮节点 一、安装依赖 npm i bpmn-js 添加上的版本是 "bpmn-js": "^11.5.0" 二、只读显示流程图 <div ref"canvas" style"width:100%;height: calc(100vh…

Vue Form表单的使用,rules格式校验网络校验,键盘按键监听

Form表单 rules格式校验 可以在validator中进行网络请求&#xff0c;实现网络校验 const formRules {userName: [{required: true, message: "用户名不能为空", trigger: blur}, {min: 5,max: 10,message: "长度必须5-10位",trigger: blur}],passWord: …

单片机智能家居火灾环境安全检测-分享

目录 前言 一、本设计主要实现哪些很“开门”功能&#xff1f; 二、电路设计原理图 电路图采用Altium Designer进行设计&#xff1a; 三、实物设计图 四、程序源代码设计 五、获取资料内容 前言 传统的火灾报警系统大多依赖于简单的烟雾探测器或温度传感器&#xff0c;…

TCP并发服务器

端口号快速复用函数 通过getsockopt和setsockopt函数&#xff0c;管理套接字的端口号复用设置。具体操作如下&#xff1a; getsockopt函数 int getsockopt(int sockfd, int level, int optname, void *optval, socklen_t *optlen);功能&#xff1a;获取套接字的某些选项的属性。…

vue3的宏到底是什么东西?

前言 从vue3开始vue引入了宏&#xff0c;比如defineProps、defineEmits等。我们每天写vue代码时都会使用到这些宏&#xff0c;但是你有没有思考过vue中的宏到底是什么&#xff1f;为什么这些宏不需要手动从vue中import&#xff1f;为什么只能在setup顶层中使用这些宏&#xff…

无重复字符的最长子串习题分析

习题&#xff1a;&#xff08;leetcode 3 &#xff09; 给定一个字符串s&#xff0c;请你找出其中不含有重复字符的最长子串的长度。 分析&#xff1a; 对于寻找子串、数组中某部分等&#xff0c;我们可以使用滑动窗口和双指针思想来求解。 滑动窗口通常用于解决需要连续子…

Linux服务器的Tomcat9中部署War包

文章目录 Linux服务器的Tomcat9中部署War包一、引言二、部署Tomcat91、安装Tomcat91.1、下载Tomcat91.2、解压安装1.3、启动Tomcat9 2、配置环境变量&#xff08;可选&#xff09; 三、部署War包1、准备War包2、部署War包3、配置Context&#xff08;可选&#xff09; 四、启动和…

如果接口返回值图片有很长一串码,需要添加前缀

需要在前面添加前缀&#xff1a;data:image/jpeg;base64,然后将值赋值给<img :src"originalImage" /> this.tableLists.map((item)>{item.originalImage "data:image/jpeg;base64,"item.originalImage})以上方法会导致出现一个小bug&#xff0c;…

2024年11月21日Github流行趋势

项目名称&#xff1a;twenty 项目维护者&#xff1a;charlesBochet, lucasbordeau, Weiko, FelixMalfait, bosiraphael项目介绍&#xff1a;正在构建一个由社区支持的现代化Salesforce替代品。项目star数&#xff1a;21,798项目fork数&#xff1a;2,347 项目名称&#xff1a;p…

Excel——宏教程(精简版)

一、宏的简介 1、什么是宏&#xff1f; Excel宏是一种自动化工具&#xff0c;它允许用户录制一系列操作并将其转换为VBA(Visual Basic for Applications)代码。这样&#xff0c;用户可以在需要时执行这些操作&#xff0c;以自动化Excel任务。 2、宏的优点 我们可以利用宏来…

【eNSP】OSPF、RIP与静态路由互通实验(四)

OSPF、RIP与静态路由互通实验 实验目的实验要求实验步骤步骤 1&#xff1a;配置R1、R2、R3、R4、R5、R6、R7的端口ip步骤 2&#xff1a;配置R1、R2、R3的OSPF动态路由协议步骤 3&#xff1a;配置R3、R4、R5的RIP动态路由协议步骤 4&#xff1a;配置R3作为边界路由器&#xff0c…

Vision-Language Models for Vision Tasks: A Survey 论文解读

摘要 大多数视觉识别研究在深度神经网络&#xff08;DNN&#xff09;训练中严重依赖于人工标注的数据&#xff0c;且通常为每个单一的视觉识别任务训练一个DNN&#xff0c;导致这种视觉识别范式既繁琐又耗时。为解决这两个挑战&#xff0c;近年来对视觉语言模型&#xff08;VL…

Stable Diffusion核心网络结构——U-Net

​ &#x1f33a;系列文章推荐&#x1f33a; 扩散模型系列文章正在持续的更新&#xff0c;更新节奏如下&#xff0c;先更新SD模型讲解&#xff0c;再更新相关的微调方法文章&#xff0c;敬请期待&#xff01;&#xff01;&#xff01;&#xff08;本文及其之前的文章均已更新&a…

C#桌面应用制作计算器进阶版01

基于C#桌面应用制作计算器做出了少量改动&#xff0c;其主要改动为新增加了一个label控件&#xff0c;使其每一步运算结果由label2展示出来&#xff0c;而当点击“”时&#xff0c;最终运算结果将由label1展示出来&#xff0c;此时label清空。 修改后运行效果 修改后全篇代码 …

python: generator model using sql server 2019

設計或生成好數據庫&#xff0c;可以生成自己設計好的框架項目 # encoding: utf-8 # 版权所有 &#xff1a;2024 ©涂聚文有限公司 # 许可信息查看 &#xff1a;言語成了邀功盡責的功臣&#xff0c;還需要行爲每日來值班嗎 # 描述&#xff1a; : 生成实体 # Author …

【Nginx从入门到精通】04-安装部署-使用XShell给虚拟机配置静态ip

文章目录 总结1、XShell &#xff1a;方便管理多台机器2、配置ip文件&#xff1a;区分大小写 一、查看上网模式二、Centos 7 设置静态ipStage 1 &#xff1a;登录root账号Stage 2 &#xff1a;设置静态ip : 修改配置文件 <font colororange>ifcfg-ens33Stage 2-1&#xf…

【深度学习】利用Java DL4J构建金融欺诈检测系统

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…