uniCloud 云開發(fā)小程序。主體界面圖下
5951687516826_.pic.jpg
5961687516827_.pic.jpg
關(guān)鍵步驟如下
- web控制臺(tái)地址：uniCloud控制臺(tái)
-
HBuilderX 會(huì)在項(xiàng)目創(chuàng)建后彈出 uniCloud初始化向?qū)?，根?jù)向?qū)Р渴稹?/p>
11.png
二、關(guān)聯(lián)服務(wù)空間
- 一個(gè)開發(fā)者可以擁有多個(gè)服務(wù)空間，每個(gè)服務(wù)空間都是一個(gè)獨(dú)立的serverless云環(huán)境，不同服務(wù)空間之間的云函數(shù)、數(shù)據(jù)庫、存儲(chǔ)都是隔離的。
2.1 關(guān)聯(lián)云空間
-
對(duì)項(xiàng)目根目錄uniCloud點(diǎn)右鍵選擇關(guān)聯(lián)云服務(wù)空間，綁定之前創(chuàng)建的服務(wù)空間，或者新建一個(gè)服務(wù)空間。初次使用都需要新建服務(wù)空間。
22.png
2.2 創(chuàng)建云函數(shù)
-
uniCloud項(xiàng)目創(chuàng)建并綁定服務(wù)空間后，開發(fā)者可以創(chuàng)建云函數(shù)（云對(duì)象是云函數(shù)的一種，云函數(shù)可泛指普通云函數(shù)和云對(duì)象）。在uniCloud/cloudfunctions目錄右鍵創(chuàng)建云函數(shù)/云對(duì)象。
55.png
66.png
2.3 云函數(shù)編寫
-
創(chuàng)建云函數(shù)后，生成一個(gè)目錄，該目錄下自動(dòng)生成index.js，是該云函數(shù)的入口文件，不可改名。如果云函數(shù)還需要引入其他js，可在index.js入口文件中引用，同時(shí)也在這個(gè)文件中編寫云函數(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自帶一個(gè)云函數(shù)本地運(yùn)行環(huán)境，運(yùn)行項(xiàng)目時(shí)也默認(rèn)選擇 連接本地云函數(shù)?？梢栽诘撞靠刂婆_(tái)中的前端控制臺(tái)右上角進(jìn)行切換。可以對(duì)testfun云函數(shù)點(diǎn)右鍵上傳到uniCloud服務(wù)空間，然后在前端控制臺(tái)右上角切換為 連接云端云函數(shù)，那么此時(shí)客戶端連接的就是真正的現(xiàn)網(wǎng)uniCloud服務(wù)器了。
88.png
三、云數(shù)據(jù)庫
uniCloud提供了一個(gè) JSON 格式的文檔型數(shù)據(jù)庫。顧名思義，數(shù)據(jù)庫中的每條記錄都是一個(gè) JSON 格式的文檔。一個(gè)uniCloud服務(wù)空間，有且只有一個(gè)數(shù)據(jù)庫；一個(gè)數(shù)據(jù)庫可以有多個(gè)表；一個(gè)表可以有多個(gè)記錄；一個(gè)記錄可以有多個(gè)字段。
3.1 新建云數(shù)據(jù)庫
99.png
3.2 新增數(shù)據(jù)
-
點(diǎn)擊進(jìn)入新建的數(shù)據(jù)庫(concat)，添加記錄->按條輸入數(shù)據(jù)，點(diǎn)擊確定，新的數(shù)據(jù)就會(huì)出現(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中新建一個(gè)頁面，路徑pages/add/add.vue，記得要在page.json中注冊(cè)。新增數(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，在項(xiàng)目首頁中實(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 修改
- 對(duì)數(shù)據(jù)庫中已存在數(shù)據(jù)進(jìn)行修改。首先在pages中新建一個(gè)update頁面（page.json中注冊(cè)）。在首頁中觸發(fā)數(shù)據(jù)修改，在update頁面中對(duì)數(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í)，刷新，重新獲取數(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>
