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 项目结构的详细解读。经历了两天的项目环境搭建和介绍，接下来的教程我们会进入到正式的跨平台开发编码环节，欢迎您持续关注。