uni-app环境搭建与调用API接口

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

uni-app由来：是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者需要针对不同平台开发多套代码，增加了开发和维护的成本。DCloud公司正是看到了这些问题，因此决心打造一款终极的跨平台解决方案，此时，uni-app就应运而生，Uni-app的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。

一、uni-app环境搭建

环境搭建步骤：

一、下载HBuilderX，官网下载地址：HBuilderX-高效极客技巧

选择对应的版本下载即可：

二、下载安装微信开发者工具，下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档

选择合适的版本下载，一步步默认安装即可。安装完成之后，要使用uni-app开发，需要打开微信小程序开发者工具的服务端口，进行微信小程序开发者工具，选择"设置"-->"安全设置"命令，将"服务端口"改完打开状态，如图所示：

三、打开HBuilderX工具，选择【工具】-->【设置】-->【运行设置】，在微信开发者工具路径输入框中填入微信开发者工具的安装路径。

二、API接口调用

常用API

概述：uni-app 是一个跨平台应用开发框架，具有丰富的 API 可供开发者使用，涵盖了页面开发、网络请求、

数据存储、设备信息获取、用户交互等多个方面。以下是 uni-app 中一些常用 API 的概述。

页面导航 API：包括 uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab 等用于页面跳转的 API，可以实现页面

之间的跳转和切换。 

数据存储 API：包括 uni.setStorageSync、uni.getStorageSync、uni.removeStorageSync 等用于本地数据存储的 API，可以

实现数据的存储和读取操作。

网络请求 API：包括 uni.request、uni.uploadFile、uni.downloadFile 等用于发起网络请求的 API，支持处理 HTTP 请求、

上传文件、下载文件等操作。

用户界面 API：包括 uni.showToast、uni.showModal、uni.showLoading、uni.showActionSheet 等用于显示用户界面的 API，

可以实现各种提示、弹窗、加载动画等功能。

多媒体 API：包括 uni.chooseImage、uni.previewImage、uni.chooseVideo、uni.createAudioContext 等用于处理图片、

视频、音频等多媒体内容的 API。

位置信息 API：包括 uni.getLocation、uni.openLocation 等用于获取和展示地理位置信息的 API，支持获取当前位置、

查看地图等功能。

网络请求API

一、uni.request 是一个在uni-app框架中用来发起网络请求的API。通过这个API，开发者可以在uni-app中实现向服务器端发送HTTP请求并获取响应数据的功能。uni.request允许开发者指定请求的URL、请求方法、请求头部信息、请求数据等内容，以及定义请求成功和失败时的处理逻辑。开发者可以利用uni.request来实现与服务器端进行数据交互的功能，例如获取远程数据、上传文件等操作。 在uni-app中，uni.request是一种常用的实现网络请求的方法，开发者可以根据自己的需求灵活运用该API来实现网络请求功能。

使用uni.request发起接口数据请求的实际案例：

描述：接口文档提供了一个get请求的接口，需要把接口的分类数据请求回来并渲染到页面当中。

具体步骤如下：

1、在method里面定义一个用于请求分类数据的方法 ，方法名为getClassifyList

2、在getClassifyList方法里面使用uni.request API请求接口的数据

3、把请求回来的数据渲染到页面上。

实际操作的代码案例如下：