目录

一、uni-app简介与环境搭建

1、uni-app简介

uni-app概述：

uni-app由来：

uni-app特点：

2、uni-app环境搭建

一、下载HBuilderX，官网地址

二、下载微信开发者工具

三、运行设置

二、uni-app项目创建及运行

1、新建

2、选择类型

3、最后的运行

三、接口的使用

1、没有要求key或者token的

第一步，在methods中，先将数据获取打印

第二步，在onLoad中调用方法

第三步，在data里

2、在遇到有要求key或者token类型的接口时

（1）先看清楚接口的请求参数有什么

（2）就可以在methods中，写获取接口数据的代码，data就可以调用刚刚所写的对象

（3）在onLoad中调用方法

3、渲染

四、云函数，云数据库

1、uniCloud登录，新建

2、云函数的使用

（1）创建云函数

（2）编写云函数文件

（3）在页面调用云函数

3、云数据库

（1）创建云数据

（2）添加云数据，如需添加多条数据重复多遍即可

（3）在云函数中操作云数据库，并获取、返回user表中的数据

（4）在页面调用云函数，获取数据并打印在控制台里面

---

一、uni-app简介与环境搭建

1、uni-app简介

uni-app概述：

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

uni-app由来：

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

uni-app特点：

1、跨更多平台

2、一套代码，多平台运行

3、运行体验好，性能高

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

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

2、uni-app环境搭建

环境搭建步骤：

一、下载HBuilderX，官网地址

HBuilderX-高效极客技巧 (dcloud.io)https://www.dcloud.io/hbuilderx.html

二、下载微信开发者工具

微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html选择合适的版本下载，一步步默认安装即可。安装完成之后，要使用uni-app开发，需要打开微信小程序开发者工具的服务端口，进行微信小程序开发者工具，选择"设置"-->"安全设置"命令，将"服务端口"改完打开状态，如图所示：

三、运行设置

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

亦或者可以选择，选择【工具】-->【设置】-->【运行设置】，在浏览器运行配置输入填入谷歌浏览器的安装路径

谷歌浏览器地址谷歌浏览器下载安装-google chrome官网浏览器下载 (chromegw.com)https://www.chromegw.com/

二、uni-app项目创建及运行

通过HBuilderX可视化界面创建第一个uni-app项目并运行在h5(浏览器)端：

1、新建

打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目

2、选择类型

选择uni-app类型，输入项目名称，选择vue2版本

3、最后的运行

项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。

三、接口的使用

在制作uniapp的项目时，通常会用到接口，以下为几个接口的使用方法：

1、没有要求key或者token的

第一步，在methods中，先将数据获取打印

第二步，在onLoad中调用方法

第三步，在data里

2、在遇到有要求key或者token类型的接口时

（1）先看清楚接口的请求参数有什么

如图

随后将必填的写入data里，选填的也可以写

（2）就可以在methods中，写获取接口数据的代码，data就可以调用刚刚所写的对象

（3）在onLoad中调用方法

3、渲染

之后便可以在<template></template>中渲染出来

四、云函数，云数据库

1、uniCloud登录，新建

（1）进入uniCloud的云服务空间，需要登录跟实名认证，而后点击新建服务空间.

uniCloud云服务空间地址服务空间 - uniCloud (dcloud.net.cn)https://unicloud.dcloud.net.cn/

选择阿里云

（2）建立了之后便可以去HBuilderX工具，创建开发环境，点击之后选择第三个，阿里云

创建成功

随后右击，关联云服务空间，前提是HBuilderX工具已经登录，未登录要点击左下角登录，关联刚刚新建的云服务空间

2、云函数的使用

（1）创建云函数

（2）编写云函数文件

（3）在页面调用云函数

3、云数据库

刚刚讲的是云函数，还有一种就是云数据库

（1）创建云数据

（2）添加云数据，如需添加多条数据重复多遍即可

（3）在云函数中操作云数据库，并获取、返回user表中的数据

（4）在页面调用云函数，获取数据并打印在控制台里面