Uniapp云开发(Uniapp入门)

news2024/11/23 22:37:19

前言:
今天这篇文章主要讲解的是Uniapp云开发基础,有了Uniapp云开发,我们就不用需要后端,前端自己就可以实现增删改查。还有就是案例很重要,一定要看,自己去尝试运行试试。

目录超详细

  • 一. 什么是Uniapp云开发
  • 二. Uniapp云开发详细步骤
    • 1. 新建一个Uniapp项目
    • 2. 创建云服务器空间
  • 三. 云函数
  • 四. 云数据库
    • 1.创建数据库
    • 2. 新增数据。(==JSON格式==)
    • 3.表结构
    • 4.运行项目
    • 5.展示数据(前端)
  • 五. uniapp云开发案例
    • 案例1 实现添加与删除功能。
    • 案例2 实现更新功能
    • 案例3 schema2code实现通讯录功能,添加民族功能,省市级联功能

一. 什么是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"
			}
		},

到底啦,希望对你有帮助哦

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/64873.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

分布式配置中心Apollo

Apollo&#xff08;阿波罗&#xff09;是携程框架部门研发的分布式配置中心&#xff0c;能够集中化管理应用不同环境、不同集群的配置&#xff0c;配置修改后能够实时推送到应用端&#xff0c;并且具备规范的权限、流程治理等特性&#xff0c;适用于微服务配置管理场景。 服务…

【Python百日进阶-数据分析】Day326 - plotly.express.scatter_geo():地理散点图

文章目录一、scatter_geo语法二、参数三、返回类型四、实例4.1 常规地理散点图4.2自定义地理散点图4.3GeoPandas 的基本示例一、scatter_geo语法 plotly.express.scatter_geo(data_frame None ,lat None ,lon None ,locations None ,locationmode None ,geojson None , …

MuziDB数据库-0.项目描述

前言 该项目写完也有一段时间了&#xff0c;为了避免以后忘记该项目的一些实现的原理&#xff0c;所以写下这篇博客来记录一下该项目的设计等 项目整体 MuziDB分为前端与后端&#xff0c;前后端交互通过socket进行交互&#xff0c;前端的作用就是读取用户输入并发送到后端进…

mybatis开发要点-insert主键ID获取和多参数传递

1.2、代码示例 二、查询如何传入多个参数 1、使用map传递参数&#xff1b; 2、使用注解传递参数&#xff1b; 3、使用Java Bean的方式传递参数&#xff1b; 一、插入数据主键ID获取 一般我们在做业务开发时&#xff0c;经常会遇到插入一条数据并使用到插入数据的ID情况。如…

网络安全事件应急演练方案

文章目录1 总则1.1 应急演练定义1.2 应急演练目的1.3 应急演练原则1.4 应急演练分类1.4.1 按组织形式划分1.4.2 按内容划分1.4.3 按目的与作用划分1.4.4 按组织范围划分1.5 应急演练规划2 应急演练组织机构2.1 组织单位2.1.1 领导小组2.1.2 策划小组2.1.3 保障小组2.1.4 评估小…

jvm参数造成http请求Read time out

问题描述 线上部署的代码&#xff0c;部署在测试环境突然抛出接口请求Read time out的异常。查看线上日志&#xff0c;接口请求正常。重新启动&#xff0c;部署测试环境代码都没有效果&#xff0c;接口还是必现Read time out。 原因分析&#xff1a; 1. 排查网络原因 直接在…

内核开发-同步场景与概念

进程上下文执行环境还有中断上下文执行环境&#xff0c;并且中断上下文优先级比较高&#xff0c;可以随时打断进程的执行&#xff0c;因此情况更加复杂。内核当中提供了不同的同步机制。比如说信号量&#xff0c;自旋锁&#xff0c;rcu&#xff0c;原子变量等等。他们各自都有自…

《计算机视觉技术与应用》-----第六章 直方图

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…

软件过程模型

软件过程软件过程:获得高质量软件的一系列任务框架瀑布模型:特点:顺序,依赖,推迟实现,质量保证优点:规范方法,规定文档,阶段质量验证缺点:开发初期困难,需求验证困难,难以维护快速原型优点:满足需求,线性过程缺点:设计困难,原型理解不同,不利于创新增量模型:优点:短时间可完成部…

[附源码]Python计算机毕业设计SSM健身房管理系统设计(程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

[附源码]Python计算机毕业设计Django体育馆场地预约管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

VSCode 配置C语言环境 全程记录 ,配置成功

目录 1.vscode介绍&#xff1a; 1.1 卸载干净VSCode 1.2安装VSCode 1.2.1 下载安装 1.2.2 vscode 小插件安装 2. 配置vscode 编译器 2.1 下载编译器资源文件&#xff1a; 2.2 配置环境变量 2.3 vscode项目文件配置 1. 首先新建一个.c文件&#xff0c;命名为英文哦 2. 然后…

含有DBCO和马来酰亚胺基团Mal-PEG2-DBCO,2698339-31-8,DBCO-PEG2-Maleimide

中英文别名&#xff1a; CAS号&#xff1a;2698339-31-8 | 英文名&#xff1a;DBCO-PEG2-Maleimide&#xff0c;Mal-PEG2-DBCO |中文名&#xff1a;二苯并环辛炔-二聚乙二醇-马来酰亚胺物理参数&#xff1a; CASNumber&#xff1a;2698339-31-8 Molecular formula&#xff1a;C…

工业和信息化部公布45个国家先进制造业集群名单

近日&#xff0c;工业和信息化部正式公布45个国家先进制造业集群的名单。 45个国家级集群2021年主导产业产值达19万亿元&#xff0c;布局建设了18家国家制造业创新中心&#xff0c;占全部国家级创新中心数量的70%&#xff0c;拥有国家级技术创新载体1700余家&#xff0c;培育创…

【苹果相册推iMessage】软件安装Websocket可以在浏览器顶用于支持两个通讯并使用它

推荐内容IMESSGAE相关 作者推荐内容iMessage苹果推软件 *** 点击即可查看作者要求内容信息作者推荐内容1.家庭推内容 *** 点击即可查看作者要求内容信息作者推荐内容2.相册推 *** 点击即可查看作者要求内容信息作者推荐内容3.日历推 *** 点击即可查看作者要求内容信息作者推荐…

Python3,9行代码,对比两个Excel数据差异,并把差异结果重新保存。

Excel数据差异对比1、引言2、代码实战3、总结1、引言 小屌丝&#xff1a;鱼哥&#xff0c;还记得上次写的把数据库的查询结果写入到excel这个脚本不。 小鱼&#xff1a;嗯… 可以说不记得吗 小屌丝&#xff1a;我猜你就记得。 小鱼&#xff1a;你…说…啥&#xff1f;&#xf…

画布的使用方式

一、’注册—登录—主页’作业中的技术点&#xff1a; 1、前端&#xff1a; ​ &#xff08;1&#xff09;input file标签的样式处理 ​ &#xff08;2&#xff09;文件类型的设置&#xff1a;accept属性来指定 ​ &#xff08;3&#xff09;input file选择的图片立即显示出…

搭建K8s集群

前言&#xff1a;本次将通过kubeadm部署1个master节点&#xff0c;2个worker节点K8s集群&#xff0c;本次集群使用的容器运行工具为docker(题外话&#xff1a;K8s的容器运行工具也可以用docker、containerd、cio等等&#xff0c;其中containerd是一个轻量级、工业级的容器运行工…

aws eks 使用paker构建自定义ami

资料 如何创建用于 Amazon EKS 的自定义 Amazon Linux AMI&#xff1f; 构建预置容器镜像的EKS自定义AMI解决方案 https://github.com/awslabs/amazon-eks-ami https://github.com/awslabs/amazon-eks-ami/blob/master/doc/USER_GUIDE.md https://developer.hashicorp.com/…

[Cortex-M3]-3-分散加载文件解析(.sct)

目录 1 分散加载文件.sct 2 如何生成.sct文件 3 *(InRoot$$Sections) 说明 4 如何修改分散加载文件 5 已经初始化变量的初值&#xff0c;存储位置 6 RW ZI和RO如何执行 1 分散加载文件.sct MDK的分散加载主要是通过.sct文件实现的&#xff0c;链接器根据.sct…