当前位置: 首页 > news >正文

快速学会创建uni-app项目并了解pages.json文件

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

目录

前言 

创建 uni-app 项目 

通过 HBuilderX 创建

pages.json 

pages 

style 

globalStyle

tabBar


前言 

经过半个多月的学习,vue基础入门就告一段落啦,接下来就要开始学习制作微信小程序了,既然要学微信小程序,那么uni-app入门学习当然是必不可少的啦,接下来我就和大家一起零基础入门uni-app 

创建 uni-app 项目 

通过 HBuilderX 创建

 1. 下载安装 HbuilderX 编辑器

2. 通过 HbuilderX 创建 uni-app vue3 项目  

 3. 安装 uni-app vue3 编译器插件

 4 .编译成微信小程序端代码

 

 5. 开启服务端口

 总结:

pages.json 

pages 

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

Tips:

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

style 

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

页面中配置项会覆盖 globalStyle 中相同的配置项

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页",//设置页面标题文字"enablePullDownRefresh":true//开启下拉刷新}},...]
}

globalStyle

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

注意

  • 支付宝小程序使用titleImage时必须使用https的图片链接地址,需要真机调试才能看到效果,支付宝开发者工具内无效果
  • globalStyle中设置的titleImage也会覆盖掉pages->style内的设置文字标题
  • 使用 maxWidth 时,页面内fixed元素需要使用--window-left,--window-right来保证布局位置正确
  • dynamicRpx vue3 nvue页面已移除此配置,升级为横竖屏切换自动rpx,如果不需要可以使用 px
"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},

tabBar

设置底部 tab 的表现

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

在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能。在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生tab。

Tips

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

其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下: 

midButton 属性说明 

相关文章:

快速学会创建uni-app项目并了解pages.json文件

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 前言 创建 uni-app 项目 通过 HBuilderX 创建 pages.json pages style globalStyle tabBar 前言…...

选云服务器还是物理服务器

选云服务器还是物理服务器 一、为什么需要云服务器或独立服务器取代共享主机 在最早之前,大多数的网站都是共享主机开始的,这里也包含了云虚拟机。这一类的站点还有其他站点都会共同托管在同一台服务器上。但是这种共享机只适用于小的网站,如…...

最新ChatGPT网站AI系统源码+详细图文搭建教程/支持GPT4.0/AI绘画/H5端/Prompt知识库/

一、前言 SparkAi系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。 那么如何搭建部署AI创作ChatGPT?小编这里写一个详细图文教程吧&#xff01…...

Web3 游戏七月洞察:迈向主流采用的临界点?

作者: lesleyfootprint.network 2023 年 7 月,Web3 游戏领域出现了小幅增长,但对于许多项目来说,用户采用仍然是一个持续的挑战。根据 Footprint Analytics 的数据,活跃的区块链游戏数量略有增加,达到 2,471 个。然而…...

Python爬虫——scrapy_多网页下载

在DangSpider类中设置一个基础url base_url http://category.dangdang.com/pg page 1在parse方法中 # 每一页的爬取逻辑都是一样的&#xff0c;所以只需要执行每一页的请求再次调用parse方法就可以了if self.page < 100:self.page 1url self.base_url str(self.page)…...

JDK JRE JVM 三者之间的详解

JDK : Java Development Kit JRE: Java Runtime Environment JVM : JAVA Virtual Machine JDK : Java Development Kit JDK : Java Development Kit【 Java开发者工具】&#xff0c;可以从上图可以看出&#xff0c;JDK包含JRE&#xff1b;java自己的一些开发工具中&#…...

excel常见的数学函数篇2

一、数学函数 1、ABS(number)&#xff1a;返回数字的绝对值 语法&#xff1a;ABS(数字)&#xff1b;返回数字的绝对值&#xff1b;若引用单元格&#xff0c;把数字换为单元格地址即可 2、INT(number)&#xff1a;向小取整 语法&#xff1a;INT(数字)&#xff1b;若引用单元格…...

Certify The Web (IIS)

一、简介 Certify The Web 适用于 Windows的SSL 证书管理器用户界面&#xff0c;与所有 ACME v2 CA 兼容&#xff0c;为您的 IIS/Windows 服务器轻松地安装和自动更新来自 Letencrypt.org 和其他 ACME 证书授权机构的免费 SSL/TLS 证书&#xff0c;设置 https 从未如此简单。 …...

【c语言】五子棋(EasyX图形库+背景音乐)

大家好&#xff0c;有没有觉得写了好多c语言代码&#xff0c;面对的都是黑框框控制台&#xff0c;当我们学习了基础的c语言知识&#xff0c;和EasyX图形库后&#xff0c;终于可以和黑框框saygoodbye,今天要分享给大家的是小游戏五子棋&#xff0c;跟着小张一起学习吧 EasyX图形…...

【OpenCV 】对极几何标定质量验证

标定质量验证&#xff1a; 寻找一对对应点&#xff0c;已经知道对应关系及其详细坐标&#xff0c;根据对极几何推导实现 ///get the camera intrinsics and T_Ci_Bstd::vector<Eigen::Matrix3d> M_K;std::vector<Eigen::Matrix4d> T_Ci_B;for (int i 0; i < ne…...

Netty:ByteBuf的清空操作

说明 io.netty.buffer.ByteBuf有个函数clear()&#xff0c;它可以将ByteBuf的readerIndex和writerIndex都设置为0。 代码示例 package com.thb;import io.netty.buffer.ByteBuf; import io.netty.buffer.Unpooled;public class Demo {public static void main(String[] args…...

SpringCloud最新最全面试题

目录 一、简单说一说什么是微服务&#xff1f; 二、微服务有哪些优缺点&#xff1f; 三、微服务、分布式、集群的区别&#xff1f; 四、什么是Eureka&#xff1f; 五、Eureka有那两大组件&#xff1f; 六、actuator是什么&#xff1f; 七、Discovery是什么&#xff1f; …...

leetcode359周赛

2828. 判别首字母缩略词 核心思想:枚举。只需要枚举首字母和s是否一一对应即可。 2829. k-avoiding 数组的最小总和 核心思想&#xff1a;自己的方法就是哈希表&#xff0c;枚举i的时候&#xff0c;将k-i统计起来&#xff0c;如果出现了那么就跳过。灵神的方法是数学法&#…...

nginx代理webSocket链接响应403

一、场景 使用nginx代理webSocket链接&#xff0c;nginx响应403 1、nginx访问日志响应403 [18/Aug/2023:09:56:36 0800] "GET /FS_WEB_ASS/webim_api/socket/message HTTP/1.1" 403 5 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit…...

websocker无法注入依赖

在公司中准备用websocker统计在线人数&#xff0c;在WebSocketServer使用StringRedisTemplate保存数据到redis中去&#xff0c;但是在保存的时候显示 StringRedisTemplate变量为null 详细问题 2023-08-20 10:37:14.109 ERROR 28240 --- [nio-7125-exec-1] o.a.t.websocket.po…...

如何进行无线网络渗透测试?

我们将重点介绍如何使用Kali Linux进行无线网络渗透测试。无线网络渗透测试是评估无线网络安全性的重要步骤&#xff0c;而Kali Linux作为一款专业的渗透测试发行版&#xff0c;提供了丰富的工具来进行这项任务。 1. 准备工作 在开始无线网络渗透测试之前&#xff0c;有一些准…...

【Python机器学习】实验15 将Lenet5应用于Cifar10数据集(PyTorch实现)

文章目录 CIFAR10数据集介绍1. 数据的下载2.修改模型与前面的参数设置保持一致3. 新建模型4. 从数据集中分批量读取数据5. 定义损失函数6. 定义优化器7. 开始训练8.测试模型 9. 手写体图片的可视化10. 多幅图片的可视化 思考题11. 读取测试集的图片预测值&#xff08;神经网络的…...

Jeep车型数据源:提供Jeep品牌车系、车型、价格、配置等信息

​​​​​ Jeep是一个极具特色的汽车品牌&#xff0c;它的所有车型都注重实用性&#xff0c;具有越野性能和高性能。Jeep品牌在汽车行业中的口碑一直是非常不错的。如果你想要了解Jeep品牌车系、车型、价格、配置等信息&#xff0c;就可以通过挖数据平台Jeep车型数据源API接口…...

clickhouse-备份恢复

一、简介 备份恢复是数据库常用的手段&#xff0c;可能大多数公司很少会对大数据所使用的数据进行备份&#xff0c;这里还是了解下比较好&#xff0c;下面做了一些简单的介绍&#xff0c;详细情况可以通过官网来查看&#xff0c;经过测试发现Disk中增量备份并不好用&#xff0…...

(2018,ProGAN)渐进式发展 GAN 以提高质量、稳定性和变化

Progressive Growing of GANs for Improved Quality, Stability, and Variation 公众号&#xff1a;EDPJ 目录 0. 摘要 1. 简介 2. GAN 的渐进式发展 3. 使用小批量标准差增加变化 4. 生成器和判别器的归一化 4.1 均衡学习率 4.2 生成器中的像素特征向量归一化 5. 评…...

高效安全:从远程服务器到本地Windows的文件传输全攻略

1. 远程桌面连接&#xff1a;最直观的文件传输方式 远程桌面连接&#xff08;RDP&#xff09;是Windows系统自带的"杀手级"功能&#xff0c;我帮客户部署项目时90%的场景都会用它传文件。它的优势在于操作可视化程度高&#xff0c;就像直接在服务器桌面上操作本地文件…...

ABC系统实战指南:革新数字电路设计的逻辑综合与形式验证技术突破

ABC系统实战指南&#xff1a;革新数字电路设计的逻辑综合与形式验证技术突破 【免费下载链接】abc ABC: System for Sequential Logic Synthesis and Formal Verification 项目地址: https://gitcode.com/gh_mirrors/ab/abc 在现代集成电路设计流程中&#xff0c;工程师…...

FlowState Lab模型微调教程:使用自定义数据集训练专属波动模型

FlowState Lab模型微调教程&#xff1a;使用自定义数据集训练专属波动模型 1. 学习目标与前置准备 想为特定领域打造专属的波动预测模型吗&#xff1f;本文将带你完成从数据准备到模型评估的全流程。学完本教程&#xff0c;你将能够&#xff1a; 准备符合要求的时序/空间序列…...

ChatClient 全家桶保姆级博客讲解

最近 Spring AI 迭代很快&#xff0c;从原来的 ChatModel 转向了更易用的 ChatClient API。如果你看到这串名词&#xff1a;ChatClient、default、Options、Functions、Tools、System&User、Advisors&#xff0c;肯定会说好多名词啊。不急&#xff0c;慢慢来。一、先搞懂&a…...

DeepSeek-R1-Distill-Qwen-7B创意写作展示:从诗歌到短篇小说

嗯&#xff0c;用户需要一篇关于DeepSeek-R1-Distill-Qwen-7B在创意写作方面效果展示的技术博客。根据标题和场景判断&#xff0c;这属于效果展示类文章&#xff0c;重点是通过实际案例展示模型在文学创作上的能力。 需要突出模型的创意写作效果&#xff0c;包括诗歌、微型小说…...

wan2.1-vae提示词评估体系:构建BLEU-Style指标量化中文提示词有效性

wan2.1-vae提示词评估体系&#xff1a;构建BLEU-Style指标量化中文提示词有效性 1. 为什么需要评估提示词质量 在AI图像生成领域&#xff0c;提示词的质量直接影响最终生成效果。好的提示词能准确表达创作意图&#xff0c;而模糊或不当的提示词可能导致生成结果与预期不符。特…...

Scala入门必修课:val与var的深度对比与选择指南

Scala入门必修课&#xff1a;val与var的深度对比与选择指南1. 引言&#xff1a;变量定义的灵魂拷问2. 基础概念&#xff1a;val与var的定义2.1 直观区别2.2 类型推导3. 深入理解&#xff1a;从编译到执行3.1 编译后的字节码差异3.2 内存与性能考量4. 实际应用&#xff1a;选择指…...

OpenClaw备份策略:GLM-4.7-Flash模型与技能容灾方案

OpenClaw备份策略&#xff1a;GLM-4.7-Flash模型与技能容灾方案 1. 为什么需要备份OpenClaw环境 去年冬天的一个深夜&#xff0c;我的MacBook突然遭遇硬盘故障。当时OpenClaw正在执行一个长达3小时的自动化数据处理任务&#xff0c;所有中间状态和配置瞬间消失。这次事故让我…...

《先测量,再优化:写给 Python 开发者的性能实战指南——别让“聪明优化”变成昂贵自嗨》

《先测量&#xff0c;再优化&#xff1a;写给 Python 开发者的性能实战指南——别让“聪明优化”变成昂贵自嗨》 很多 Python 开发者都会经历这样一个阶段&#xff1a;项目一慢&#xff0c;第一反应就是“这段代码得优化”&#xff1b;一看到 for 循环&#xff0c;就想换成列表…...

阿里云盘Refresh Token获取终极指南:3分钟搞定扫码授权全流程

阿里云盘Refresh Token获取终极指南&#xff1a;3分钟搞定扫码授权全流程 【免费下载链接】aliyundriver-refresh-token QR Code扫码获取阿里云盘refresh token For Web 项目地址: https://gitcode.com/gh_mirrors/al/aliyundriver-refresh-token 阿里云盘refresh token…...