前言：
今天这篇文章主要讲解的是Uniapp云开发基础，有了Uniapp云开发，我们就不用需要后端，前端自己就可以实现增删改查。还有就是案例很重要，一定要看，自己去尝试运行试试。
一. 什么是Uniapp云开发
uniCloud 是 DCloud 联合阿里云、腾讯云，为开发者提供的基于 serverless 模式和 js 编程的云开发平台。
我们之前学习过小程序云开发，那么Uniapp云开发如何操作呢？接下来我们就对如何操作进行讲解。
二. Uniapp云开发详细步骤
1. 新建一个Uniapp项目
（选uniapp项目，创建项目名称，下面记得勾选uniCloud ）
2. 创建云服务器空间
当没有关联云服务空间的时候，会显示下图的状态
点击uniClound右键关联云空间，创建关联的同时，点击新建云空间。
创建云空间完成之后，右键打开uniCloud Web控制台
打开之后，我们需要创建一个服务空间，这里我们选择免费即可（只可以用一次）
三. 云函数
我们需要先创建一个云函数，右键新建云函数，输入云函数名称，创建即可。
上传云函数（右键上传部署即可，一点要记得上传）
接下来就需要我们在页面调用
uniCloud.callFunction()
进行云函数编写
四. 云数据库
1.创建数据库
右键打开uniCloud Web控制台，找到云函数库，点击新建数据表，填写表的名称即可，在这里我创建的是feedback,大家可以随意起名字。
2. 新增数据。（JSON格式）
点击添加记录，在记录内容里面输入json格式的内容
3.表结构
我们可以点击右侧的表结构，你会发现你的permission权限是false，就是说你是没有读取，创建，更新，删除等权限的。所以我们在学习的时候一定要修改它的权限._id是系统自动生成的，我们可以添加两个字段，username用户名，tel电话号码。你也可以根据需要，添加字段。
下载表结构，右键，下载所有DB Schema这一步是可选的
（但是当我们用官网的表时候，一定要记得下载）
4.运行项目
这里我们需要选连接云端函数
5.展示数据（前端）
五. uniapp云开发案例
我们已经了解了uniapp的基本操作，那我们就一起找些例子练练手吧.
案例1 实现添加与删除功能。
在pages下面新建一个页面，这里取名为add。页面里面写入input组件以及button按钮。然后在methods方法里面写点击的方法。
这里用到了==easyinput ==组件是对原生input组件的增强 ，是专门为配合表单组件 uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能。
当然我们的index里面也是需要写内容的
这里我们长按，可以选择是否删除数据.@longpress.native="$refs.udb.remove(item._id)" 
add页面代码
<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("feedback")
.add(this.item)
.then(res => {
uni.showToast({
title: "添加成功"
})
})
.catch(err => {
uni.showModal({
content: err
})
})
}
}
}
</script>
<style>
</style>
index页面代码 udb可以快捷生成代码，ulist也可以快捷生成,需要下载uni-ui插件，导入到自己的项目中。
<template>
<view class="content">
<button @click="call">呼叫服务器</button>
<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="feedback">
<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.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: "sjz",
age: 18
}
})
.then(res => {
uni.showModal({
content: JSON.stringify(res.result)
})
})
.catch(err => {
console.log(err);
})
}
}
}
</script>
<style>
</style>
案例2 实现更新功能
新建一个update页面。我们点进入列表内容，修改里面内容，然后点击更新，列表内容会自动更新。但此时需要写一个方法，它才会自动更新跳转到列表页面。
在unicloud-db里面写ref=“udb”，再在onshow里面写入如下代码，才会实现自动刷新
onShow() {
if (this.$refs && this.$refs.udb) {
this.$refs.udb.refresh()
}
},
update代码
<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: ""
}
}
},
onLoad(option) {
this.item = JSON.parse(option.item)
},
methods: {
updateConcat() {
var item = {
...this.item
};
delete item._id;
const db = uniCloud.database();
db.collection("feedback")
.doc(this.item._id)
.update(item)
.then(res => {
uni.showToast({
title: "更新成功"
})
uni.navigateBack()
})
.catch(err => {
uni.showModal({
title: JSON.stringify(err)
})
})
}
}
}
</script>
<style>
</style>
案例3 schema2code实现通讯录功能，添加民族功能，省市级联功能
如何利用自动生成代码呢？
首先我们去官网选择其他下面的模板，然后点击下载
然后回到我们的代码页面，点击下载所有DB Schema
再找到我们的内容，进行修改，修改完成一定要上传DB Schema
右键schema2code 这一步要执行，不然容易报表关联错误
这里几个的方法是类似的，我们需要注意，选择合并即可。
代码如下，我们只需要在opendb-contacts.schema.json
中添加两端代码，一个是民族的，一个是省市级联的，
其他的都是自动生成，完全不需要我们手写，很是方便。文章来源：https://www.toymoban.com/news/detail-445012.html
"nation": {
"bsonType": "string",
"title": "民族",
"order": 2,
"enum": {
"collection": "opendb-nation-china",
"field": "_id as value,name as text"
},
"foreignKey": "opendb-nation-china._id"
},
"adress": {
"bsonType": "string",
"title": "地区",
"order": 2,
"enum": {
"collection": "opendb-city-china",
"field": "code as value,name as text"
},
"foreignKey": "opendb-city-china.code",
"enumType": "tree",
"componentForEdit": {
"name": "uni-data-picker"
}
},
到底啦，希望对你有帮助哦文章来源地址https://www.toymoban.com/news/detail-445012.html
到了这里，关于Uniapp云开发（Uniapp入门）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
