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

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

一、新建項目

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

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

?????????HBuilderX 會在項目創建后彈出 uniCloud初始化向導，根據向導部署。

二、關聯服務空間

????????一個開發者可以擁有多個服務空間，每個服務空間都是一個獨立的serverless云環境，不同服務空間之間的云函數、數據庫、存儲都是隔離的。

2.1 關聯云空間

?????對項目根目錄uniCloud點右鍵選擇關聯云服務空間，綁定之前創建的服務空間，或者新建一個服務空間。初次使用都需要新建服務空間。

? ? ? ? ?學習階段，推薦使用免費的，只能創建一個云服務空間，時限1年。

?2.2 創建云函數

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

?

?2.3 云函數編寫

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

?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服務器了。

?三、云數據庫

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

3.1 新建云數據庫

?

3.2 新增數據

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

3.3 更改表結構配置

? ? ? ? 學習使用，把表結構的增刪改查的權限都放開。

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.新增的數據)來實現。

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

運行效果如下圖：

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頁面中對數據進行修改確認。

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() {//首頁數據進行展示時，刷新，重新獲取數據庫數據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)//查詢一條數據.update(item).then(res=>{uni.showToast({title:"更新成功"})uni.navigateBack();}).catch(err=>{uni.showModal({content:JSON.stringify(err)})})}}} </script>

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。