Uniapp云开发（Uniapp入门）

uniCloud 是 DCloud 联合阿里云、腾讯云，为开发者提供的基于 serverless 模式和 js 编程的云开发平台。我们之前学习过小程序云开发，那么Uniapp云开发如何操作呢？接下来我们就对如何操作进行讲解。（选uniapp项目，创建项目名称，下面记得勾选uniCloud ）当没有关联云服务空间的时候，会显示下图的状态点击uniClound右键关联云空间，创建关联的同时，点击新建云

争儿不脱发

6958人浏览 · 2022-12-05 20:46:35

争儿不脱发 · 2022-12-05 20:46:35 发布

前言：
今天这篇文章主要讲解的是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
中添加两端代码，一个是民族的，一个是省市级联的，
其他的都是自动生成，完全不需要我们手写，很是方便。

"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"
			}
		},