uniClound是 DCloud 联合阿里云、腾讯云，为开发者提供的基于 serverless 模式和 js 编程的云开发平台。云服务创建项目，使用熟悉的js，轻松搞定前后台整体业务，使前端开发离全栈开发又进一步，尤其是一键生成代码的功能，简直不要太巴适。

        web控制台地址：uniCloud控制台

一、新建项目

        在新建项目之前，首先要把你的HBuilderx升级到最新版本。

        初次体验uniCloud推荐阿里云，因为腾讯云的开户流程更复杂

         HBuilderX 会在项目创建后弹出 uniCloud初始化向导，根据向导部署。

二、关联服务空间

        一个开发者可以拥有多个服务空间，每个服务空间都是一个独立的serverless云环境，不同服务空间之间的云函数、数据库、存储都是隔离的。

2.1 关联云空间

     对项目根目录uniCloud点右键选择关联云服务空间，绑定之前创建的服务空间，或者新建一个服务空间。初次使用都需要新建服务空间。

         学习阶段，推荐使用免费的，只能创建一个云服务空间，时限1年。

 2.2 创建云函数

        uniCloud项目创建并绑定服务空间后，开发者可以创建云函数（云对象是云函数的一种，云函数可泛指普通云函数和云对象）。在uniCloud/cloudfunctions目录右键创建云函数/云对象。

 

 2.3 云函数编写

        创建云函数后，生成一个目录，该目录下自动生成index.js，是该云函数的入口文件，不可改名。如果云函数还需要引入其他js，可在index.js入口文件中引用，同时也在这个文件中编写云函数。

 2.4 调用云函数

        通过uniCloud.callFunction()调用云函数，以在pages/index/index.vue中调用云函数为例，代码如下：

<template>
	<view class="content">
		<button @click="call">显示数据库</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		onShow() {
			if(this.$refs&&this.$refs.udb){
				this.$refs.udb.refresh();
			}
		},
		methods: {
			call(){
				uniCloud.callFunction({
					name:"testfun",
					data:{name:"小白",age:18}
				})
				.then(res=>{
					uni.showModal({
						title:JSON.stringify(res)
					})
				})
				.catch(err=>{
					console.log(err);
				})
			}
		}
	}
</script>

 2.5 运行

        HBuilderX自带一个云函数本地运行环境，运行项目时也默认选择 连接本地云函数。可以在底部控制台中的前端控制台右上角进行切换。可以对testfun云函数点右键上传到uniCloud服务空间，然后在前端控制台右上角切换为 连接云端云函数，那么此时客户端连接的就是真正的现网uniCloud服务器了。

 三、云数据库

        uniCloud提供了一个 JSON 格式的文档型数据库。顾名思义，数据库中的每条记录都是一个 JSON 格式的文档。一个uniCloud服务空间，有且只有一个数据库；一个数据库可以有多个表；一个表可以有多个记录；一个记录可以有多个字段。

3.1 新建云数据库

 

3.2 新增数据

        点击进入新建的数据库(concat)，添加记录->按条输入数据，点击确定，新的数据就会出现在数据库里。

3.3 更改表结构配置

        学习使用，把表结构的增删改查的权限都放开。

3.4 前端展示数据库数据

         通过unicloud-db将数据库的数据发往前端进行展示。

<template>
	<view class="content">
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="users">
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				<uni-list>
					<uni-list-item v-for="item in data" :key="item._id" :title="item.name" :note="item.tel"></uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

运行效果如下：

四、数据操作

4.1 增加

        在pages中新建一个页面，路径pages/add/add.vue，记得要在page.json中注册。新增数据主要通过db.collection("数据库中的表").add(this.新增的数据)来实现。

<template>
	<view>
		<uni-easyinput  v-model="item.name" placeholder="姓名" />
		<uni-easyinput  v-model="item.tel" placeholder="电话" />
		<button @click="addConcat">添加</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{
					name:"",
					tel:""
				}
			}
		},
		methods: {
			addConcat(){
				//数据库
				var db=uniCloud.database();
				//获取表
				db.collection("users")
				.add(this.item)
				.then(res=>{
					uni.showToast({
						title:"添加成功"
					})
				})
				.catch(err=>{
					console.log(err);
				})
			}
		}
	}
</script>

运行效果如下图：

4.2 删除

        数据删除通过数据库中的表.remove(删除的数据)实现，删除数据要有事件触发本案例使用longpress.native，在项目首页中实现删除功能。

<template>
	<view class="content">
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="users">
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				<uni-list>
					<uni-list-item @longpress.native="$refs.udb.remove(item._id)" v-for="item in data" :key="item._id" :title="item.name" :note="item.tel"></uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		methods: {
			call(){
				uniCloud.callFunction({
					name:"testfun",
					data:{name:"小白",age:18}
				})
				.then(res=>{
					uni.showModal({
						title:JSON.stringify(res)
					})
				})
				.catch(err=>{
					console.log(err);
				})
			}
		}
	}
</script>

效果图如下：

4.3 修改

        对数据库中已存在数据进行修改。首先在pages中新建一个update页面（page.json中注册）。在首页中触发数据修改，在update页面中对数据进行修改确认。

pages/index/index.vue

<template>
	<view class="content">
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="users">
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				<uni-list>
					<uni-list-item link :to="'/pages/update/update?item='+JSON.stringify(item)" 
					@longpress.native="$refs.udb.remove(item._id)" v-for="item in data" :key="item._id" :title="item.name" :note="item.tel"></uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		onShow() {
            //首页数据进行展示时，刷新，重新获取数据库数据
			if(this.$refs&&this.$refs.udb){
				this.$refs.udb.refresh();
			}
		},
		methods: {
			call(){
				uniCloud.callFunction({
					name:"testfun",
					data:{name:"小白",age:18}
				})
				.then(res=>{
					uni.showModal({
						title:JSON.stringify(res)
					})
				})
				.catch(err=>{
					console.log(err);
				})
			}
		}
	}
</script>

 pages/update/update.vue

<template>
	<view>
		<uni-easyinput  v-model="item.name" placeholder="姓名" />
		<uni-easyinput  v-model="item.tel" placeholder="电话" />
		<button @click="updateConcat">更改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{
					name:"",
					tel:""
				}
			}
		},
		onLoad(option) {
			this.item=JSON.parse(option.item)
		},
		methods: {
			updateConcat(){
				//获取item
				var item={...this.item};
				//删除id属性
				delete item._id;
				const db=uniCloud.database();
				db.collection("users")
				.doc(this.item._id)//查询一条数据
				.update(item)
				.then(res=>{
					uni.showToast({
						title:"更新成功"
					})
					uni.navigateBack();
				})
				.catch(err=>{
					uni.showModal({
						content:JSON.stringify(err)
					})
				})
			}
		}
	}
</script>

        通过以上步骤，你已经创建了一个uniCloud项目，并可以使用数据库数据进行增删改查了，赶紧打开HBuilderx试试吧。