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

news2024/11/21 18:42:46

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

世界坐标系、相机坐标系、图像物理坐标系、像素平面坐标系

坐标系及其转换在计算机视觉领域占据核心地位。理解如何从一个坐标系转换到另一个坐标系&#xff0c;不仅是理论上的需要&#xff0c;也是实际应用中不可或缺的技能。 一、世界坐标系的定义 世界坐标系是一个全局的坐标系统&#xff0c;用于定义场景中物体的位置。在这个坐标…

机器学习笔记——聚类算法(Kmeans、GMM-使用EM优化)

本笔记介绍机器学习中常见的聚类算法&#xff08;Kmeans、GMM-使用EM优化&#xff09;。 文章目录 聚类K-Means工作原理特点 K-Medoids工作原理特点 Mini-Batch K-Means工作原理特点 K-Means&#xff08;重要&#xff09;工作原理特点 总结K的选值1. 肘部法则&#xff08;Elbow…

浅议Flink中的通讯工具: Akka

在Flink中&#xff0c;各个组件之间需要频繁交换数据和控制信息。Flink选择了基于Actor模型的Akka框架作为通信基础。 Akka是什么 Actor模型 Actor模型是用于单个进程中并发的场景。 在Actor模型中&#xff1a; ActorSystem负责管理actor生命周期 将每个实体视为独立的 Ac…

如何在react中使用react-monaco-editor渲染出一个编辑器

一、效果展示 二、基于vite配置 1.首先安装react-monaco-editor和monaco-editor包 npm add react-monaco-editor npm i monaco-editor 2.其次创建一个单独的文件&#xff08;此处是tsx、直接用app或者jsx也行&#xff09; import { useState, useEffect } from react impo…

孙玲:从流水线工人到谷歌程序员

这是《开发者说》的第24期&#xff0c;本期我们邀请的开发者是孙玲&#xff0c;她出生于湖南娄底一个贫穷的农村家庭&#xff0c;2009年高考落榜&#xff0c;她去了深圳一家电子厂&#xff0c;在流水线上给电池喷码&#xff0c;每天12个小时轮班&#xff0c;月薪2300&#xff0…

kali搭建pikachu靶场

前言&#xff1a; 总所周知搭个网站需要有apachemysqlphp&#xff0c;Apache是一个开源的Web服务器软件&#xff0c; MySQL是一种关系型数据库管理系统&#xff08;数据库&#xff09;&#xff0c;PHP是一种在服务器上执行的脚本语言 文章内容来自&#xff1a;【黑帽编程与攻…

android 使用MediaPlayer实现音乐播放--获取音乐数据

前面已经添加了权限&#xff0c;有权限后可以去数据库读取音乐文件&#xff0c;一般可以获取全部音乐、专辑、歌手、流派等。 1. 获取全部音乐数据 class MusicHelper {companion object {SuppressLint("Range")fun getMusic(context: Context): MutableList<Mu…

VMware Workstation 17.6.1

概述 目前 VMware Workstation Pro 发布了最新版 v17.6.1&#xff1a; 本月11号官宣&#xff1a;针对所有人免费提供&#xff0c;包括商业、教育和个人用户。 使用说明 软件安装 获取安装包后&#xff0c;双击默认安装即可&#xff1a; 一路单击下一步按钮&#xff1a; 等待…

Methode Electronics EDI 需求分析

Methode Electronics 是一家总部位于美国的全球性技术公司&#xff0c;专注于设计和制造用于多个行业的电子和电气组件&#xff0c;产品涵盖汽车、工业、电信、医疗设备以及消费电子等多个领域&#xff0c;提供创新的解决方案。 填写Methode_EDI_Parameters_Template Methode_…

uniapp自动注册机制:easycom

传统 Vue 项目中&#xff0c;我们需要注册、导入组件之后才能使用组件。 uniapp 框架提供了一种组件自动注册机制&#xff0c;只要你在 components 文件夹下新建的组件满足 /components/组件名/组件名.vue 的命名规范&#xff0c;就能直接使用。 注意&#xff1a;组件的文件夹…

【Vue】Vue3.0(二十六)Vue3.0中的作用域插槽

上篇文章 【Vue】Vue3.0&#xff08;二十五&#xff09;Vue3.0中的具名插槽 的概念和使用场景 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Vue专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月20日17点30分 文章目录 概念使用场景示…

C语言第14节:字符函数和字符串函数

1. 字符分类函数 C语言中有一系列的函数是专门做字符分类的&#xff0c;也就是一个字符是属于什么类型的字符的。这些函数的使用都需要包含一个头文件是<ctype.h> <ctype.h>头文件中的字符分类函数提供了一组用于检查单个字符特性的函数。这些函数接收一个字符&a…

IDEA怎么定位java类所用maven依赖版本及引用位置

在实际开发中&#xff0c;我们可能会遇到需要搞清楚代码所用依赖版本号及引用位置的场景&#xff0c;便于排查问题&#xff0c;怎么通过IDEA实现呢&#xff1f; 可以在IDEA中打开项目&#xff0c;右键点击maven的pom.xml文件&#xff0c;或者在maven窗口下选中项目&#xff0c;…

使用vscode+expo+Android夜神模拟器运行react-native项目

1.进入夜神模拟器安装路径下的bin目录 2.输入命令&#xff0c;连接Android Studio 启动夜神模拟器后&#xff0c; 打开安装目录的bin文件夹执行下面的命令&#xff0c;只需执行一次&#xff09; nox_adb.exe connect 127.0.0.1:62001adb connect 127.0.0.1:62001 3.运行项目…

IPv6 NDP 记录

NDP&#xff08;Neighbor Discovery Protocol&#xff0c;邻居发现协议&#xff09; 是 IPv6 的一个关键协议&#xff0c;它组合了 IPv4 中的 ARP、ICMP 路由器发现和 ICMP 重定向等协议&#xff0c;并对它们作出了改进。该协议使用 ICMPv6 协议实现&#xff0c;作为 IPv6 的基…

个人全栈开发微信小程序上线了(记日记)

个人开发的全栈项目&#xff0c;《每日记鸭》微信小程序上线了&#xff01; 主要是技术栈&#xff1a;uniapp,koa2,mongodb,langchian&#xff1b; 感兴趣的小伙伴可以来捧捧场&#xff01;

用源码编译虚幻引擎,并打包到安卓平台

用源码编译虚幻引擎&#xff0c;并打包到安卓平台 前往我的博客,获取更优的阅读体验 作业内容: 源码编译UE5.4构建C项目&#xff0c;简单设置打包到安卓平台 编译虚幻 5 前置内容 这里需要将 Epic 账号和 Github 账号绑定&#xff0c;然后加入 Epic 邀请的组织&#xff0c…

如何更改手机GPS定位

你是否曾想过更改手机GPS位置以保护隐私、玩游戏或访问受地理限制的内容&#xff1f;接下来我将向你展示如何使用 MagFone Location Changer 更改手机GPS 位置&#xff01;无论是在玩Pokmon GO游戏、发布社媒贴子&#xff0c;这种方法都快速、简单且有效。 第一步&#xff1a;下…

如何在 Ubuntu 上使用 Docker 部署 LibreOffice Online

简介 LibreOffice Online&#xff08;也称为Collabora Online&#xff09;是一个开源的在线办公套件&#xff0c;它提供了与LibreOffice桌面版相似的功能&#xff0c;但完全在云端运行。这意味着用户可以通过浏览器访问和编辑文档&#xff0c;而无需在本地计算机上安装任何软件…

Uniapp运行环境判断和解决跨端兼容性详解

Uniapp运行环境判断和解决跨端兼容性 开发环境和生产环境 uniapp可通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境&#xff0c;一般用于链接测试服务器或者生产服务器的动态切换。在HX中&#xff0c;点击运行编译出来的代码是开发环境&#xff0c;点击发行编译…