uniCloud初体验

本文章主要分为3个部分的内容，从而从3个角度了解uniCloud的简单应用

云函数实现hello world
云数据库实现联系人demo
schema2code快速产出进阶联系人demo

1、云函数实现hello world

创建云服务-创建服务空间
uniCloud提供30天免费的云服务专属服务器，在到期之前可在该服务器上创建服务空间列表，只需要注册Dcloud账号并且进行开发者认证即可申领。
创建好云服务空间后，下一步就可以创建本地项目，选择默认模板，并且勾选中启用uniCloud，选择对应申请的服务器的运营商，点击创建即可
创建好项目后，右键uniCloud文件夹，选择"关联云服务空间或项目"，勾选中刚刚创建的云服务空间，点击确定

右键cloudfunctions，新建云函数，在新建的云函数中写代码，然后右键helloWorld文件夹上传部署云函数，上传成功后可以在云函数列表中看到已上传的云函数
在页面上调用云函数，代码如下：
/pages/index/index.vue

uniCloud.callFunction({name: "helloWorld",success: (e) => {this.title = e.result}
})

点击预览，可以看到函数的调用情况

为了验证云函数是否生效，可以在本地修改函数中返回的字符串，保存后上传部署，刷新页面为新返回的内容，证明云函数调用成功

2、云数据库实现联系人demo

第一步，在云空间中新建一个库表,新建完成后向里面添加一条数据，其中_id是库表自动生成的索引值

点击表结构可以看到该库表的schema代码，我们可以点击编辑按钮，在页面上直接修改库表属性，也可以将库表的schemaCode下载到编辑器中修改后再上传到服务器，这里我们采用第二种方式
右键目录中的database，下载所有DB schema
接下来演示通过标签进行查表的方法
创建list页面，编译以下代码，保存后发现我们没有读表的权限，我们需要将下载的DB Schema中的read属性改为true（其中的permission对应该表的增删改查四种权限后续将不在进行单独说明），上传脚本后刷新页面，可以看到数据已经成功获取到库表中的数据，我们去服务器直接修改库表数据，刷新页面可以发现页面上的数据也相应发生了变化，证明确实是成功获取到库表的数据

<template><view><unicloud-db v-slot:default="{data, loading, error, options}" collection="contact-demo"><view v-if="error">{{error.message}}</view><view v-else>{{ data }}</view></unicloud-db></view>
</template>

稍微美化一下demo，将uni-ui导入项目，导入后将列表渲染，然后新建详情页，并且在列表页带参跳转到详情页

<template><view><unicloud-db v-slot:default="{data, loading, error, options}" collection="contact-demo"><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.phone" link :to="'/pages/add/add?id='+ item._id"></uni-list-item></uni-list></view></unicloud-db></view>
</template>

在详情页中，我们将通过jql实现对contact-demo表的增删改查，下面代码为详情页的简单模板
/page/detail/detail.vue

<template><view><uni-easyinput class="mini_input" v-model="item.name" placeholder="请输入姓名" /><uni-easyinput class="mini_input" v-model="item.phone" placeholder="请输入手机号" /><view class="btn_box"><button @click="rmItem" type="warn" class="mini-btn">删除</button><button @click="addItem" type="primary" class="mini-btn">保存</button></view></view>
</template>
<script>export default {data() {return {udb: "",id: "",item: {name: "",phone: ""}}},}
</script>
<style scoped>.mini_input {margin-top: 30rpx;}.btn_box {display: flex;margin-top: 40rpx;}.mini-btn {width: 200rpx;}
</style>

查询联系人

上文中我们介绍了通过标签快速查表的方法，接下来我们会用js代码直接对数据库进行操作，下面首先介绍通过指定属性查表的方法

mounted() {this.id = this.$route.query.id || ""const udb = uniCloud.database()if (this.id) {this.udb.collection('contact-demo').where({_id: this.id}).get().then(res => {console.log(res)if (res.result.data.length) {this.item = res.result.data[0]}})               }
}

新增&修改&删除

新增和修改的时候，因为涉及到具体的某个字段，所以需要手动维护表字段，并且上传服务器

addItem() { const udb = uniCloud.database()if (this.item.name && this.item.phone) {if (!this.id) { // 新增this.udb.collection('contact').add(this.item).then(res => {if (res.result.code === 0) {uni.navigateTo({url: "/pages/list/list"})}})                      }  else { // 修改const { name, phone } = this.itemthis.udb.collection('contact').where({_id: this.id}).update({ name, phone }).then(res => {if (res.result.code === 0) {uni.navigateTo({url: "/pages/list/list"})}})}}
},
rmItem() {if (this.id) {this.udb.collection('contact-demo').where({_id: this.id}).remove().then(res => {if (res.result.code === 0) {uni.navigateTo({url: "../list/list"})                            }})             }
},

记得修改库表对应操作权限为true，并且上传到服务器

3、schema2code快速产出进阶联系人demo

使用OpenDB表模板创建联系人表
打开创建好的表，点击选中，点击schema2code，安装schema2Code插件到HBuilder中,重启HBuilder后将服务器的DB schema下载到编辑器中，打开更新好的代码，右键点击schema2code，点击注册

简单说一下下载到schema的内容，其中properties字段属于字段级配置，用来描述单个字段，其余均为表级配置，用来描述表或者字段与字段之间的关系。
bsonType
描述数据的类型，固定值为object
permission
权限部分，用来限制操作表的权限
required
生成表单后的必填字段
properties
具体的字段描述
其中bsonType定义字段数据类型，该类型会影响生成的表单项的类别（例如int对应radio，array对应checkbox）；
title为生成表单的标题；
description备注该字段的含义并且对应表单中的pleaseholder；
order控制生成的表单项排序，越小越靠前；
trim控制表单输入时是否清除两端空格；
defaultValue默认值；
enum枚举项，对应表单的选项（支持带描述的数组，也支持简单数组）
。。。
其他属性可查文档
https://uniapp.dcloud.io/uniCloud/schema
页面效果

这样我们就完成了进阶的联系人管理项目，包括前端、后端、数据库。

uniCloud初体验相关推荐

【第二趴】uni-app开发工具（手把手带你安装HBuilderX、搭建第一个多端项目初体验）
文章目录写在前面 HBuilderX HBuilderX 优势 HBuilderX 安装 uni-app 初体验写在最后写在前面聚沙成塔--每天进步一点点,大家好我是几何心凉,不难发现越来越多 ...
苹果电脑安装python3密码_mac系统安装Python3初体验
前沿对于iOS开发不要随便拆卸系统自带的Python,因为有很多 library 还是使用 Python2.7. 1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 ...
MapReduce编程初体验
需求:在给定的文本文件中统计输出每一个单词出现的总次数第一步: 准备一个aaa.txt文本文档第二步: 在文本文档中随便写入一些测试数据,这里我写入的是 hello,world,hadoop he ...
小程序缩放_缩放流星应用程序的初体验
小程序缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
wxWidgets刚開始学习的人导引（3）——wxWidgets应用程序初体验
wxWidgets刚開始学习的人导引全文件夹 PDF版及附件下载 1 前言 2 下载.安装wxWidgets 3 wxWidgets应用程序初体验 4 wxWidgets学习资料及利用方法指导 5 ...
用鸿蒙跑了个 “hello world”！鸿蒙开发初体验
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源 | https://my.oschina.net/u ...
Windows Embedded Standard开发初体验(二)
支持Silverlight的Windows Embedded Standard 好了,完成安装之后,我们就可以来做Windows Embedded Standard的第一个操作系统镜像了.在开始菜单中 ...
深度探索Hyperledger技术与应用之超级账本初体验（附部署代码）
2019独角兽企业重金招聘Python工程师标准>>> 本章零基础地介绍了如何快速体验超级账本搭建的区块链网络,我们先绕过了比较复杂的初始化配置,用官方提供的fabric-sampl ...
Spring环境搭建，IoC容器初体验~
由于最近的任务是关于IoC配置文件格式的转换,所以需要从Spring的IoC容器开始学起,今天根据网上的介绍搭建了Spring环境,并对其IoC容器进行了初体验.文章中涉及到的软件以及推荐的一本关于S ...