首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【Uniapp】-uni-app页面管理配置文件

【Uniapp】-uni-app页面管理配置文件

原创
作者头像
程序员NEO
发布于 2023-12-04 12:41:17
发布于 2023-12-04 12:41:17
8622
举报

前言

好了,经过我们上篇文章的介绍,我们就了解了一下 UniApp 的一个目录结构,那么了解完了这个 Uni APP 的一个目录结构之后,这篇我们再来了解一下目录结构当中的一个配置文件,pages.json,那这个 pages.json,上篇文章我们也说过了,它相当于我们小程序开发当中的一个 app.js 就是我们页面配置文件, 在这个页面配置文件里面,可以告诉它我们有哪些页面, 可以进行一些全局的配置,比如说配置全局的标题文字颜色,全局的背景颜色这些东西,好,那么接下来不管三七二十一,再来新建一个项目,新建项目和之前介绍的是一样的用默认模板即可,我这里略过创建步骤。

步入正题

为了方便一会在小程序上面运行,我要先把小程序的一个 APP ID 给他配一下:

然后我们在 pages.json 里面配置一下我们的页面,默认情况下,pages.json 当中有一个页面,就是我们的首页,我新建一个页面:

注意点,一定是选择了 pages 目录,然后在鼠标右键选择新建,这样 HBuilderX 才会帮我们自动的在 pages.json 里面配置一下这个页面,这里我新建一个 account 页面:

这个时候你观察 pages.json 里面的配置,就会发现多了一个 account 页面, 内容如下:

代码语言:json
AI代码解释
复制
{
    "path" : "pages/account/account",
    "style" : 
    {
        "navigationBarTitleText" : "",
        "enablePullDownRefresh" : false
    }
}

这里我先将 style 相关的内容干掉,先看 path,看这个 path 之前我们首先需要配置一个 tabBar,怎么配置 tabBar 呢,这个时候就要查看我们的官方文档了,地址是:https://uniapp.dcloud.net.cn/uni-app-x/collocation/pagesjson.html#pages-tabbar

tabBar

将官方给的示例代码改造一下,我们分别有首页与账号页面,所以我这里就配置两个,我将 iconPath,selectedIconPath 去掉了因为我这里没有图标:

代码语言:json
AI代码解释
复制
"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页"
    }, {
        "pagePath": "pages/account/account",
        "text": "账号"
    }]
}

运行到小程序

这个时候我们在小程序上面运行一下,看看效果:

运行到 APP

运行到 H5

是不是都没有我们的一个问题,这个就是通过配置 pages.json 来进行配置的。

globalStyle

接下来我们再来看一下 globalStyle,这个 globalStyle 是一个全局的样式,我们可以在这里面配置一些全局的样式,官方文档地址:https://uniapp.dcloud.net.cn/uni-app-x/collocation/pagesjson.html#pages-globalstyle

上图中是 globalStyle 可配置的一些内容。

globalStyle 节点里是所有页面都生效的全局样式配置。它的配置与页面级style基本相同 优先级低于页面级style配置。

兼容性:

好了说了这么多不如自己来试一下,以 navigationBarTitleText 为例,在 globalStyle navigationBarTitleText 里面有配置,但是在 pages 中也有配置,我们已经将项目运行到不同的平台上面了,通过观察无论是首页还是账号都是显示的 uni-app,这个时候我们将页面的 navigationBarTitleText 配置一下,我们再来看一下效果,更改账号页面的 navigationBarTitleText 为账号,那么我们页面也配置了,globalStyle 也配置了,那么这个时候他听谁的呢,是不是当前页面如果配置了就用当前页面的,如果当前页面没有配置就用 globalStyle 的,那么我们再来看一下效果:

那么其他的属性都是同理可证的,这里就不一一演示了。

小小总结, 这里你只需要理解一点,pages 当中的 style 就是配置页面的样式,也可以在 globalStyle 中配置全局的样式,页面有自己的样式,就用自己的样式,没有就用全局样式,只要这个东西就可以了。

关于使用 HBuilderX 我目前的感受

发现 HBuilderX 这个工具,这个开发工具它很智能。怎么智能?就是我在编写这个配置文件的时候,你是根本就不用去文档里面找的,写上一个双引号,它能配置的一些内容就提示出来了,而且还有详细的注释说明:

最后

大家好我是 BNTang, 一个热爱分享的技术的开发者,我会在号中分享一些IT技术和一些个人的见解,谢谢大家的支持。

我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
2 条评论
热度
最新
除了基本的配置,是否可以分享一些在实际项目中应用UniApp目录结构和配置文件的经验,尤其是在处理复杂项目需求时的最佳实践。
除了基本的配置,是否可以分享一些在实际项目中应用UniApp目录结构和配置文件的经验,尤其是在处理复杂项目需求时的最佳实践。
111举报
好的,后面会初哥项目实战用 uniapp,最近事情较多每天保持更新中[愉快]
好的,后面会初哥项目实战用 uniapp,最近事情较多每天保持更新中[愉快]
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
uni-app入门教程(2)页面样式、配置文件和生命周期
本文先介绍uni-app的页面样式和布局,包括尺寸单位、样式导入、内联样式和选择器等;再介绍两个配置文件,即pages.json和manifest.json的配置项和基本使用;最后简要介绍了生命周期的基本使用。
cutercorley
2020/12/16
3K0
uni-app入门教程(2)页面样式、配置文件和生命周期
uni-app实战之社区交友APP(2)全局样式引入和底部导航栏开发
本文先介绍了uni-app项目中引入全局样式的种类,即App.vue中引入官方CSS样式库、自定义图标库和CSS动画库;再介绍了在pages.json中定义globalStyle;最后实现了项目的导航栏开发。
cutercorley
2021/01/26
3K0
uni-app实战之社区交友APP(2)全局样式引入和底部导航栏开发
【UniApp】-uni-app-路由
然后在配置一下,微信小程序的 AppId,直接去之前的项目中拷贝一下即可,找到之前项目的 manifest.json 文件,然后选择微信小程序配置,复制一下即可。
程序员NEO
2023/12/13
4290
【UniApp】-uni-app-路由
【Uniapp】-uni-app全局样式和局部样式
好,经过上个章节的介绍完毕之后,了解了一下 UniApp 的一个全局 页面配置文件,也就是我们的一个 pages.json 文件。
程序员NEO
2023/12/06
2K0
【Uniapp】-uni-app全局样式和局部样式
uni-app 快速上手指南
官方有自己的 HbuilderX 实际上开发效率非常高,并且可以集成很多开发环境和插件来使用,但是由于开发习惯的原因,以及出生(软狗的骄傲),还是使用Visual Studio Code 来作为开发环境,但是由于 uni-app 的编译调试依赖 HbuilderX,因此这里的解决方法是:
李郑
2019/12/04
1.1K0
【云+社区年度征文】uni-app初体验
为了实现多端兼容,也综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范(摘自官网):
小异常
2020/12/11
2.7K21
【云+社区年度征文】uni-app初体验
uni-app学习笔记-手动配置底部导航(二)
公司开发需要,打算花几天的时间,使用uni-app做一个考勤打卡app,功能很简单,使用上下班打卡,具体的考勤时间显示,当天考勤缺勤的人数统计,以及登录界面,个人信息头像显示界面。
王小婷
2019/12/11
2.4K0
8.新建uni-app项目newapp
将zip包下载以后解压后,将文件夹colorui复制到newapp目录下,然后在App.vue中的样式中导入:
玩蛇的胖纸
2020/06/22
6870
uni-app小程序开发-组件
https://hellouniapp.dcloud.net.cn/pages/component/view/view
码客说
2024/07/22
2490
1.项目策划和新建uni-app项目
画风有点阴间滤镜的感觉了,没办法,美术功底实在有待提高,为了贴合“暗部”,只能搞成这样。
玩蛇的胖纸
2021/06/24
5430
【小程序项目开发-- 京东商城】uni-app开发之配置 tabBar & 窗口样式
👋👋欢迎来到👋👋 🎩魔术之家!!🎩 该文章收录专栏 ✨-- 2022微信小程序京东商城实战 --✨ 专栏内容 ✨-- 京东商城uni-app项目搭建 --✨ ✨-- 京东商城uni-app 配置tabBar & 窗口样式 --✨ ✨-- 京东商城uni-app开发之分包配置 --✨ ✨-- 京东商城uni-app开发之轮播图 --✨ ✨-- 京东商城uni-app之分类导航区域 --✨ ✨-- 京东商城uni-app 首页楼层商品 --✨ ✨-- 京东商城uni-app
计算机魔术师
2022/08/23
4770
【小程序项目开发-- 京东商城】uni-app开发之配置 tabBar & 窗口样式
【Uni-App社区小程序】008-底部导航
https://uniapp.dcloud.net.cn/collocation/pages?id=tabbar
訾博ZiBo
2025/01/06
1300
【Uni-App社区小程序】008-底部导航
uni-app(优医咨询)项目实战 - 第1天
在本节要求大家掌握 uni-app 项目的创建、运行、以及 Android 真机环境配置,内容侧重于动手操作,需要理解的部分较少,操作过程中遇到错误后,可以从头重新进行操作,直到环境正常运行。
程序员朱永胜
2024/04/18
3060
uni-app(优医咨询)项目实战 - 第1天
『UniApp』核心语法
下载地址:https://www.dcloud.io/hbuilderx.html
程序员NEO
2023/12/26
6512
『UniApp』核心语法
uni-app开发微信小程序和h5应用
最近,有个需求需要开发H5应用和微信小程序。如果针对不同的平台开发自己的一套代码,那将是一件很糟糕的事情:如果下次需要兼容支付宝小程序、快应用,那工作量随着平台的添加而快速增加。所以我们选择了uni-app开发。
Jimmy_is_jimmy
2022/03/10
1.3K0
uni-app开发微信小程序和h5应用
【Uniapp】-uni-app项目结构
好了,经过上一章节文章的介绍,就搭建好了 Uniapp 的开发环境,知道了如何通过 HBuilderX 将 Uniapp 编写的代码运行到浏览器当中,运行到微信开发者工具当中,运行到安卓模拟器上面去,了解完之后,接下来再来给大家介绍了解一下 Uniapp 默认项目的一个结构, 目录表达含义。
程序员NEO
2023/12/03
6810
【Uniapp】-uni-app项目结构
如何高效的阅读uni-app框架?(建议收藏)
uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js。脚本,应用程序,main.js。日志打印,定时器,生命周期,页面,页面通讯。
达达前端
2019/11/27
1.6K0
uni-app小程序开发常用配置项配置
https://uniapp.dcloud.net.cn/collocation/pages.html#pages
码客说
2024/07/11
5480
从零玩转系列之小程序微信支付UniApp实战基础项目搭建
本篇将为您介绍微信支付在小程序 Uniapp 端的全新篇章。微信支付作为移动支付领域的先驱之一,不断演进与创新,为用户和开发者提供更便捷、安全的支付体验。在本文中,我们将深入探讨微信支付在小程序 Uniapp 端的应用与优势。
杨不易呀
2023/09/22
2.2K2
从零玩转系列之小程序微信支付UniApp实战基础项目搭建
【Uni-App社区小程序】007-设置全局属性globalStyle
https://uniapp.dcloud.net.cn/collocation/pages?id=globalstyle
訾博ZiBo
2025/01/06
2860
【Uni-App社区小程序】007-设置全局属性globalStyle
推荐阅读
相关推荐
uni-app入门教程(2)页面样式、配置文件和生命周期
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档