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

布局王
• 阅读 4

昨天的文章介绍了使用uniapp跨平台鸿蒙应用时如何配置开发环境和运行调试项目,今天介绍一下uniapp项目目录的结构。 可能对于从事移动开发的友友来说,uniapp的项目结构看起来有一些陌生,它更接近于前端项目,新建的uniapp项目结构是这样的: uniapp开发HarmonyOS NEXT应用之项目结构详细解读 上面的两个文件夹pages中存放的是项目的页面,static则是存放静态资源的文件。 打开pages文件夹,可以看到项目初始化的index文件,这就是项目的初始化页面,里面有一个简单的Hello World项目代码,运行项目的时候可以看到。 uniapp开发HarmonyOS NEXT应用之项目结构详细解读 继续往下吗看,App.vue文件打开可以看到它里面存放了项目的生命周期函数,比如项目启动、项目退出等等。 uniapp开发HarmonyOS NEXT应用之项目结构详细解读 index.html相当于项目的根页面,它虽然也属于页面,但是在uniapp中通常是不需要大家修改的,因为可以看到里面有一个id是app的容器,我们在项目中写的所有代码最终都会注入到这个容器中。 uniapp开发HarmonyOS NEXT应用之项目结构详细解读 Main.js是整个项目的核心入口文件,负责初始化Vue实例和全局配置 uniapp开发HarmonyOS NEXT应用之项目结构详细解读 Manifest.json中存放了项目的各种配置文件,项目的名称、版本、描述、各个平台的的运行配置都在这里。 uniapp开发HarmonyOS NEXT应用之项目结构详细解读 Pages.json中存放了项目中所有的页面路径和全局样式,尝试在globalStyle中的样式做一些修改,项目的全局样式就会被改变。而当新建了一个页面时,也会在这里自动注册。 uniapp开发HarmonyOS NEXT应用之项目结构详细解读 最后的uni.scss文件,打开可以看到它已经给出了解释,这里是uni-app内置的常用样式变量。 uniapp开发HarmonyOS NEXT应用之项目结构详细解读 以上就是uniapp项目初始化后的项目结构,还没结束,当我们运行项目后,还会新增unpackage目录,打开可以看一下是不是很熟悉,编译器把uniapp项目编译成了鸿蒙项目,这就是跨平台开发的运行原理。 uniapp开发HarmonyOS NEXT应用之项目结构详细解读 以上就是对uniapp项目结构的详细解读。经历了两天的项目环境搭建和介绍,接下来的教程我们会进入到正式的跨平台开发编码环节,欢迎您持续关注。#鸿蒙三方框架##Uniapp##购物#

点赞
收藏
评论区
推荐文章
CuterCorley CuterCorley
4年前
uni-app入门教程(1)uni-app简介、部署和目录结构
@toc前言本文主要介绍了uniapp的基本情况,并引导快速创建和运行第一个uniapp项目,同时对项目的目录结构和代码规范进行详细说明,适合uniapp零基础初学者。一、uniapp介绍uniapp是DCloud官方推出的重要产品,是一个使用Vue.js开发跨平台应用的前端框架,官网是。开发者通过编写一套Vue.js代码,即可
CuterCorley CuterCorley
4年前
uni-app实战之社区交友APP(1)项目介绍和环境搭建
如需查看本项目实际运行效果,可点击uniapp实战之社区交友APP(1)项目介绍和环境搭建(https://blog.csdn.net/CUFEECR/article/details/112793245)(免费试读)进行浏览。如需本项目完整前端uniapp代码和资源文件,可以点击https://download.csdn.net/downloa
布局王 布局王
4小时前
鸿蒙跨平台开发教程之Uniapp布局基础
前两天的文章内容对uniapp开发鸿蒙应用做了一些详细的介绍,包括配置开发环境和项目结构目录解读,今天我们正式开始写代码。入门新的开发语言往往从HelloWorld开始,Uniapp的初始化项目中已经写好了一个简单的demo,这里就不再赘述,我们直接从布局
布局王 布局王
4小时前
Uniapp开发鸿蒙应用教程之自定义导航栏
连续分享了几天的Uniapp跨平台开发鸿蒙应用教程的文章,相信大家对跨平台开发已经有了初步的了解,今天分享一下跨平台开发中的自定义导航栏。在Hbuilder的初始化项目中是自带了导航栏的,这是一个全局的导航栏,它的样式设置和修改是在全局的配置文件pages
布局王 布局王
4小时前
Uniapp开发鸿蒙应用教程之选项式api和组合式api
大家好,前两天讲了Uniapp开发鸿蒙应用时的基础布局和自定义导航栏,都是仅限于页面上的开发。今天我们尝试进行一些数据上的操作,借此分享一下选项式API和组合式API的内容。我们初始化的首页项目代码,它的脚本代码部分通常是这样的:exportdefault
布局王 布局王
4小时前
Uniapp开发鸿蒙购物项目实战教程:实现首页轮播图
过去几天的文章中我们讲过了如何创建跨平台项目,如何进行基础的布局、如何实现自定义导航栏等等,通过这一系列的文章教程,我们最终要实现一个购物app,今天我们要做购物应用首页的轮播图部分。对于轮播图uniapp提供了相应的组件swiper,并且是支持鸿蒙应用的
布局王 布局王
4小时前
Uniapp开发鸿蒙购物项目教程之样式选择器
大家下午好,今天依然为大家带来鸿蒙跨平台开发教程的分享,我们本系列的教程最终要做一个购物应用,通过这个项目为大家分享uniapp开发鸿蒙应用从配置开发环境到应用打包上架的完成过程。昨天的文章实现了应用首页的轮播图,其中涉及到为轮播图设置样式,放一小段代码带
布局王 布局王
4小时前
Uniapp开发鸿蒙应用时如何运行和调试项目
经过前几天的分享,大家应该应该对uniapp开发鸿蒙应用的开发语法有了一定的了解,可以进行一些简单的应用开发,今天分享一下在使用uniapp开发鸿蒙应用时怎么运行到鸿蒙设备,并且在开发中怎么调试程序。运行Uniapp项目支持运行到鸿蒙真机和模拟器,不过在这
布局王 布局王
4小时前
uniapp跨平台开发HarmonyOS NEXT应用初体验
之前写过使用uniapp开发鸿蒙应用的教程,简单介绍了如何配置开发环境和运行项目。那时候的HbuilderX还是4.22版本,小一年过去了HbuilderX的正式版本已经来到4.64,历经了多个版本的更新后,跨平台开发鸿蒙应用的体验大幅提升。今天再次跟大家