为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
HarmonyOS

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

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

https://img1.sycdn.imooc.com/1598bb68095a147e04880516.jpg

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

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

https://img1.sycdn.imooc.com/4229ab68095a147f10800972.jpg

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

https://img1.sycdn.imooc.com/029bd868095a147f08580850.jpg

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

https://img1.sycdn.imooc.com/f7553b68095a147f10800344.jpg

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

https://img1.sycdn.imooc.com/888a4f68095a147f08181038.jpg

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

https://img1.sycdn.imooc.com/c4a0c168095a148010800587.jpg

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

https://img1.sycdn.imooc.com/af448468095a148010800699.jpg

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

https://img1.sycdn.imooc.com/9c168268095a148010800516.jpg

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

https://img1.sycdn.imooc.com/995a8f68095a148007801070.jpg

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


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
移动开发工程师
手记
粉丝
1
获赞与收藏
1

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消