写点什么

uniapp 开发 HarmonyOS NEXT 应用之项目结构详细解读

作者:幽蓝计划
  • 2025-05-10
    山东
  • 本文字数:704 字

    阅读完需:约 2 分钟

uniapp开发HarmonyOS NEXT应用之项目结构详细解读

昨天的文章介绍了使用 uniapp 跨平台鸿蒙应用时如何配置开发环境和运行调试项目,今天介绍一下 uniapp 项目目录的结构。

可能对于从事移动开发的友友来说,uniapp 的项目结构看起来有一些陌生,它更接近于前端项目,新建的 uniapp 项目结构是这样的:


图片


上面的两个文件夹 pages 中存放的是项目的页面,static 则是存放静态资源的文件。

打开 pages 文件夹,可以看到项目初始化的 index 文件,这就是项目的初始化页面,里面有一个简单的 Hello World 项目代码,运行项目的时候可以看到。


图片


继续往下面看,App.vue 文件打开可以看到它里面存放了项目的生命周期函数,比如项目启动、项目退出等等。


图片


index.html 相当于项目的根页面,它虽然也属于页面,但是在 uniapp 中通常是不需要大家修改的,因为可以看到里面有一个 id 是 app 的容器,我们在项目中写的所有代码最终都会注入到这个容器中。


图片


Main.js 是整个项目的核心入口文件,负责初始化 Vue 实例和全局配置


图片


Manifest.json 中存放了项目的各种配置文件,项目的名称、版本、描述、各个平台的的运行配置都在这里。


图片


Pages.json 中存放了项目中所有的页面路径和全局样式,尝试在 globalStyle 中的样式做一些修改,项目的全局样式就会被改变。而当新建了一个页面时,也会在这里自动注册。


图片


最后的 uni.scss 文件,打开可以看到它已经给出了解释,这里是 uni-app 内置的常用样式变量。


图片


以上就是 uniapp 项目初始化后的项目结构,还没结束,当我们运行项目后,还会新增 unpackage 目录,打开可以看一下是不是很熟悉,编译器把 uniapp 项目编译成了鸿蒙项目,这就是跨平台开发的运行原理。


图片


以上就是对 uniapp 项目结构的详细解读。经历了两天的项目环境搭建和介绍,接下来的教程我们会进入到正式的跨平台开发编码环节,欢迎您持续关注。

发布于: 刚刚阅读数: 7
用户头像

幽蓝计划

关注

还未添加个人签名 2025-05-09 加入

还未添加个人简介

评论

发布
暂无评论
uniapp开发HarmonyOS NEXT应用之项目结构详细解读_幽蓝计划_InfoQ写作社区