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ù)空間都是一個獨立的serverless云環(huán)境塞祈，不同服務(wù)空間之間的云函數(shù)金刁、數(shù)據(jù)庫、存儲都是隔離的议薪。
2.1 關(guān)聯(lián)云空間
-
對項目根目錄uniCloud點右鍵選擇關(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 運行
-
HBuilderX自帶一個云函數(shù)本地運行環(huán)境粥喜，運行項目時也默認(rèn)選擇 連接本地云函數(shù)空幻。可以在底部控制臺中的前端控制臺右上角進(jìn)行切換容客★躅酰可以對testfun云函數(shù)點右鍵上傳到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ù)
-
點擊進(jìn)入新建的數(shù)據(jù)庫(concat)，添加記錄->按條輸入數(shù)據(jù)物遇，點擊確定乖仇，新的數(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ù))來實現(xiàn)蜀铲。
133.png
4.2 刪除
- 數(shù)據(jù)刪除通過數(shù)據(jù)庫中的表.remove(刪除的數(shù)據(jù))實現(xiàn)，刪除數(shù)據(jù)要有事件觸發(fā)本案例使用longpress.native汛闸，在項目首頁中實現(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>
