uniCloud云开发 （1）初试

体验 hello uniCloud | uni-app官网

再也不依靠后端了，使用uniCloud，小程序的前后端开发。不用买域名、不用买云服务器。

1.下载最新版的HBuilderX，并创建一个uniCloud的项目

 

 2.创建服务空间

 

 3.右键 新建fun

服务端：

'use strict';
const db = uniCloud.database(); // 建立链接
exports.main = async (event, context) => {
  // 指向云端的表
  const collection = db.collection('list')
  // 插入event数据
  collection.add(event)
  // event为客户端上传的参数

  // //返回数据给客户端

  return await event
};

 客户端

<template>
  <view class="content">
    <!-- <image class="logo" src="/static/logo.png"></image> -->
    <!-- 留言提交 -->
    <view class="top">
      <view>我：</view>
      <view class="text">
        <input type="text" v-model="list.content" class="input" placeholder="消息" />
        <input type="text" v-model="list.name" class="input" placeholder="用户名" />
      </view>
      <button size="mini" type="primary" @click="add()">发送</button>
    </view>
    <!-- 留言list -->
    <view class="text-area">
      <view>收到</view>
      <button class="del" size="mini" type="warn">del</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: {
          name: "", // 名字
          content: "",
        }
      }
    },
    onLoad() {

    },
    methods: {
      add() {
        uniCloud.callFunction({
          name: 'add',
          data: this.list
        }).then((res) => {
          console.log(res)
        })
      }
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    margin: 40rpx;
    /* align-items: center; */
    /* justify-content: center; */
  }

  .top {
    display: flex;
  }

  .text {
    display: flex;
    flex-direction: column;
  }

  .input {
    border-bottom: 1px solid red;
  }

  .text-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
  }

  .del {
    margin-top: 4rpx;
    padding: 4rpx;
    /* line-height: 2rpx; */
    margin-left: 0;
    border: 1px solid red;
  }

  .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>

 

uniCloud云开发平台简介及云函数数据库基础操作练习（新人首作，欢迎支持_Sure小硕的博客-CSDN博客_unicloud云函数