uni-app从入门到实践

最新推荐文章于 2024-04-28 15:58:22 发布

野原新之助00

最新推荐文章于 2024-04-28 15:58:22 发布

阅读量807

点赞数 13

文章标签： uni-app

本文链接：https://blog.csdn.net/anzz0827/article/details/137587974

版权

一、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

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

步骤2：安装HBuilderX

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

步骤3：安装Vue CLI

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

打开命令行工具（如CMD或终端）。
运行以下命令来全局安装Vue CLI：
```
npm install -g @vue/cli
```

步骤4：安装Uni-app插件

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

步骤5：创建Uni-app项目

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

步骤6：运行Uni-app项目

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

步骤7：开始开发

现在，你已经成功搭建了Uni-app的开发环境，并创建了一个新的Uni-app项目。接下来，你可以根据需要修改和添加页面、组件等内容，开始进行跨平台开发了。

如果需要查询Node.js和Vue CLI的版本，可以打开cmd命令行工具

查询Node.js版本

打开命令行工具（如CMD或终端），然后输入以下命令：

node -v

按下回车键执行命令，即可在命令行中看到已安装的Node.js的版本号。

查询Vue CLI版本

同样在命令行中输入以下命令：

vue --version

按下回车键执行命令，你将看到已安装的Vue CLI的版本号。

通过这些命令，你可以方便地查询已安装的Node.js和Vue CLI的版本，以便在开发过程中进行参考和管理。

三、uni-app中的路由跳转

跳转方式	特点
uni.navigateTo	保留当前页面，只能跳转非tabBar页面
uni.switchTab	关闭所有非tabBar页面，只能打开tabBar页面
uni.redirectTo	关闭卸载当前页面，只能打开非tabBar页面
uni.reLaunch	关闭卸载所有页面，可以打开任意页面
uni.navigateBack	返回上衣页面的delta：返回页数
<navigator >	open-type属性决定跳转方式

四、uni-app的生命周期

以下是 uni-app 中常见的生命周期介绍:

应用生命周期（App 生命周期）：
- onLaunch(options)：应用初始化完成时触发，在应用生命周期内仅触发一次。
- onShow(options)：应用启动或从后台进入前台时触发。
- onHide()：应用从前台进入后台时触发。
- onError(err)：应用发生错误时触发。
页面生命周期（Page 生命周期）：
- onLoad(options)：页面加载时触发，可以在这里获取页面的参数。
- onShow()：页面显示时触发，可以在这里处理一些页面显示相关的操作。
- onReady()：页面初次渲染完成时触发。
- onHide()：页面隐藏时触发。
- onUnload()：页面卸载时触发，可以在这里进行一些清理工作。
组件生命周期（Component 生命周期）：
- beforeCreate：实例刚刚被创建，属性 data、methods 等属性尚未初始化。
- created：实例已经创建，属性已经绑定，但是尚未生成真实的 DOM，可以在这里进行数据的初始化操作。
- beforeMount：模板编译/挂载之前触发。
- mounted：模板编译/挂载完成时触发，DOM 已经渲染完毕，可以在这里进行 DOM 操作。
- beforeUpdate：组件更新之前触发。
- updated：组件更新完成时触发。
- beforeDestroy：组件销毁之前触发。
- destroyed：组件销毁完成时触发。

这些生命周期事件可以帮助开发者在不同阶段执行相应的操作，以实现更精细化的控制和管理。在实际开发中，根据业务需求，合理利用生命周期事件可以提升应用的性能和用户体验。

五、uni-app的页面传参

1. 路由传参：

通过路由跳转时，在跳转路径中传递参数，接收参数在目标页面的 onLoad 生命周期中获取。

传递参数：

// 在页面 A 中跳转到页面 B，并传递参数
uni.navigateTo({
  url: '/pages/B/B?param1=value1&param2=value2'
});

接收参数：

// 在页面 B 的 onLoad 生命周期中获取参数
onLoad: function(options) {
  // options 中包含页面跳转过程中传递的参数
  console.log(options.param1); // 输出 value1
  console.log(options.param2); // 输出 value2
}

六、uni-app常用的API

页面生命周期相关API:
- onLoad: 页面加载时触发。
- onShow: 页面显示时触发。
- onReady: 页面初次渲染完成时触发。
- onHide: 页面隐藏时触发。
- onUnload: 页面卸载时触发。
组件生命周期相关API:
- beforeCreate: 实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- created: 实例创建完成后被立即调用。
- beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
- mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
- beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
- updated: 更改后，Vue 实例更新完毕。
事件处理API:
- @click: 点击事件。
- @change: 输入内容改变事件。
- @submit: 表单提交事件。
网络请求API:
- uni.request: 发起网络请求。
- uni.uploadFile: 上传文件。
- uni.downloadFile: 下载文件。
存储API:
- uni.setStorageSync / uni.setStorage: 同步 / 异步方式设置本地缓存数据。
- uni.getStorageSync / uni.getStorage: 同步 / 异步方式获取本地缓存数据。
- uni.removeStorageSync / uni.removeStorage: 同步 / 异步方式移除本地缓存数据。
界面交互API:
- uni.showToast: 显示消息提示框。
- uni.showLoading: 显示 loading 提示框。
- uni.showModal: 显示模态对话框。
- uni.navigateTo: 保留当前页面，跳转到应用内的某个页面。
- uni.redirectTo: 关闭当前页面，跳转到应用内的某个页面。
多媒体API:
- uni.chooseImage: 从相册选择图片或使用相机拍照。
- uni.previewImage: 预览图片。
- uni.chooseVideo: 拍摄视频或从手机相册中选择视频。
- uni.saveImageToPhotosAlbum: 保存图片到系统相册。

七、数据的缓存

uni-app 是一个使用 Vue.js 开发跨平台应用的框架，它支持在多个平台上运行，包括小程序、H5 等。在 uni-app 中，你可以使用各种方法来进行数据的缓存，以提升程序性能和用户体验。以下是一些常见的数据缓存方法：

uni.setStorage / uni.getStorage: 这是 uni-app 中最基本的数据缓存方法，可以将数据存储在本地缓存中。通过 uni.setStorage 将数据存储到本地，然后可以使用 uni.getStorage 来获取存储的数据。这种方法适合存储少量的数据，比如用户的设置信息、临时数据等。
vuex: 如果你的应用使用了 Vuex 进行状态管理，那么可以将需要缓存的数据存储在 Vuex 的状态中。这样可以方便地在应用的不同页面之间共享数据，并且可以通过持久化插件（如 vuex-persistedstate）将 Vuex 的状态持久化到本地存储中，以实现数据的缓存。
IndexedDB: 对于需要存储大量结构化数据的情况，可以使用 IndexedDB 来进行数据缓存。IndexedDB 是浏览器提供的一种本地数据库，可以在客户端存储大量数据，并支持复杂的查询操作。在 uni-app 中，你可以使用第三方库（如 dexie.js）来简化 IndexedDB 的操作。
缓存插件: uni-app 提供了一些专门用于数据缓存的插件，如 uni-simple-router 中的缓存功能，可以将页面的状态进行缓存，以提升页面的加载速度和用户体验。

总结

uni-app 是一个跨平台的应用开发框架，基于 Vue.js 生态系统构建，可以同时在多个平台上运行，包括iOS、Android、H5等。该框架具有简单易用、高效快速、开发成本低等特点。在博客中，我们深入探讨了 uni-app 的由来、特性、环境搭建、路由跳转、生命周期、常用 API 和数据缓存等内容。通过这些内容的介绍，读者可以全面了解 uni-app 的基本概念和开发要点，快速上手 uni-app 开发，并且能够利用 uni-app 轻松实现跨平台应用的开发和部署。 uni-app 的出现为开发者提供了一种简单高效的跨平台解决方案，极大地提升了移动应用开发的效率和灵活性。

野原新之助00

关注

13
点赞
踩
28

收藏

觉得还不错? 一键收藏
2
评论
uni-app从入门到实践

Uni-app 是由 DCloud（数字天堂）推出的一款跨平台应用开发框架。DCloud 是中国领先的移动应用开发技术服务商，致力于提供基于 HTML5 的移动应用开发解决方案。Uni-app 的由来可以追溯到 DCloud 在 HTML5 移动应用开发领域的积累和技术创新。在过去几年中，HTML5 技术逐渐成熟，越来越多的开发者开始将其应用于移动应用开发中。然而，由于不同平台之间的差异和兼容性问题，跨平台开发一直是 HTML5 移动应用开发的一个挑战。
复制链接

扫一扫