uniCloud初体验

uniCloud是什么

uniCloud是DCloud在阿里云和腾讯云的serverless服务上封装而成的。
它包含IaaS层(由阿里云和腾讯云提供硬件和网络)和PaaS层(由DCloud提供开发环境)。
开发者可以自主选择uniCloud的硬件和网络资源的供应商,在阿里云版和腾讯云版之间切换。
开户和付费虽然通过DCloud渠道,但实际上开发者自动在云厂商处建立了账户和充值了余额。DCloud只获取云服务厂商的返佣。
开发时虽使用DCloud的工具,但应用上线时,手机端是直连阿里云或腾讯云的serverless,不经由DCloud的服务器。

uniCloud通讯录案例

首先使用HbuilderX新建项目:
uniCloud初体验注意勾选启用uniCloud,个人推荐使用阿里云,因为使用阿里云的话可以免费使用云存储:
uniCloud初体验创建好后会出现以下目录,其中uniCloud是跟数据库和云函数有关的文件夹,项目打包的前端页面里不会将其打包进去。
uniCloud初体验
然后就可以创建一下云服务空间,就可以使用云服务了,直接选中uniCloud文件夹右击,点击打开uniCloud web控制台,就可以创建云空间了:
uniCloud初体验创建好云服务空间后就可以直接创建一个数据表,然后再加两条数据:
uniCloud初体验
然后回到编译器,创建以下目录:
uniCloud初体验
引入uni-ui,实现代码如下:

list.vue代码:

<template>
	<view>
		<!-- 列表展示与删除 -->
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="test">
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				<uni-list>
					<uni-list-item 
					    v-for="item in data"
						@longpress.native="rmItem(item._id)"
						@click.native="update(item)"
						:key="item._id" 
						:title="item.name"
						:note="item.phone"
						link
					>
					</uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
		
		<!-- 新增数据 -->
		<uni-easyinput v-model="item.name" placeholder="name"></uni-easyinput>
		<uni-easyinput v-model="item.phone" placeholder="phone"></uni-easyinput>
		<button type="default" @click="submit">submit</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {
					"name": "",
					"phone": ""
				}
			}
		},
		methods: {
			// 删除功能
			rmItem(id) {
				this.$refs.udb.remove(id);
			},
			
			// 新增功能
			submit() {
				const db = uniCloud.database();
				db.collection('test').add(this.item).then(e=>{
					console.log(e);
				})
			},
			
			// 修改数据
			update(item) {
				uni.navigateTo({
					url: '../update/update?item=' + JSON.stringify(item),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style>

</style>

update代码:

<template>
	<view>
		<!-- 修改数据 -->
		<uni-easyinput v-model="item.name" placeholder="name"></uni-easyinput>
		<uni-easyinput v-model="item.phone" placeholder="phone"></uni-easyinput>
		<button type="default" @click="update()">submit</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {
					"_id": "",
					"name": "",
					"phone": ""
				}
			}
		},
		onLoad({item}) {
			this.item = JSON.parse(item);
		},
		methods: {
			// 修改数据
			update() {
				const db = uniCloud.database();
				let item = {...this.item}
				delete item._id
				db.collection('test').doc(this.item._id).update(item).then(e=>{
					console.log(e);
				})
			},
		}
	}
</script>

<style>
</style>

test.schema.json如下:

{
	"bsonType": "object",
	"required": [],
	"permission": {
		"read": true,
		"create": true,
		"update": true,
		"delete": true
	},
	"properties": {
		"_id": {
			"description": "ID,系统自动生成"
		},
		"name": {
			
		},
		"phone": {
			
		}
	}
}
上一篇:uniapp 推送


下一篇:uni-app混合原生安卓开发