1.ユニアプリの紹介
uniCloud を使用すると、小さなプログラムのフロントエンドとバックエンドの開発を自分で処理できます。ドメイン名を購入する必要も、クラウド サーバーを購入する必要もありません。最も重要なことは、アプレットへのアクセスの量が少ない場合、バックエンド サーバーに関連するリソースが空いていることです。
2.ユニアプリ（uniCloud）の利用
1. uniCloud プロジェクトを作成する
2. クラウド サービス空間の作成
2.1 関連する雲空間
2.2 新しいクラウド スペースを作成する
3. クラウド機能
3.1 クラウド機能を作成する
3.1.2 アップロードクラウド機能
3.2 ページ呼び出し
メソッドで
3.3 クラウド関数の作成
クラウド関数 index.js
4.クラウドデータベース
4.1 クラウドデータの作成
4.2 クラウドデータの追加
4.3 クラウド データ – テーブル構造の紹介
4.4 テーブル構造のダウンロード (必要に応じてダウンロード)
4.5 プロジェクトの実行
ヒント: クラウド機能を接続する
4.6 表示データ（フロントエンド）
コード
<template>
<view>
<button @click="call">呼叫服务器</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.クラウドデータの追加、削除、変更
5.1 クラウドデータを削除する
5.2 クラウドデータの追加
5.3 クラウドデータの変更
インデックスコード（削除）
<template>
<view>
<button @click="call">呼叫服务器</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="请输入姓名"/>
<uni-easyinput v-model="item.tel" placeholder="请输入电话"/>
<button @click="addConcat">添加</button>
</view>
</template>
<script>
export default {
data() {
return {
item:{
username:"",
tel:""
}
}
},
methods: {
addConcat(){
// 数据库
var db=uniCloud.database()
// 获取表
db.collection("concat").add(this.item) //执行添加
.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="请输入姓名"/>
<uni-easyinput v-model="item.tel" placeholder="请输入电话"/>
<button @click="updateConcat">更新</button>
</view>
</template>
<script>
export default {
data() {
return {
item:{
username:"",
tel:""
}
}
},
methods: {
updateConcat(){
var item={
...this.item}
// 删除id
delete item._id
const 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. スキーマがコードを自動生成
6.1 クラウドデータの作成
6.2 ダウンロードしてスキーマ マージを利用する
6.3ラン
