uni-app从入门到实践

目录

一、uni-app简介

1.由来

2.简介

3.五个特性

二、环境搭建

步骤1：安装Node.js

步骤2：安装HBuilderX

步骤3：安装Vue CLI

步骤4：安装Uni-app插件

步骤5：创建Uni-app项目

步骤6：运行Uni-app项目

步骤7：开始开发

查询Node.js版本

查询Vue CLI版本

三、uni-app中的路由跳转

四、uni-app的生命周期

1. 路由传参：

六、uni-app常用的API

页面生命周期相关API:

组件生命周期相关API:

事件处理API:

网络请求API:

存储API:

界面交互API:

多媒体API:

七、数据的缓存 

---

一、uni-app简介

1.由来

Uni-app 是由 DCloud（数字天堂）推出的一款跨平台应用开发框架。DCloud 是中国领先的移动应用开发技术服务商，致力于提供基于 HTML5 的移动应用开发解决方案。

Uni-app 的由来可以追溯到 DCloud 在 HTML5 移动应用开发领域的积累和技术创新。在过去几年中，HTML5 技术逐渐成熟，越来越多的开发者开始将其应用于移动应用开发中。然而，由于不同平台之间的差异和兼容性问题，跨平台开发一直是 HTML5 移动应用开发的一个挑战。

为了解决跨平台开发的难题，DCloud 推出了 Uni-app 框架。Uni-app 利用了 Vue.js 的语法和开发方式，结合了 DCloud 多年的移动应用开发经验，实现了一套代码多端发布的目标。开发者可以使用 Uni-app 编写一次代码，然后通过编译工具将其发布到 iOS、Android、Web 等多个平台，大大提高了开发效率。

2.简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

3.五个特性

(1)跨更多平台

(2)一套代码，多平台运行

(3)运行体验好，性能高

(4)开发生态、周边生态丰富（组件丰富）

(5)通用技术栈，学习/开发成本低

二、环境搭建

步骤1：安装Node.js

1. 访问 Node.js官网。
2. 根据你的操作系统下载相应版本的Node.js安装程序。
3. 执行安装程序，按照提示完成Node.js的安装。

步骤2：安装HBuilderX

1. 访问 HBuilderX官网。
2. 下载适用于你的操作系统的HBuilderX安装程序。
3. 执行安装程序，按照提示完成HBuilderX的安装。

步骤3：安装Vue CLI

Uni-app基于Vue.js开发，因此需要安装Vue CLI来创建和管理Vue项目。

1. 打开命令行工具（如CMD或终端）。
2. 运行以下命令来全局安装Vue CLI：

   npm install -g @vue/cli

步骤4：安装Uni-app插件

1. 打开HBuilderX。
2. 在HBuilderX的扩展市场中搜索并安装Uni-app插件。

步骤5：创建Uni-app项目

1. 在HBuilderX中选择“文件” -> “新建” -> “项目”。
2. 选择“Uni-app”项目类型，填写项目名称和存储路径，点击“创建”按钮。
3. 选择项目模板（如默认模板或Vue模板）并等待项目创建完成。

步骤6：运行Uni-app项目

1. 在HBuilderX中打开已创建的Uni-app项目。
2. 点击工具栏中的“运行”按钮，选择要运行的平台（如微信小程序、App等）。
3. 
4. 等待编译和打包完成，预览项目效果。

步骤7：开