Uni-app项目的建立与如何使用云开发平台

前言

大半年的时间，项目从秋天到春天，从管理后台到APP再到数据大屏，技术栈从vue3到uniApp再到nuxt3，需求不停的改，注释掉代码都快到项目总体的三分之一。

一，项目技术栈分析

1.1 项目框架

当前，我正参与的项目框架采用uniApp Vue2，这是一个建立在vue.js之上的前端框架，它使开发者能够通过编写一套代码即可兼容多个平台。在项目的初期阶段，主要涉及一些基础页面的复现，这时候框架没有显著的不足之处。然而，随着项目的深入，特别是在需要引入更多原生功能的阶段，uniApp Vue的局限性开始显现，存在许多不支持的功能。如果此时你不熟悉如何在vue中引入nvue文件，你可能就会像我一般，不得不求助于HTML5+的API来实现对安卓原生能力的调用。基于我的有限经验，如果你的项目需求涉及到较多的原生功能，我建议采用uniApp Nvue来构建你的项目，它更加适合这类需求。

1.2组件库

Uni-app一共有四个常用组件库，分别是内置组件库、扩展组件、自定义组件和第三方组件。其中更推荐使用内置组件，内置组件的兼容性最好，内存资源也少；最不推荐使用第三方组件，第三方组件不仅内存资源大，兼容性也不好。

1.3 UI组件库

项目使用UI组件库是多平台快速开发的UI框架
uView UI，是全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水 。

二、普通项目的创建

我们创建项目使用的编译工具是HBuilder X。首先我们先点击文件，在里面找到新建，页面如图，

注意这里统一选择Vue2，然后给项目起个名字就可以新建一个项目。成功的页面如下，

左边第一个文件夹是一些依赖文件，往下是存放js文件和css文件的，再往下是页面，我们要写的样式就在这里新建，再往下是存放图片和图标的文件夹，最后那些都是项目的依赖。我说几个用的上的吧，pages.json这里是相当于页面的一个路由，在里面可以调整先出什么页面之类的和页面的主要配置。

三、云平台的项目的创建

3.1项目的创建

首先我们先点击文件，在里面找到新建，页面如图，

推荐使用阿里云的云平台，因为阿里云的平台可以免费试用一个月。

进入这个页面后，也是先给项目起个名字，然后点击建立就可以生成项目了，效果如图，

按照惯例还是介绍一下这些文件，首先第一个文件是一个云开发的控制中心，里面下存放的有云开发的云函数和一些依赖包。建好这些文件后我们怎么去数据库插入数据呢？如下操作，首先我们把光标移动到uniCloud这个文件上面，点击右键先打开uniCloud web控制台，然后会进入到云开发平台，如下图，

我们进入这个页面后就可以在云数据库建表插入数据了。

3.2把云数据库的数据返回给前端

首先把光标移动到cloudfunctions这个文件下，如何建立一个查询的云函数，查询全部数据，如图，

查询的代码如下，

'use strict';
//async 异步 搭配 await
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	var db= uniCloud.database();
	var  list=await db.collection('newlist').get();
	//返回数据给客户端
	return {msg:200,list};
};

利用这个代码，前端就可以获取到云数据库的数据。

3.3前端如何获取到这个数据并渲染出来

我们进入需要渲染的页面，然后利用如下代码实现获取，

getnewlist() {
				uniCloud.callFunction({
					name: "getnewlist",
					success: (res) => {
						console.log(res);
						this.newlist = res.result.list.data;
						//console.log(this.newlist)
					}
				})
			}

这个代码需要在methods里面写，写错地方不能执行。

四、总结

普通项目不能直接从数据库获取数据这对我们实时更新的数据来说不好，更推荐灵活多变的云开发。再提一嘴，云开发平台的请求每天有次数限制，当我们不使用的时候一定要记得关掉，不然空间会不够。

编译工具HBuilder X的下载连接：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架