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

文章目录

    • 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.hqwc.cn/news/535170.html

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

相关文章

建立网站的费用大概需要多少钱?

网站建设是很多人都熟悉的事情,因为现在无论是大公司还是中小企业都有自己的网站。 当你有了网站之后,你可以将公司的信息上传到网站上,这样可以让很多客户在浏览的时候更多地了解公司。 虽然现在大多数企业都有自己的网站,但是很…

铭文:探索比特币世界的数字印记

铭文是什么? 铭文指的是在某种物品(如石头、硬币、平板等)上刻有文字。在比特币领域,铭文指的是刻在聪(satoshi)上的元数据。比特币的最小单位是聪,1比特币可分为1亿聪。每个聪都通过序数理论进…

专题二 -滑动窗口 - leetcode 209. 长度最小的子数组 | 中等难度

leetcode 209. 长度最小的子数组 leetcode 209. 长度最小的子数组 | 中等难度1. 题目详情1. 原题链接2. 基础框架 2. 解题思路1. 题目分析2. 算法原理3. 时间复杂度 3. 代码实现4. 知识与收获 leetcode 209. 长度最小的子数组 | 中等难度 1. 题目详情 给定一个含有 n 个正整数…

5款可以免费使用的 UI 设计软件

在我们分享五个有用的原型工具之前,完成原型并优化界面。这是 UI 设计师的任务。UI 设计软件对设计师来说非常重要。UI 设计工具的使用是否直接影响最终结果,然后有人会问:UI 界面设计用什么软件?一些 UI 设计师和对 UI 设计感兴趣…

《深入Linux内核架构》第2章 进程管理和调度 (1)

目录 前言 2.1 进程优先级 2.2 进程生命周期 2.3 进程表示 2.3.1 进程类型 2.3.2 命名空间 2.3.3 进程ID号 2.3.4 进程关系 2.4 进程管理相关的系统调用 2.4.1 进程复制 2.4.2 内核线程 2.4.3 启动新程序 2.4.4 退出进程 前言 本章内容太多,分为两篇博…

2024年无人直播是否已经成为新趋势,商家使用矩图AI无人直播月均增长5万+

无论是 个体商户、企业经营者、电商从业者、想创业赚钱的朋友;也不管你是做餐饮还是非餐饮;亦或是抖音小时达外卖。这篇文章,请勿必看完,对你的业绩增长是有绝对的帮助。 无人直播的发展经历了几个时代,现在已经到了4.0的时代,更安…

记最近一次面试,被阿里P8测开虐惨了...

都说金三银四涨薪季,我是着急忙慌的准备简历——5年软件测试经验,可独立测试大型产品项目,熟悉项目测试流程...薪资要求?5年测试经验起码能要个20K吧 我加班肝了一页半简历,投出去一周,面试电话倒是不少&a…

第16届大广赛HBN命题资料详情

2024年3月8日,大广赛官方网站公布了4个新的品牌命题,其中就包含了HBN。 HBN功效护肤品牌创立于2019年,以“拥有看得见效果”的创新理念,致力于让用户把每一分钱都花在有效成分上,并一直以实际行动践行品牌“真功效”诺…

cad转shp再转3dtiles生成白模

1、准备CAD数据 2、arcgis中添加cad数据 添加面 cad中的标高字段是能带进arcgis中的,如果这个数据是建筑高度,可以直接用了 3、转shp 4、shp转3dtiles白模 cesiumlab中shp转3dtiles白模效果一

❤️算法笔记❤️-(每日一刷-141、环形链表)

文章目录 题目思路解法 题目 给你一个链表的头节点 head ,判断链表中是否有环。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环,评测系统内部使用整数 pos 来表示链表尾连接…

解锁App推广新姿势:Xinstall二维码信息获取秘籍

在移动互联网时代,App推广已成为各大企业和开发者必不可少的一项工作。而在推广过程中,二维码作为一种便捷的下载和安装方式,被广泛应用于各种场景。然而,如何有效获取并利用这些二维码信息,却成为了一个令人头疼的问题…

Java JUC 笔记(2)

Java JUC 笔记(2) 锁框架 JDK5以后增加了Lock接口用来实现锁功能,其提供了与synchronized类似的同步功能,但是在使用时手动的获取和释放锁 Lock和Condition锁 这里的锁与synchronized锁不太一样,我们可以认为是Loc…