uni-app心得

文章目录

提示：这里是uni-app学习

---

文章目录

• 文章目录
• 前言
• 一、uni-app是什么？
• 二、使用
  • 1.安装相关软件和插件
  • 2.api使用
  • 3.css使用
• 总结

---

前言

这是个人的uni-app文章，分享给大家学习，做得不好请勿喷！！！

1.uni-app是什么?

Uni-app是一款基于Vue.js框架的开发工具，是由腾讯开发的一款开源的跨平台应用开发框架。Uni-app框架的主要特点是一次开发，多端运行。开发者只需要编写一套代码，即可将同一应用发布到多个平台，包括iOS和Android原生应用、H5应用、小程序应用、快应用等。

Uni-app可以理解为一套前端技术标准化的解决方案，是一个全新的应用开发模式，所开发的应用可以同时发布到多个主流应用市场和各种类型的浏览器中，并可以融合系统原生功能和UI元素，获得更好的用户体验和更高效的开发效率。Uni-app具有以下优点：

1、跨平台兼容性好：一套代码可以在多种平台上运行，大大降低了开发多个版本的成本和难度。

2、开发门槛低：采用Vue.js框架，开发人员熟悉Vue.js的话，上手会很快，同时还提供了丰富的组件和插件，降低开发难度。

3、性能优化：利用了WebAssembly等优化技术，提高了应用性能和加载速度。

4、本地化支持：支持多语言和各种本地化操作，丰富了应用的本地化特性。

5、官方支持及社区：Uni-app得到了腾讯以及众多开发者的积极支持和参与，并且拥有庞大的社区支持。

Uni-app是一款跨平台应用开发框架，适用于多种应用平台和形态，具有跨平台兼容性好、开发门槛低、性能优化、本地化支持等多种优点，已经成为越来越多开发者的首选。

Uni-app的主要开发工具如下：

1、HBuilder X
HBuilder X 是一款主要为uni-app提供开发支持的IDE，提供了代码编辑、实时预览、包管理、调试、构建及更多功能。 HBuilder X 在开发中具有多端预览、云打包等功能，特别是云打包功能方便了开发者在本地开发，云端构建，无需强制安装多个SDK等工具。

2、Vue.js
Uni-app 是基于 Vue.js 技术栈构建的，Vue.js 是一款轻量级、高性能、易上手的 JavaScript 框架。在 Uni-app 中使用 Vue.js，可以让开发者使用 Vue.js 的语法编写代码。

3、uni-ui
Uni-app 可以使用 uni-ui 组件库，它是一款基于 Vue.js 编写的组件库，提供了丰富的 UI 组件，使开发者可以在自己的应用程序中轻松添加丰富的用户界面。

4、DCloud
DCloud 是一个专门为 Uni-app 提供的云服务，为开发者提供了多种服务，如云端打包、一键更新、后端接口云函数、持续集成等多种服务。并且具有快速响应和可靠性高的优点。

Uni-app的主要开发工具包括HBuilder X, Vue.js, uni-ui和DCloud。开发者可以使用这些工具来迅速创建高质量、跨平台和易于维护的应用程序。Uni-app 的开发生态圈非常丰富，开发者可以通过社区讨论和参与应用程序发布，获取更多的支持和资源。

2.使用

（1） uni-app安装相关软件和插件

开发Uni-app需要安装以下相关软件和插件：

1、HBuilder X：HBuilder X是uni-app官方推荐使用的开发工具，需要去 HBuilder X 官方网站下载并安装。

2、Vue.js：Uni-app是基于Vue.js技术栈构建的，需要安装Vue.js开发框架。可以在官网中下载安装包或使用npm安装。

3、Node.js：需要安装Node.js环境，包括npm包管理器。

4、uni-ui：Uni-app可以使用uni-ui组件库，需要安装uni-ui插件。可以在HBuilder X官方插件市场中下载安装。

5、DCloud：DCloud是专门为Uni-app提供的云服务，包括云端打包等功能，需要注册并开通相应的服务。

总之，开发Uni-app需要安装HBuilder X、Vue.js、Node.js、uni-ui和DCloud等相关软件和插件。其中，HBuilder X是主要的开发工具，Vue.js是Uni-app的基础技术框架，Node.js是开发必备工具，uni-ui是提供UI组件库，DCloud是提供云服务的平台。安装并配置好这些软件和插件，可以方便快捷地开始Uni-app的开发工作。

检查电脑有没有装node，node是一个很重要的文件，打开终端使用cmd打开之后使用node -v指令查看电脑上面有没有装node，有版本号就代表电脑上装有node。

下面是一些好用的插件安装

（2）api的使用

Uni-app的API可以从两个方面来理解，一是平台级API，二是uni-app扩展API。

1、平台级API。Uni-app在具有多平台兼容性的同时，针对每个平台也提供了自身特有的API。例如，对于原生应用程序，可以使用原生API调用设备的摄像头，获取设备的位置信息，读取设备中的文件等，这些API都是由各个平台的官方API提供。Uni-app不会限制或替换这些API。开发者可以直接使用相关平台提供的API进行开发。

2、uni-app扩展API。除了平台级API外，Uni-app还提供了自身扩展的一些API，可以方便地完成开发中常见的功能。这些API基于Uni-app封装，可以使用类Vue组件内置的插件实现。这些API包括：

- uni.request：发起一个网络请求。
- uni.showToast/uni.showModal/uni.showLoading：弹出对话框。
- uni.navigateTo/uni.redirectTo/uni.switchTab/uni.reLaunch：页面跳转API。
- uni.getStorageSync/uni.setStorageSync/uni.clearStorageSync/uni.removeStorageSync：存储数据相关API。
- uni.getSystemInfo/uni.getSystemInfoSync：获取设备信息。

在使用这些API时，需要导入相应的API组件，并按照API说明进行操作。

总之，Uni-app提供了平台级API和自身扩展的API供开发者进行开发。开发者可以根据需求选择相应的API，马上开始Uni-app的开发工作。

 （3）css的使用

在HBuilder X里面可以使用插件scss更好理清我们的样式麻烦程度，比以往便捷得多