uniCloud 云开发小程序。主体界面图下
5951687516826_.pic.jpg
5961687516827_.pic.jpg
关键步骤如下
- web控制台地址：uniCloud控制台
-
HBuilderX 会在项目创建后弹出 uniCloud初始化向导，根据向导部署。
11.png
二、关联服务空间
- 一个开发者可以拥有多个服务空间，每个服务空间都是一个独立的serverless云环境，不同服务空间之间的云函数、数据库、存储都是隔离的。
2.1 关联云空间
-
对项目根目录uniCloud点右键选择关联云服务空间，绑定之前创建的服务空间，或者新建一个服务空间。初次使用都需要新建服务空间。
22.png
2.2 创建云函数
-
uniCloud项目创建并绑定服务空间后，开发者可以创建云函数（云对象是云函数的一种，云函数可泛指普通云函数和云对象）。在uniCloud/cloudfunctions目录右键创建云函数/云对象。
55.png
66.png
2.3 云函数编写
-
创建云函数后，生成一个目录，该目录下自动生成index.js，是该云函数的入口文件，不可改名。如果云函数还需要引入其他js，可在index.js入口文件中引用，同时也在这个文件中编写云函数。
77.png
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服务器了。
88.png
三、云数据库
uniCloud提供了一个 JSON 格式的文档型数据库。顾名思义，数据库中的每条记录都是一个 JSON 格式的文档。一个uniCloud服务空间，有且只有一个数据库；一个数据库可以有多个表；一个表可以有多个记录；一个记录可以有多个字段。
3.1 新建云数据库
99.png
3.2 新增数据
-
点击进入新建的数据库(concat)，添加记录->按条输入数据，点击确定，新的数据就会出现在数据库里。
99.png
3.3 更改表结构配置
-
学习使用，把表结构的增删改查的权限都放开。
111.png
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.新增的数据)来实现。
133.png
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页面中对数据进行修改确认。
<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>
网友评论