【Uniapp】-uni-app项目结构

2023-12-03 12:45:28 浏览数 (2)

前言

好了,经过上一章节文章的介绍,就搭建好了 Uniapp 的开发环境,知道了如何通过 HBuilderX 将 Uniapp 编写的代码运行到浏览器当中,运行到微信开发者工具当中,运行到安卓模拟器上面去,了解完之后,接下来再来给大家介绍了解一下 Uniapp 默认项目的一个结构, 目录表达含义。

步入正题

好,那默认项目的一个结构其实非常简单,如果已经学过微信小程序,只要学过了小程序开发,你再看它结构,跟切菜没太大区别。

pages

首先来看 pages,是和微信小程序的 pages 是一样,它就是存放页面的,这里面默认有一个页面,就是首页:

将来你有其他页面,是不是这里面再去新建其他页面就可以了。

static

static 就是存放静态的一些资源,然后再往下面看。

unpackage

unpackage 是什么呢?它里面就是存放打包的一些这个内容,你要运行到浏览器里面去,要运行到微信小程序里面去,它打包代码就放在这,比如说 MP,就是打包到微信的代码:

App.vue

然后再继续看,App.vue 是什么?就是 Vue 的一个入口文件。

index.html

index.html,代表着你的 Vue 挂载在哪?是挂在界面上,这个就是被挂载的一个界面。

main.js

main.js,就是我们 js 的一个入口文件,在这个入口文件里面做什么呢?导入了我们的一个 vue ,然后创建了 Vue 的一个实例,把 Vue 的一个实例给它挂载上去了。

manifest.json

manifest.json,就是我们的一个清单文件,这个清单文件就是用来配置你当前编写的这个程序的,那可以配什么呢?可以配置,如果是运行到 iOS 安卓上面的话,可以配置它的一个图标,它的一个启动界面,然后它的一些这个权限:

如果说运行到 Web 上面可以配置是否要启用我们的 https 这类似的。 如果说配运行到我们这个微信小程序里面去,你需要配置微信小程序的 APP ID

说到这个配置微信小程序,之前我们在运行到微信小程序时,出现了一个报错:

这个报错是什么原因呢?是因为我们没有配置微信小程序的 APP ID,那怎么配置呢?也非常简单,在 manifest.json 中有一个微信小程序的配置,我们在这里面配置一下就可以了,关于微信小程序的 APP ID,我们可以在微信小程序的管理后台中找到:

这个就是 manifest.json 配置文件,最常用的就是修改我们 APP 的一个图标,启动界面,然后配置它的一些这个权限。然后就是我们的这个 Web 里面是否开启 Https 的一个协议,小程序里面就是配置我们的 App Id 就可以了。

pages.json

pages.json 是什么东西?它就相当于我们微信小程序当中的 app.json,可以告诉他你有哪些界面,这些界面的一个路径。然后这个界面样式以及全局的一些样式。

比如 navigationBarTextStyle 是配置的文本的颜色,然后 navigationBarTitleText 是配置导航栏 title 的文本, navigationBarBackgroundColor 是配置导航栏的背景颜色,然后还有一个 backgroundColor 是配置整个页面的背景颜色。

这是配置全局的,就每个页面你配了都会这样,pages 这个就是指定页面的,那如果指定页面的和全局的重复怎么办?是不是和小程序里面也一样?是不是就听指定界面的,自己有用自己的,自己没有是不是就用全局的,是不是和过去的都一样,好,这是我们的一个 pages.json 配置,pages.json 就相当于微信小程序里面的 app.json,照这个配置就可以了。

uni.promisify.adaptor.js

uni.promisify.adaptor.js 是什么东西?它是一个适配器,它是用来适配我们的一些 API 的,比如说我们的 uni.request,它是一个异步的,但是我们可以通过 uni.promisify.adaptor.js 这个适配器,把它变成一个同步的,这个就是它的一个作用。

uni.scss

uni.scss 是什么东西?它是一个样式文件,它是一个全局的样式文件,你可以在这里面写一些全局的样式,比如说你想要设置一些全局的字体,你想要设置一些全局的颜色,都是没问题的。

好,好了之后,那这个东西如果你要详细的去看一下,也很简单,你可以回到 Uniapp 官方文档,找到 uni-app x:

找到这,在这里面有一个全局的一个文件:

不懂,你回来查一下就可以了在这里稍微抄一下就完事了,这东西需要记吗?不需要,你只需要知道去哪儿能够找到这个文档就 OK 了,那么到此为止,这个 Uniapp 项目它的一个基本的一个结构,以及结构里面的每个文件有什么作用就讲清楚了,我们比较常用的例如 pages 去编写我们对应的一些页面,然后 static 存放我们的一些资源,然后呢其他的话就是一个 pages.json,在这里面去做一些,告诉他有哪些页面,每个页面的样式以及全局的样式,或者说添加我们的 navigationBar 这些东西,这些都是比较常常去操作,其他的都不太常去操作。

最后

大家好我是 BNTang, 一个热爱分享的技术的开发者,如果大家觉得我的文章对你有帮助的话,可以关注我的公众号 JavaBoyL,我会在公众号中分享一些IT技术和一些个人的见解,谢谢大家的支持。

我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!

0 人点赞