本文介绍了uni-app作为跨平台应用框架，允许开发者使用一套代码进行多平台开发，提高效率和代码复用。内容涵盖了uni-app的基础概念、组件和API支持、性能优势，以及创建项目的方式，特别强调了HBuilderX与vue-cli创建项目的区别。文中还详细阐述了项目目录结构，包括uni-ui和Hello uni-app模板的目录，并讲解了小程序组件的存放目录和使用方式。最后，通过一个简单的登录注册表单实例展示了uni-app的实践应用。
Uni-app是一个基于Vue.js开发的跨平台应用框架，它可以让开发者使用一套代码同时构建多个平台的应用程序，包括微信小程序、H5、App（iOS和Android）、快应用等。
Uni-app采用统一的语法和组件库，在编写代码时不需要考虑平台差异，通过编译器将代码转化为对应平台的应用。这样开发者只需学习一次，就可以在多个平台上开发应用，提高开发效率和代码复用率。
Uni-app提供了丰富的组件和API，支持常见的应用开发需求，如页面路由管理、网络请求、数据绑定、组件化开发等。同时，它也兼容Vue.js生态系统，可以使用Vue.js的语法和特性进行开发。
Uni-app具有较好的性能表现和用户体验，并且得到了广泛的应用和社区支持。对于想要开发跨平台应用的开发者来说，Uni-app是一个方便、高效的选择。
需要注意的是，Uni-app虽然可以实现跨平台开发，但对于某些平台特有的功能或限制可能需要进行额外处理或适配。在开发过程中需要参考平台的开发文档，以确保应用程序能够正常运行和具备平台特色功能。
下面是创建uni-app
创建 uni-app 项目有两种方式：第一种是通过官方的开发者工具 HBuilder 来创建，第二种是通过 vue-cli 命令行创建。
2. 使用 HBuilderX 与使用 cli 创建项目的主要区别
使用 cli 创建项目，编译器是安装在单独的项目下面的，升级时需要手动命令升级，只对这一个项目生效。
使用 HBuilderX 创建项目，编译器是装在 HBuilderX 的插件目录下面了，HBuilderX 版本更新，编译器就会一起更新升级，对所有项目生效。日常开发建议大家直接使用 HBuilder 创建项目就可以了。
3. HBuilder创建项目
HBuilderX 是 uni-app 官方推出的开发者工具，里面内置了开发环境，不需要额外配置 nodejs 环境，可以帮我们省去很多麻烦。
2. uni-ui 项目目录介绍
创建项目时，我们可以选择创建什么类型的模板，如果选择 uni-ui 项目模板，系统就会自动帮我们生成下面的项目目录。
各文件的作用如下：
| 文件名称 | 作用 |
|---|---|
| components | 是一个用来存放组件的文件夹，从外部引用的组件，或者自己自定义的组件都是放在这个文件夹中 |
| pages | 是一个用来存放所有页面的文件夹，也是我们经常操作的一个目录 |
| static | 是一个存放静态资源的文件夹，例如图片等 |
| unpackage | 是打包目录，存放打包后的文件。有些新建项目目录中没有这个文件夹，在微信开发者工具等编译平台运行后，也会生成这个文件。 |
| App.vue | 是页面入口文件，所有页面都是在 App.vue 下进行切换的，可以调用应用的生命周期函数 |
| main.js | 是项目入口文件，主要用来初始化 vue 实例并使用需要的插件 |
| manifest.json | 是应用配置文件，用于指定应用的名称、图标、权限等 |
| pages.json | 是全局配置文件，可以配置页面文件路径、窗口样式、原生的导航栏、底部 tab 栏等 |
| uni.scss | 是 uni-app 的样式包。在其他文件中可以快速引用样式包里面的样式 |
其中 unpackage 打包目录，存放的是打包后的文件，有时候打包后会出现图片或者组件失效的情况，可以检查一下引用路径是否有错误。
3. Hello uni-app 项目目录介绍
创建项目时，选择 Hello uni-app 项目模板，项目创建完成后，会帮我们生成下面的项目目录。其中有几个文件与 uni-ui 项目目录重复了，作用都是一样的。
各文件的作用如下：
| 文件名称 | 作用 |
|---|---|
| common | 是存放公共 js 和 css 的文件夹 |
| components | 是用来存放组件的文件夹 |
| hybrid | 是存放本地网页 .html 文件的文件夹 |
| pages | 是用来存放所有页面的文件夹 |
| platforms | 是存放各平台专用页面的文件夹，如果想把各平台的页面文件更彻底的分开，可以 platforms 目录中创建子目录，存放不同平台的页面文件 |
| static | 是存放静态资源的文件夹 |
| store | 是 vuex 状态管理文件夹，在 uni-app 项目内置了 vuex，使用时直接在 main.js 里面配置一下就可以了 |
| wxcomponents | 存放小程序组件的目录，详见 2.1 |
| unpackage | 打包目录 |
| App.vue | 页面入口文件 |
| main.js | 项目入口文件 |
| manifest.json | 应用配置文件 |
| package.json | 是项目的主配置文件，里面包含了 uni-app 项目的基本描述信息、项目所依赖的各种第三方库以及版本信息、以及可执行的脚本信息 |
| pages.json | 全局配置文件 |
| template.h5.html | 是 h5 端的网页模板文件 |
| uni.scss | uni-app 的样式包 |
4. 各平台小程序组件存放目录
uni-app 还有一个非常牛的地方，就是支持在 App 和小程序中使用小程序自定义的组件，支持情况如下：
| 平台 | 支持情况 | 小程序组件存放目录 |
|---|---|---|
| H5 | 从 HBuilderX2.4.7 起，支持微信小程序组件 | wxcomponents |
| App（不含 nvue） | 支持微信小程序组件 | wxcomponents |
| 微信小程序 | 支持微信小程序组件 | wxcomponents |
| 支付宝小程序 | 支持支付宝小程序组件 | mycomponents |
| 百度小程序 | 支持百度小程序组件 | swancomponents |
| 字节跳动小程序 | 支持字节跳动小程序组件 | ttcomponents |
| QQ 小程序 | 支持 QQ 小程序组件 | wxcomponents</ |
最低0.47元/天 解锁文章
扫一扫
502
到【灌水乐园】发言
