Uni-app跟学笔记(一):新建项目、运行、tabbar、全局配置

news2024/11/14 13:53:50

文章目录

    • 1)新建项目
    • 2)项目运行
    • 3)项目结构
    • 4)开发规范
    • 5)globalStyle全局外观配置
    • 6)pages页面配置
    • 7)tabbar
    • 8)Condition

本博客为 uni-app 此门课的跟学笔记,目的是便于个人复习和对知识快速索引,源码素材可在均可在视频评论区找到

1)新建项目

  • new→file→project,选择uni-app即可
    在这里插入图片描述

2)项目运行

  • 如果想模拟运行微信小程序那么必须先在微信开发工具中设置打开服务端口
    并且要在HBuilderX中设置微信小程序开发工具文件目录
  • 如果想运行在手机上最简单的做法是USB连接,然后HBuilderX就能检测到
  • 其他的模拟在浏览器上或者Build-in Broswer(内置浏览器)就没什么可说的了

在这里插入图片描述

3)项目结构

在这里插入图片描述

  1. pages:存放页面
  2. static:存放静态资源,如图片,视频等等
  3. unpackage:存放打包过后的项目文件
  4. App.vue:根组件,所有页面都是在App.vue下进行切换的,是页面入口文件,可以调用应用的生命周期函数
  5. main.js:项目入口文件,一个vue项目最先初始化的文件
  6. manifest.json:应用的配置文件,指定应用打包时的名称、图标、权限等(和网页插件挺像)
  7. pages.json:整个项目页面的存放路径以及全局外观配置
  8. uni.scss:控制应用的整体风格,比如按钮颜色、边框风格等等

4)开发规范

在这里插入图片描述

5)globalStyle全局外观配置

  • 官网的介绍:pages.json 页面路由 | uni-app官网 (dcloud.net.cn)

  • globalStyle位于pages.json之下

在这里插入图片描述
在这里插入图片描述

6)pages页面配置

  • 首先在pages目录下新建一个页面
  • 新建页面后需要在pages.json的pages数组下添加该页面的路径
  • 每个page有两个属性,一个是path(项目的相对路径),一个是style,style里面的属性和globalStyle类似,设置相同的属性可以覆盖掉全局的配置
  • pages数组中的第一项将会作为起始页

在这里插入图片描述

7)tabbar

  • tabbar即为app底部的导航栏
  • 当设置position为top时(导航栏跑到页面上方),将不会显示icon(图标)
  • tabBar中的list是一个数组,只能配置最少2个、最多5个tab,tab按数组的顺序排序,对于list中的每个元素应配置下方属性:

在这里插入图片描述

  • tabbar与globalStyle同级,应在pages.json中完成配置

在这里插入图片描述

  • 关于tabbar的其他常用属性

在这里插入图片描述

在这里插入图片描述

8)Condition

  • 启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:每个商品点击查看详情进入的详情页面,暂时可以理解为不依靠底部导航栏跳转到的页面,而是类似于Web开发的超链接。

在这里插入图片描述

  • 对于list启动模式列表有以下属性:

在这里插入图片描述

  • 在微信开发者工具中可以跳转到详情页

在这里插入图片描述

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

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

相关文章

如何在安卓端的SAP里配置打印机

1、转到 SPAD 事务(“假脱机管理”屏幕)。单击“设备/服务器”选项卡,输入输出设备的名称,然后点击显示按钮。 2、如果打印机已配置,它将显示设备属性、输出设备属性和纸盒信息的所有详细信息。如果输入新的打印机名称…

基于ssm的志愿者招募系统的设计与实现(程序+文档+数据库)

** 🍅点赞收藏关注 → 私信领取本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验,陆续会更新更多优质的Java实战项目,希望你能有所收获,少走一些弯路。🍅关注我不迷路🍅** 一、研究背景…

Java学习笔记------常用API(二)

Object 无有参构造 public Object() 空参构造 成员方法: public String toString() 返回对象的字符串表示 public boolean equals(object obj) 比较两个对象是否相等 Object默认用号比较地址值,需要重写才能比较属性值 protected O…

基于java+springboot+vue实现的自习室管理和预约系统(文末源码+Lw)23-177

摘 要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装自习室管理和预约系统软件来发挥其高效地信息处理的作用&a…

vue脚手架创建项目失败,报错淘宝镜像地址证书过期问题解决

场景: 使用vue-cli脚手架创建vue新项目时,控制台报错,创建失败 控制台报错:ERROR Failed to get response from https://registry.npm.taobao.org/binary-mirror-config 尝试过的方式: 清除npm缓存或删除npm-cache文…

YashanDB亮相2024年中国石油石化信息通信技术交流大会

3月6日-8日,2024年中国石油石化信息通信技术交流大会在成都举办。YashanDB携智慧油气化数据管理解决方案亮相本次展会,展示最新的研发成果和场景应用。 当前,石油石化行业数字化转型不断深化,随之而来的是海量数据的计算与交互&a…

代码随想录算法训练营第day41|背包理论基础、416. 分割等和子集

目录 a.背包理论基础——01背包 1.二维数组的01背包表示 2.一维滚动数组表示 b. 416. 分割等和子集 - 力扣(LeetCode) a.背包理论基础——01背包 背包问题分类: 对于面试的话,其实掌握01背包,和完全背包&#xff…

Vulkan 围炉夜话

系列文章目录 OpenGL 围炉夜话 Vulkan 围炉夜话 文章目录 系列文章目录Vulkan参考书教程学习摘要VkImage 、VkBufferVkImage 相关VkBuffer 相关VkDeviceMemory 映射 理解代码流线渲染通道理解渲染通道创建渲染通道 VkFramebuffer 帧缓存流水线创建流水线缓冲对象(PC…

ECC算法理论,基础椭圆+曲线的形状

目录 ECC算法理论基础 椭圆+曲线的形状 DH算法:Diffie-Hellman 简称ECC ECC算法理论基础</

C++训练营:引用传递

大家好&#xff1a; 衷心希望各位点赞。 您的问题请留在评论区&#xff0c;我会及时回答。 一、引用传递 简单来说&#xff0c;“引用”就是给已有的变量起一个别名。引用并没有自己单独的内存空间&#xff0c;作为引用&#xff0c;它和原变量共用一段内存空间。引用的定义格…

Java开发从入门到精通(一):Java的基础语法知识高阶:静态数组、动态数组、代码调试

Java大数据开发和安全开发 &#xff08;一&#xff09;Java的数组1.1 静态初始化数组1.1.1 静态数组的定义1.1.2 数组的原理1.1.3 数组的访问1.1.3.1 数组的取值1.1.3.2 数组的赋值1.1.3.3 数组的长度1.1.3.4 数组的使用 1.1.4 数组的遍历1.1.3 数组的案例 1.2 动态初始化数组1…

图像压缩神器:使用wxPython和Pillow快速压缩JPEG文件

导语&#xff1a; 在数字时代&#xff0c;我们经常处理大量的图像文件&#xff0c;无论是个人照片、网络图片还是工作中的设计素材。然而&#xff0c;随着图像数量的增多&#xff0c;存储和传输这些文件可能会成为一个挑战。幸运的是&#xff0c;我们可以利用Python编程和两个强…

基于Springboot影城管理系统设计与实现

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 一、研究背景…

基于JAVA的数码产品应用平台设计与实现【附项目源码】分享

基于JAVA的数码产品应用平台设计与实现&#xff1a; 源码地址&#xff1a;https://download.csdn.net/download/weixin_43894652/88842576 基于Web的数码产品应用平台设计与实现需求文档 一、引言 随着科技的飞速发展和数码产品的普及&#xff0c;用户对于获取数码产品信息…

计算机网络面经八股-HTTP常见的状态码有哪些?

常见状态码&#xff1a; 200&#xff1a;服务器已成功处理了请求。 通常&#xff0c;这表示服务器提供了请求的网页。301 &#xff1a; (永久移动) 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时&#xff0c;会自动将请求者转到新位置。302&…

openssl3.2 - exp - export ecc pubkey from ecc priv key

文章目录 openssl3.2 - exp - export ecc pubkey from ecc priv key概述笔记END openssl3.2 - exp - export ecc pubkey from ecc priv key 概述 前面实验已经生成了ECC私钥, 现在做从ECC私钥(内容为公私钥对, 里面既有私钥信息, 也有公钥信息)导出ECC公钥. 实验对应的命令行…

Liunx文件系统和基础IO

文件系统和基础IO 基础IOc语言基础IO函数当前路径和标准流系统IO系统调用函数重定向FILE文件结构体 在谈缓存区问题理解文件系统初识inode 基础IO c语言基础IO函数 打开与关闭 FILE *fopen(char *filename, const char *mode);选项还可以是 r/w/a 意味着为可读可写打开。 2…

Java异常分类(二)

RuntimeException 运行时异常&#xff1a; 派生于 RuntimeException 的异常&#xff0c;如被 0 除、数组下标越界、空指针等&#xff0c;其产生比较频繁&#xff0c;处理麻烦&#xff0c;如果显式的声明或捕获将会对程序可读性和运行效率影响很大。因此由系统自动检测并将它们交…

Vcenter 定制创建 Rocky Linux 虚拟机

文章目录 1. 图形化安装2. 初始化配置 1. 图形化安装 2. 初始化配置 Centos 8.2 指南

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的商品识别系统(深度学习+UI界面+训练数据集+Python代码)

摘要&#xff1a;在零售行业的技术进步中&#xff0c;开发商品识别系统扮演着关键角色。本博文详细阐述了如何利用深度学习技术搭建一个高效的商品识别系统&#xff0c;并分享了一套完整的代码实现。系统采用了性能强劲的YOLOv8算法&#xff0c;同时对YOLOv7、YOLOv6、YOLOv5等…