uniCloud 云開發(fā)小程序。主體界面圖下
5951687516826_.pic.jpg
5961687516827_.pic.jpg
關(guān)鍵步驟如下
- web控制臺地址：uniCloud控制臺
-
HBuilderX 會在項目創(chuàng)建后彈出 uniCloud初始化向?qū)?，根?jù)向?qū)Р渴稹?/p>
11.png
二、關(guān)聯(lián)服務(wù)空間
- 一個開發(fā)者可以擁有多個服務(wù)空間，每個服務(wù)空間都是一個獨(dú)立的serverless云環(huán)境，不同服務(wù)空間之間的云函數(shù)、數(shù)據(jù)庫、存儲都是隔離的。
2.1 關(guān)聯(lián)云空間
-
對項目根目錄uniCloud點(diǎn)右鍵選擇關(guān)聯(lián)云服務(wù)空間，綁定之前創(chuàng)建的服務(wù)空間，或者新建一個服務(wù)空間。初次使用都需要新建服務(wù)空間。
22.png
2.2 創(chuàng)建云函數(shù)
-
uniCloud項目創(chuàng)建并綁定服務(wù)空間后，開發(fā)者可以創(chuàng)建云函數(shù)（云對象是云函數(shù)的一種，云函數(shù)可泛指普通云函數(shù)和云對象）。在uniCloud/cloudfunctions目錄右鍵創(chuàng)建云函數(shù)/云對象。
55.png
66.png
2.3 云函數(shù)編寫
-
創(chuàng)建云函數(shù)后，生成一個目錄，該目錄下自動生成index.js，是該云函數(shù)的入口文件，不可改名。如果云函數(shù)還需要引入其他js，可在index.js入口文件中引用，同時也在這個文件中編寫云函數(shù)。
77.png
2.4 調(diào)用云函數(shù)
- 通過uniCloud.callFunction()調(diào)用云函數(shù)，以在pages/index/index.vue中調(diào)用云函數(shù)為例，代碼如下：
<template>
<view class="content">
<button @click="call">顯示數(shù)據(jù)庫</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 運(yùn)行
-
HBuilderX自帶一個云函數(shù)本地運(yùn)行環(huán)境，運(yùn)行項目時也默認(rèn)選擇 連接本地云函數(shù)?？梢栽诘撞靠刂婆_中的前端控制臺右上角進(jìn)行切換?？梢詫estfun云函數(shù)點(diǎn)右鍵上傳到uniCloud服務(wù)空間，然后在前端控制臺右上角切換為 連接云端云函數(shù)，那么此時客戶端連接的就是真正的現(xiàn)網(wǎng)uniCloud服務(wù)器了。
88.png
三、云數(shù)據(jù)庫
uniCloud提供了一個 JSON 格式的文檔型數(shù)據(jù)庫。顧名思義，數(shù)據(jù)庫中的每條記錄都是一個 JSON 格式的文檔。一個uniCloud服務(wù)空間，有且只有一個數(shù)據(jù)庫；一個數(shù)據(jù)庫可以有多個表；一個表可以有多個記錄；一個記錄可以有多個字段。
3.1 新建云數(shù)據(jù)庫
99.png
3.2 新增數(shù)據(jù)
-
點(diǎn)擊進(jìn)入新建的數(shù)據(jù)庫(concat)，添加記錄->按條輸入數(shù)據(jù)，點(diǎn)擊確定，新的數(shù)據(jù)就會出現(xiàn)在數(shù)據(jù)庫里。
99.png
3.3 更改表結(jié)構(gòu)配置
-
學(xué)習(xí)使用，把表結(jié)構(gòu)的增刪改查的權(quán)限都放開。
111.png
3.4 前端展示數(shù)據(jù)庫數(shù)據(jù)
- 通過unicloud-db將數(shù)據(jù)庫的數(shù)據(jù)發(fā)往前端進(jìn)行展示。
<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>
四、數(shù)據(jù)操作
4.1 增加
- 在pages中新建一個頁面，路徑pages/add/add.vue，記得要在page.json中注冊。新增數(shù)據(jù)主要通過db.collection("數(shù)據(jù)庫中的表").add(this.新增的數(shù)據(jù))來實(shí)現(xiàn)。
133.png
4.2 刪除
- 數(shù)據(jù)刪除通過數(shù)據(jù)庫中的表.remove(刪除的數(shù)據(jù))實(shí)現(xiàn)，刪除數(shù)據(jù)要有事件觸發(fā)本案例使用longpress.native，在項目首頁中實(shí)現(xiàn)刪除功能。
<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 修改
- 對數(shù)據(jù)庫中已存在數(shù)據(jù)進(jìn)行修改。首先在pages中新建一個update頁面（page.json中注冊）。在首頁中觸發(fā)數(shù)據(jù)修改，在update頁面中對數(shù)據(jù)進(jìn)行修改確認(rèn)。
<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() {
//首頁數(shù)據(jù)進(jìn)行展示時，刷新，重新獲取數(shù)據(jù)庫數(shù)據(jù)
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>
