uni-app学习

目录

一、安装HBuilderX

二、创第一个uni-app

三、项目目录和文件作用

四、全局配置文件(pages.json)

4.1 globalStyle(全局样式)

导航栏:背景颜色、标题颜色、标题文本

导航栏:开启下拉刷新、下拉背景、下拉样式

​编辑 4.2 pages(页面路由)

4.3 tabBar

1.基本设置

2.个性化设置 

五、常见组件

5.1、view组件

5.2、text组件

5.3、input组件

5.4、button按钮组件


一、安装HBuilderX

其实HBuilderX的安装很简单,官网下载安装就可以了,这里就不演示了

二、创第一个uni-app

在点击工具栏里的文件 -> 新建 -> 项目

然后在弹出的创建页面做以下配置 

  • 1. 项目名称:随意,但建议使用英文或拼音。
  • 2. 项目路径:默认即可,但个人建议放在桌面上,便于查找代码。
  • 3. 选择模板:学习阶段使用默认空白模板即可,后续可尝试官方提供的模板进行快速开发。
  • 4. Vue 版本:选择最新的 Vue 3 版本,因为 uni-app 是基于 Vue 开发的。
  • 5. 学习期间不使用 uniCloud 和 gitCode 代码托管平台,可不勾选这两个选项。完成设置后,点击创建即可。 

关于项目路径,在想放的路径创建文件夹即可。

  1. 例:新建一个demo1空白文件夹,然后在创建项目时点击浏览,选择自己创建的demo1文件夹。
  2.  这样我们创建的项目就会在demo1文件里,也就是我们的项目源码就存在了demo1里

新创建好的项目如下:

三、项目目录和文件作用

  • pages.json     文件用于对 uni-app 进行全局配置,包括页面路径、窗口样式、原生导航栏和底部的原生选项卡栏等设置。
  • manifest.json    文件是应用的配置文件,用于指定应用的名称、图标、权限等。
  • App.vue   是我们的跟组件,所有页面都是在App.vue下进行切换的,是页面入口文件,可以调用应用的生命周期函数。
  • main.js  是我们的项目入口文件,主要作用是初始化vue实例并使用需要的插件。
  • uni.scss   文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss文件里预置了一批scss变量预置。
  • unpackage   就是打包目录,在这里有各个平台的打包文件
  • pages   所有的页面存放目录
  • static   静态资源目录,例如图片等
  • components  组件存放目录

四、全局配置文件(pages.json)

用于设置应用的状态栏、导航条、标题、窗口背景色等。

4.1 globalStyle(全局样式)

导航栏:背景颜色、标题颜色、标题文本

全局配置中的样式将应用到所有页面,除非在页面的特定配置中被覆盖

导航栏:开启下拉刷新、下拉背景、下拉样式

 4.2 pages(页面路由)

uni-app 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下: 

注意:

  • pages节点的第一项为应用入口页(即首页)
  • 应用中新增/减少页面,都需要对 pages 数组进行修改
  • 文件名不需要写后缀,框架会自动寻找路径下的页面资源

 例如项目创建时默认生成的:

4.3 tabBar

如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。

1.基本设置

注意:

  • 当设置 position 为 top 时,将不会显示 icon
  • tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
  • tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello uni-app使用了此方式)
  • tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。
  • 顶部的 tabbar 目前仅微信小程序上支持。

 list属性的属性值如下:

例:

2.个性化设置 

有许多小程序,它的底部导航栏中间图标突起的,图片如下:

那么是怎么做的呢?

答:其实也是tabbar里面的配置项,midButton属性,和list属性平级即可。

操作如下:

midButton 属性说明 

五、常见组件

uni为开发者提供了一系列的基础组件,这些组件类似于html里的基础标签元素,但是uni与html不同,和小程序更相似,更适合在移动手机端。

  • 组件是视图层的基本组成单元。
  • 组件是一个单独且可复用的功能模块的封装。

5.1、view组件

view组件:相当于一个盒子,可以用来装一些别的组件。它类似于传统html中的div,用于包裹各种元素内容

5.2、text组件

text组件:主要用来显示文字的。

text 组件相当于行内标签、在同一行显示

5.3、input组件

input组件主要用来获取用户输入的信息的,一般在用户填写信息,提交数据,登录注册和提交表单时会用到。

 

 比如我们给input的type设置为number属性值,那么我们在输入内容的时候,只可以输入数字。

5.4、button按钮组件

  • button 组件默认独占一行,设置 size 为 mini 时可以在一行显示多个

 

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

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

相关文章

电商价格监测合规性探讨

品牌在做控价、数据分析的过程中,都需要先有数据作为支撑,也就是说要先采集数据,价格监测也是如此,监测的基础是采集,现在主流的采集形式是爬虫采集,可以理解为人工采集的升级版,以机器代替人工…

华为海思数字芯片设计笔试第七套

声明 下面的题目作答都是自己认为正确的答案,并非官方答案,如果有不同的意见,可以评论区交流。 这些题目也是笔者从各个地方收集的,感觉有些题目答案并不正确,所以在个别题目会给出自己的见解,欢迎大家讨论…

QT常量中有换行符解决方法--使用中文显示乱码或者编译报错

QT6.3常量中有换行符 int ret2QMessageBox::information(this,QString::fromLocal8Bit("提示"),QString::fromLocal8Bit(("确认启动设备吗?")),QMessageBox::Yes,QMessageBox::No); 确保显示正常,建议每次使用时,中文的前后加一个空…

PLSQL中文乱码问题 + EZDML导入数据库模型乱码

PLSQL中文乱码问题 EZDML导入数据库模型乱码 查询数据库字符集 select userenv(language) from dual;查询本地字符集编码 select * from V$NLS_PARAMETERS;理论上 数据库字符集 跟 本地字符集编码 是一致的 本地字符集编码需要拼接字段值 NLS_LANGUAGE NLS_TERRITORY NLS…

【机器学习300问】71、神经网络中前向传播和反向传播是什么?

我之前写了一篇有关计算图如何帮助人们理解反向传播的文章,那为什么我还要写这篇文章呢?是因为我又学习了一个新的方法来可视化前向传播和反向传播,我想把两种方法总结在一起,方便我自己后续的复习。对了顺便附上往期文章的链接方…

uni-app vue3 setup 如何使用 onShow

在uni-app中&#xff0c;onShow是uni.onAppShow的别名&#xff0c;用于监听当前小程序被用户切换到前台运行时触发。在Vue 3中&#xff0c;你可以通过以下方式使用onShow&#xff1a; 在页面的vue文件中添加onShow方法&#xff1a; javascript <button click“onShow”&g…

Java工程师常见面试题:Java基础(一)

1、JDK 和 JRE 有什么区别&#xff1f; JDK是Java开发工具包&#xff0c;它包含了JRE和开发工具&#xff08;如javac编译器和java程序运行工具等&#xff09;&#xff0c;主要用于Java程序的开发。而JRE是Java运行环境&#xff0c;它只包含了运行Java程序所必须的环境&#xf…

MySQL与Redis缓存一致性的实现与挑战

缓存是提高应用性能的重要手段之一&#xff0c;而 MySQL 和 Redis 是两种常用的数据存储和缓存技术。在许多应用中&#xff0c;常常将 Redis 用作缓存层&#xff0c;以加速对数据的访问。然而&#xff0c;在使用 MySQL 和 Redis 组合时&#xff0c;保持缓存与数据库之间的一致性…

淘宝京东1688API接口系列:商品属性丨价格丨sku丨详情图等,请求文档说明示例

电商平台的API接口系列为商家、开发者及数据分析师等提供了丰富的商品数据&#xff0c;帮助他们更深入地了解商品详情、市场动态以及消费者行为。以下是淘宝、京东等电商平台API接口系列中关于商品属性、价格、SKU和详情图等相关信息的介绍&#xff1a; 1.请求方式&#xff1a…

数字化浪潮下的企业转型:机遇与挑战并存

一、数字化转型的时代背景 科技进步推动数字化转型随着云计算、大数据、人工智能等技术的迅猛发展&#xff0c;数字化转型成为必然趋势。这些技术不仅改变了我们的生活方式&#xff0c;也深刻影响着企业的运营模式和商业模式。经济全球化加速数字化转型在经济全球化的背景下&a…

Python神经网络提取音乐数据和开放C++音频图形框架

&#x1f3af;要点 声音合成&#xff1a; &#x1f3af;波形和振荡器代码实现&#xff0c;绘图和声音播放&#xff1a;&#x1f58a;三角形、锯齿波和方波振荡器声音合成 | &#x1f58a;环形声音调制器&#xff0c;输出立体声 | &#x1f58a;声音幅度调制 | &#x1f58a;声…

008 登录(index页面获取token) 同步

文章目录 CustomerController.javaCustomer.javaCustomerMapper.javaICustomerService.javaCustomerServiceImpl.javaJwtUtil.javaServerResult.javaServletInitializer.javaSpringbootDemoApplication.javacustomer.sqlCustomerMapper.xmlapplication.yamlindex.jsplogin.jspp…

no_good_file(训练题)

[题目信息]&#xff1a; 题目名称题目难度no_good_file&#xff08;训练题&#xff09;2 [题目考点]&#xff1a; 远程命令执行漏洞&#xff0c;用户通过浏览器提交执行命令&#xff0c;由于服务器端没有针对执行函数做过滤&#xff0c;导致在没有指定绝对路径的情况下就执行…

读《SQL基础教程 第二版 上》的一些总结

1. 数据库语言 DDL: Data Definition Language&#xff0c;数据定义语言&#xff08;库、表的操作&#xff09; DML: Data Manipulation Language&#xff0c; 数据操控语言&#xff08;对表中数据的增删改&#xff09; DQL: Data Query Language&#xff0c;数据库查询语言…

Proxyman Premium for Mac v5.1.1激活版:卓越的网络调试与分析工具

Proxyman Premium for Mac是一款功能强大的网络调试与分析工具&#xff0c;专为开发人员和测试人员精心打造。它集多种功能于一身&#xff0c;为用户提供了全面、高效的网络开发体验。 Proxyman Premium for Mac v5.1.1激活版下载 作为一款跨平台代理工具&#xff0c;Proxyman …

蓝桥杯第859题——旅行

Z 小镇是一个景色宜人的地方&#xff0c;吸引来自各地的观光客来此旅游观光。Z 小镇附近共有 n 个景点&#xff08;编号为 1,2,3,…,n&#xff09;&#xff0c;这些景点被 m 条道路连接着&#xff0c;所有道路都是双向的&#xff0c;两个景点之间可能有多条道路。 也许是为了保…

cesium primitive 移动 缩放 旋转 矩阵

旋转参考&#xff1a;cesium 指定点旋转rectangle Primitive方式 矩阵篇-CSDN博客 平移参考&#xff1a;cesium 调整3dtiles的位置 世界坐标下 相对坐标下 平移矩阵-CSDN博客 一、primitive方式添加polygon let polygonInstance new Cesium.GeometryInstance({geometry: Ce…

逻辑回归模型-逻辑回归算法原理-逻辑回归代码与实现-笔记整合

通过一段时间的学习&#xff0c;总算把逻辑回归模型弄清楚了 《老饼讲解-机器学习》www.bbbdata.com中是讲得最清晰的&#xff0c;结合其它资料&#xff0c;整理一个完整的笔记如下&#xff0c;希望能帮助像我这样入门的新人&#xff0c;快速理解逻辑回归算法原理和逻辑回归实…

Adobe AE(After Effects)2023下载地址及安装教程

Adobe After Effects是一款专业级别的视觉效果和动态图形处理软件&#xff0c;由Adobe Systems开发。它被广泛用于电影、电视节目、广告和其他多媒体项目的制作。 After Effects提供了强大的合成和特效功能&#xff0c;可以让用户创建出令人惊艳的动态图形和视觉效果。用户可以…

06节-51单片机-LCD1602调试工具

欢迎订阅专栏&#xff0c;持续为您更新&#xff01; 1.LCD1602调试工具 使用LCD1602液晶屏作为调试窗口&#xff0c;提供类似printf函数的功能&#xff0c;可实时观察单片机内部数据的变换情况&#xff0c;便于调试和演示。 本文提供的LCD1602代码属于模块化的代码&#xff…