uni-app学习笔记（一）-- uni-app简介
2026-10-25 20:45:12
uni-app是什么？
uni-app是一个多端开发框架，允许开发者使用一套代码，打包出适用于Web应用、安卓App、iOS App、微信小程序、支付宝小程序、头条小程序、百度小程序等多个平台的应用。
Dcloud与uni-app的背景
Dcloud：Dcloud是一家知名的国产开源开发工具提供商，其知名产品包括HBuilder开发工具和H5+App技术。H5+技术使得前端开发者能够利用JS编写出接近原生规范的安卓和iOS应用。
uni-app的诞生：尽管H5+技术已经相当强大，但Dcloud并未满足于此，他们推出了uni-app，旨在进一步简化开发流程，实现多端统一开发。
uni-app的特点
多端统一开发：通过uni-app，开发者可以编写一套代码，然后根据不同平台的需求进行打包，生成适用于各个平台的应用。
高效开发：uni-app采用了小程序的项目架构，并结合了Vue框架技术，使得熟悉微信小程序开发和Vue框架的开发者能够迅速上手。
丰富的组件和API：uni-app提供了丰富的组件和API，使得开发者能够轻松实现各种功能。
学习成本
对于熟悉微信小程序开发和Vue框架的开发者来说，学习uni-app的成本几乎为零。因为uni-app采用了小程序的项目架构，并结合Vue框架技术来编写，这使得开发者能够迅速适应并上手。
开发规范
为了实现多端兼容，并综合考虑编译速度、运行性能等因素，uni-app约定了以下开发规范：
页面文件：必须遵循Vue单文件组件（SFC）的形式编写页面组件。
标签：靠近小程序规范，即使用小程序的组件写页面标签。
接口能力：靠近微信小程序规范，例如使用uni.request(...)等API。
数据绑定及事件处理：同Vue.js规范，同时补充了App及页面的生命周期，如onLoad、onShow、onHide等。
布局：为兼容多端运行，建议使用flex布局进行开发。
uni-app工程目录结构
一个uni-app工程默认包含以下目录及文件：
Vue.js在uni-app中的使用差异
相比Web平台，Vue.js在uni-app中的使用差异主要集中在两个方面：
新增：uni-app除了支持Vue实例的生命周期，还支持应用启动、页面显示等生命周期。
受限：相比web平台，在小程序和App端部分功能受限，具体参见uni-app官方文档。
uni-app App端内置HTML5+引擎
uni-app的App端内置了HTML5+引擎，这使得开发者可以使用JS直接调用丰富的手机端原生能力。但需要注意的是，在使用H5+ API时，需要遵循一定的规范，具体参见uni-app官方文档。
动手尝试
以下是创建并运行一个uni-app项目的步骤：
下载HBuilderX工具：HBuilderX是Dcloud提供的一款集成开发环境（IDE），支持uni-app的开发。
创建项目：在HBuilderX中，点击工具栏里的“文件”->“新建”->“项目”，选择uni-app，输入工程名，如“hello-uniapp”，点击创建即可成功创建uni-app项目。
运行项目：
浏览器运行：进入hello-uniapp项目，点击工具栏的“运行”->“运行到浏览器”->选择浏览器，即可在浏览器里面体验uni-app的H5版。
真机运行：连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的“运行”->“真机运行”->选择运行的设备，即可在该设备里面体验uni-app。
小程序模拟器运行：进入hello-uniapp项目，点击工具栏的“运行”->“运行到小程序模拟器”->选择微信开发者工具，即可在微信开发者工具里面体验uni-app。
发布项目：
发布为原生App：在HBuilderX工具栏，点击“发行”，选择“原生app-云端打包”，按照提示进行配置和打包。
发布为H5网页应用：在manifest.json的可视化界面进行配置，然后在HBuilderX工具栏点击“发行”，选择“网站-H5手机版”，即可生成H5的相关资源文件。
官方示例和第三方案例
uni-app提供了丰富的官方示例和第三方案例，供开发者参考和学习。具体链接如下：
通过学习和实践这些示例，开发者可以更快地掌握uni-app的开发技巧，并提升自己的开发能力。
热门标签
