uniClound云开发创建流程

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(){//获取itemvar 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试试吧。