一、uni-app 介紹

使用uniCloud，可以自己一個(gè)人把小程序的前后端開(kāi)發(fā)都搞定。不用買(mǎi)域名、不用買(mǎi)云服務(wù)器。最關(guān)鍵的是當(dāng)小程序訪問(wèn)量小的時(shí)候，在后端服務(wù)器相關(guān)的資源是免費(fèi)的。

二、uni-app(uniCloud)使用

1. 創(chuàng)建uniCloud項(xiàng)目

2. 創(chuàng)建云服務(wù)空間

2.1 關(guān)聯(lián)云空間

2.2 新建云空間

3. 云函數(shù)

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

3.1.2 上傳云函數(shù)

3.2 頁(yè)面調(diào)用

在methods

3.3 云函數(shù)編寫(xiě)

云函數(shù)index.js

4. 云數(shù)據(jù)庫(kù)

4.1 創(chuàng)建云數(shù)據(jù)

4.2 添加云數(shù)據(jù)

4.3 云數(shù)據(jù)–表結(jié)構(gòu)介紹

4.4 下載表結(jié)構(gòu)（需要時(shí)下載）

4.5 運(yùn)行項(xiàng)目

tip：連接云函數(shù)

4.6 展示數(shù)據(jù)（前端）

代碼

<template><view><button @click="call">呼叫服務(wù)器</button><unicloud-db v-slot:default="{data, loading, error, options}" collection="concat"><view v-if="error">{{error.message}}</view><view v-else><uni-list v-for="item in data" :key="item._id"><uni-list-item :title="item.username" :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:"base",data:{name:"mumu",age:18}}).then(res=>{uni.showModal({content:JSON.stringify(res.result)})}).catch(err=>{console.log(err);})}}} </script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;} </style>

5. 云數(shù)據(jù) 增、刪、改

5.1 刪除云數(shù)據(jù)

刪除官網(wǎng)：

5.2 增加云數(shù)據(jù)

增加官網(wǎng)：

5.3 修改云數(shù)據(jù)

修改官網(wǎng)

index 代碼（刪除）

<template><view><button @click="call">呼叫服務(wù)器</button><unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="concat"><view v-if="error">{{error.message}}</view><view v-else><uni-list v-for="item in data" :key="item._id"><uni-list-item link :to="'/pages/update/update?item='+JSON.stringify(item)"@longpress.native="$refs.udb.remove(item._id)":title="item.username" :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:"base",data:{name:"mumu",age:18}}).then(res=>{uni.showModal({content:JSON.stringify(res.result)})}).catch(err=>{console.log(err);})}}} </script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;} </style>

添加代碼

<template><view><uni-easyinput v-model="item.username" placeholder="請(qǐng)輸入姓名"/><uni-easyinput v-model="item.tel" placeholder="請(qǐng)輸入電話"/><button @click="addConcat">添加</button></view> </template><script>export default {data() {return {item:{username:"",tel:""}}},methods: {addConcat(){// 數(shù)據(jù)庫(kù)var db=uniCloud.database()// 獲取表db.collection("concat").add(this.item) //執(zhí)行添加.then(res=>{uni.showToast({title:"添加成功"})}).catch(err=>{uni.showModal({title:JSON.stringify(err)})})}}} </script><style></style>

修改代碼

<template><view><uni-easyinput v-model="item.username" placeholder="請(qǐng)輸入姓名"/><uni-easyinput v-model="item.tel" placeholder="請(qǐng)輸入電話"/><button @click="updateConcat">更新</button></view> </template><script>export default {data() {return {item:{username:"",tel:""}}},methods: {updateConcat(){var item={...this.item} // 刪除iddelete item._idconst db=uniCloud.database()db.collection("concat").doc(this.item._id).update(item).then(res=>{uni.showToast({title:"更新成功"})}).catch(err=>{uni.showModal({title:JSON.stringify(err)})})}},onLoad(option) {this.item=JSON.parse(option.item)}} </script><style></style>

6. schema自動(dòng)生成代碼

6.1 創(chuàng)建云數(shù)據(jù)

6.2 下載 并 依賴schema合并

6.3 運(yùn)行

總結(jié)

以上是生活随笔為你收集整理的uni-app（uniCloud）云开发地毯式介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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