????????uniClound是 DCloud 聯(lián)合阿里云、騰訊云，為開發(fā)者提供的基于 serverless 模式和 js 編程的云開發(fā)平臺。云服務(wù)創(chuàng)建項目，使用熟悉的js，輕松搞定前后臺整體業(yè)務(wù)，使前端開發(fā)離全棧開發(fā)又進一步，尤其是一鍵生成代碼的功能，簡直不要太巴適。

????????web控制臺地址：uniCloud控制臺

一、新建項目

? ? ? ? 在新建項目之前，首先要把你的HBuilderx升級到最新版本。

????????初次體驗uniCloud推薦阿里云，因為騰訊云的開戶流程更復(fù)雜

?????????HBuilderX 會在項目創(chuàng)建后彈出 uniCloud初始化向?qū)?#xff0c;根據(jù)向?qū)Р渴稹?/p>

二、關(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ù)空間。

? ? ? ? ?學(xué)習(xí)階段，推薦使用免費的，只能創(chuàng)建一個云服務(wù)空間，時限1年。

?2.2 創(chuàng)建云函數(shù)

????????uniCloud項目創(chuàng)建并綁定服務(wù)空間后，開發(fā)者可以創(chuàng)建云函數(shù)（云對象是云函數(shù)的一種，云函數(shù)可泛指普通云函數(shù)和云對象）。在uniCloud/cloudfunctions目錄右鍵創(chuàng)建云函數(shù)/云對象。

?

?2.3 云函數(shù)編寫

????????創(chuàng)建云函數(shù)后，生成一個目錄，該目錄下自動生成index.js，是該云函數(shù)的入口文件，不可改名。如果云函數(shù)還需要引入其他js，可在index.js入口文件中引用，同時也在這個文件中編寫云函數(shù)。

?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)境，運行項目時也默認選擇 連接本地云函數(shù)。可以在底部控制臺中的前端控制臺右上角進行切換。可以對testfun云函數(shù)點右鍵上傳到uniCloud服務(wù)空間，然后在前端控制臺右上角切換為 連接云端云函數(shù)，那么此時客戶端連接的就是真正的現(xiàn)網(wǎng)uniCloud服務(wù)器了。

?三、云數(shù)據(jù)庫

????????uniCloud提供了一個 JSON 格式的文檔型數(shù)據(jù)庫。顧名思義，數(shù)據(jù)庫中的每條記錄都是一個 JSON 格式的文檔。一個uniCloud服務(wù)空間，有且只有一個數(shù)據(jù)庫；一個數(shù)據(jù)庫可以有多個表；一個表可以有多個記錄；一個記錄可以有多個字段。

3.1 新建云數(shù)據(jù)庫

?

3.2 新增數(shù)據(jù)

? ? ? ? 點擊進入新建的數(shù)據(jù)庫(concat)，添加記錄->按條輸入數(shù)據(jù)，點擊確定，新的數(shù)據(jù)就會出現(xiàn)在數(shù)據(jù)庫里。

3.3 更改表結(jié)構(gòu)配置

? ? ? ? 學(xué)習(xí)使用，把表結(jié)構(gòu)的增刪改查的權(quán)限都放開。

3.4 前端展示數(shù)據(jù)庫數(shù)據(jù)

? ? ? ? ?通過unicloud-db將數(shù)據(jù)庫的數(shù)據(jù)發(fā)往前端進行展示。

<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)。

<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(){//數(shù)據(jù)庫var db=uniCloud.database();//獲取表db.collection("users").add(this.item).then(res=>{uni.showToast({title:"添加成功"})}).catch(err=>{console.log(err);})}}} </script>

運行效果如下圖：

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ù)進行修改。首先在pages中新建一個update頁面（page.json中注冊）。在首頁中觸發(fā)數(shù)據(jù)修改，在update頁面中對數(shù)據(jù)進行修改確認。

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() {//首頁數(shù)據(jù)進行展示時，刷新，重新獲取數(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>

?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)//查詢一條數(shù)據(jù).update(item).then(res=>{uni.showToast({title:"更新成功"})uni.navigateBack();}).catch(err=>{uni.showModal({content:JSON.stringify(err)})})}}} </script>

? ? ? ? 通過以上步驟，你已經(jīng)創(chuàng)建了一個uniCloud項目，并可以使用數(shù)據(jù)庫數(shù)據(jù)進行增刪改查了，趕緊打開HBuilderx試試吧。

總結(jié)

以上是生活随笔為你收集整理的uniClound云开发创建流程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。