uni-app入门（uni-app项目结构介绍、pages.json配置项列表）

最新推荐文章于 2024-09-11 10:38:42 发布
最新推荐文章于 2024-09-11 10:38:42 发布
阅读量1.1k 收藏 2
点赞数 1
文章标签： 小程序 android vue.js uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43078424/article/details/108974357
版权
本文介绍了uni-app的项目结构，包括pages目录存放业务页面，static存储静态资源，App.vue和main.js的用途，以及manifest.json和pages.json的作用。在pages.json中，重点讲解了globalStyle和pages配置项，用于设定应用和页面的样式，以及页面路由管理。
摘要由CSDN通过智能技术生成

一、uni-app项目结构

上一篇博客咱们介绍了如何创建一个uni-app项目，项目创建完成后的目录样式如图所示：

在这里插入图片描述

  1. pages 业务页面文件存放的目录

pages里面可以存放.vue的页面，如下图所示：index的页面

在这里插入图片描述

  1. static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
    在这里插入图片描述

  2. App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期

  3. main.js Vue初始化入口文件

  4. manifest.json 配置应用名称、appid、logo、版本等打包信息

最低0.47元/天 解锁文章
chowhoundgh
关注
uniapp（一） 项目架构，封装
a_靖的博客
10-24 5116
前言： 最近需要搭建一套基于uniapp 的代码模板，适应各平台的快速打包部署，为提高代码复用率，提升生产力，所以需要构建一套优雅的前端项目架构，下面分享记录一下我的封装。 代码封装我暂时分为三个层面： 1 底层的封装 缓存处理，第三方API封装，用户信息鉴权处理，网络请求，应用配置，数据统计，数据埋点，全局page对象劫持封装，通用工具类封装（时间处理，通配符取参，文件下载，上传，加密，解密，长链接，音视频播放器），WebRTC（网页实时通信技术），webview通讯 释：这个层面基本都是.
uni-app、小程序项目对pages.json文件拆分、动态生成pages.json文件、动态生成分包配置pages.json文件的解决方案
积跬步，至千里。
10-27 7802
uni-app、小程序项目对pages.json文件拆分、动态生成pages.json文件、动态生成分包配置pages.json文件的解决方案
uniapp项目文件结构
weixin_45294459的博客
04-11 1830
uni-app项目pages.json文件、tabBar
最新发布
听海边涛声
09-11 247
uni-app项目pages.json文件、tabBar
(一) uni 项目结构
SsStr的博客
06-08 345
是基于 uni 项目 默认模板，多了 .gitigonre文件是我加了版本控制。 1.pages.json文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 。 2.manifest.json文件是应用的配置文件，用于指定应用的名称、图标、权限等。打包配置 3.App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。 4.main.js是uni-app的入口文件，主要作用是初始化vue...
uniAPP项目结构及生命周期
m0_67388537的博客
07-15 371
编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。组件支持的生命周期，与vue标准组件的生命周期相同。在app端，还支持原生渲染的nvue，以及可以编译为kotlin和swift的uts。目录下除不满足条件编译的文件，会直接复制到最终的打包目录，不会打包编译。目录下的文件（vue、js、css 等）只有被引用时，才会被打包编译。目录下，建议这些公用的资源放在自建的。
uni-app开发小程序：项目架构以及经验分享
Cipher_Y的博客
07-25 3589
2022年的时候，公司为了快速完成产品并上线，所以选用微信小程序为载体；由于后期还是打算开发App；虽然公司有ios和Android，但是如果能一套代码打包多端，一定程度上可以解决成本；前端技术栈也是vue，在考察选择了uni-app。后来多个小程序项目都采用了uni-app开发，积累了一定的经验以及封装了较多业务组件，这里就分享一下uni-app项目的整体架构、常用方法封装以及注意事项。全文代码都会放到github，先赞后看，年入百万！
uni-app中pages.json详解
weixin_57156748的博客
11-29 5023
pages.json pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等。 pages.json 配置项列表 globalStyle Object 否 设置默认页面的窗口表现 pages Object Array 是 设置页面路径及窗口表现 tabBar Object 否 设置底部 tab 的表现 condition Object 否 启动模式配置 以下是一个包含了所有配置选项的 pages.json ： { "pages":...
uni-app入门（pages.json配置项列表）
guohui的博客
10-09 789
一、tabBar 如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。 注意： 当设置 position 为 top 时，将不会显示 icon tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。 tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式） tabbar 的页面展现过一次
uni-app入门学习
2401_84092508的博客
04-20 1031
官方网页uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。具有vue和微信小程序的开发经验，可快速上手uni-app为什么要去学习uni-app？
uni-app框架（项目创建）
小林的博客
03-26 1322
dcloud官方除uni-app外，还有新生的uni-app x（即下一代uni-app），如果是初学者或者刚入门同学，建议还是使用uni-app进行开发。无论是vue还是uni，作为前端开发的一个框架学习方法是一致的，因此在开发学习的过程中需要注意目录结构、开发规范、生命周期、页面结构等重点，然后依次进行深入学习。本文档以vue3、组合式api、ts进行开发学习。
uni-app实战——创建项目、项目结构详解
02-24
注意这里的项目名称不是你的app的名称，app的名称需要在代码里定义这里要注意一下，我们以后写一个页面，一般是一个template里面嵌套一个view，然后在view里面编写你的代码最好不要一个template里面写多个view并列，否则会有一些未知的错误,下面是错误示范然后是js的代码，里面主要是vue的js语法 最后是css代码，用来美化页面页面就包含以上三个部分，我们点减号把代码收起，可以清晰的看到它的代码结构。里面有很多配置，比如应用名称、模块权限配置（支付、分享等权限）。。。这里主要是一个全局的js，我们写的通用的js方法可以封装，然后在这里引入，然后就可以在每个页面里用了。好了，大
uniApp项目结构及规范，uniCloud云开发打包上线基础知识汇总
wang13679201813的博客
07-29 2402
uniapp学习
【uniapp】结构
小数点儿_
07-30 3574
整个插件文件夹(如uni-nav-bar文件夹)就会出现在自己项目的uni_modules文件夹下。Vue3中的应用是通过使用createApp函数来创建的，参数是根组件（例HelloVueApp）uni_modules是uni-app的插件模块化规范，可直接使用也可自己开发插件。uni-app组件支持的生命周期，与vue标准组件的生命周期相同。/*2.如果引入scss，要加上lang="scss"*/使用时，在自己项目下新建uni_modules文件夹。...
探索uni-app项目的架构与开发实践：快速开发的项目模板参考
chenchuang0128的博客
03-23 1457
本文将介绍一个基于uni-app的快速开发模板，帮助开发者快速搭建项目，并探讨如何利用该模板提高开发效率和应用程序的质量。它包含预先设计好的组件示例、SDK示例和模板页面，以便快速构建功能丰富且用户体验良好的应用程序。摘要：本文将深入探讨uni-app项目架构的模板设计，以及如何通过使用该模板实现快速开发。我们将重点介绍模板中的组件示例、SDK示例和模板页面，并阐述它们在提高开发效率和优化用户体验方面的作用。登录页：包含登录表单和必要的输入字段，如用户名和密码等。
Uni-App 架构详解：从框架到运行环境
u011464172的专栏
06-17 2058
Uni-App 是一款功能强大的跨平台开发框架，它提供了丰富的功能和工具，可以帮助开发者快速构建高性能、跨平台的应用。使用 Uni-App 可以带来以下优势：使用一套代码构建多个平台的应用，减少开发时间和成本。基于 Vue.js 框架，开发者可以快速上手。提供了大量的 API、组件库和插件，方便开发者开发各种应用。应用可以在不同的平台上运行，覆盖更广泛的用户群体。总而言之，Uni-App 是一个优秀的跨平台开发解决方案，可以帮助开发者快速、高效地构建跨平台应用。
uni-app 工程目录结构介绍
java1234的博客
12-24 492
├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此。├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见。├─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见。目录下的文件（vue、js、css 等）只有被引用时，才会被打包编译。的文件，会直接复制到最终的打包目录，不会打包编译。目录下，建议这些公用的资源放在自建的。等小程序需要的文件。
uni-app的pages.json的各种配置
peijiajing的博客
04-30 8998
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。 "pages": [ //pages数组中第一项表示应用启动页 "path" : "pages/mine/mi...
uni-app配置详解：pages.json与应用启动模式
在配置文件部分，重点介绍了`pages.json`，这是uni-app的全局配置文件，用于定义应用的结构和行为。 4.5.1 配置文件概述： `pages.json`文件包含以下几个关键配置项： 1. **globalStyle**：这部分用于设置默认页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值