uniCloud通讯录实战

1 新建uni-app项目——通讯录

在 HBuilder 选择文件，新建（如果提示需要安装插件，按照提示安装即可，稍后会要求登陆，如果没有HBuilder账户，可以根据提示去注册）：

2 创建云服务空间并关联项目

在 uniCloud 目录上单击右键，选择打开 uniCloud Web 控制台，根据提示创建云服务空间：

在 uniCloud 目录上单击右键，选择 关联云服务空间或项目，选择刚刚创建好的云服务空间：

3 创建数据表

在Web控制台的云数据库下点击创建数据表：

点击表结构，编辑 read 属性值为 true：

4 录入数据

点击 添加记录：

添加记录后的数据列表：

5 前端创建组件，读取数据表

在 pages 目录上单击右键，点击新建页面，新建 list 页面：

点击预览，运行当前项目，然后修改 list.vue 如下：

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

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

运行出现如下错误：

在 database 目录上单击右键，点击下载所有DB schema及扩展校验函数，刷新后即可看到查询到的数据：

在 DCloud 插件市场中搜索 uni-ui ，点击使用HBuilderX 导入插件：

修改 list.vue 如下，实现通讯录列表：

<template>
	<view>
		<unicloud-db v-slot:default="{data, loading, error, options}" collection="contacts">
			<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></uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

点击预览，出现scss/sass编译插件未安装的错误，按照提示去安装即可：

修改 list.vue 如下，实现长按删除记录：

<template>
	<view>
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="contacts">
			<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)" :key="item._id" :title="item.name" :note="item.phone" link></uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			rmItem(id) {
				this.$refs.udb.remove(id)
			}
		}
	}
</script>

<style>

</style>

长按后效果如下：

点击确定会提示权限校验未通过：

可以修改 database/contacts.schema.json 文件的 delete 字段值为 true，然后在 contacts.schema.json 上单击右键，点击上传DB Schema，然后再点击确定就可以删除，删除后如下所示：

在 pages 目录上单击右键，点击新建页面，新建 add 页面，修改 add.vue 如下，实现新增记录功能：

<template>
	<view>
		<uni-easyinput  v-model="item.name" placeholder="姓名" />
		<uni-easyinput  v-model="item.phone" placeholder="电话" />
		<button type="default" @click="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{
					"name":"",
					"phone":""
				}
			}
		},
		methods: {
			submit() {
				const db = uniCloud.database();
				db.collection('contacts').add(this.item).then(e=>{
					console.log(e)
				})
			}
		}
	}
</script>

<style>

</style>

运行效果如下：

出现权限校验未通过，只需修改 database/contacts.schema.json 文件的 create 字段值为 true，然后在 contacts.schema.json 上单击右键，点击上传DB Schema，然后再点击确定就可以添加，添加后出现错误：数据库验证失败：提交的字段["name","phone"]在本地数据表的schema文件中不存在"。

修改 database/contacts.schema.json 文件如下所示：

{
	"bsonType": "object",
	"required": [],
	"permission": {
		"read": true,
		"create": true,
		"update": false,
		"delete": true
	},
	"properties": {
		"_id": {
			"description": "ID，系统自动生成"
		},
		"name":{},
		"phone":{}
	}
}

然后在 contacts.schema.json 上单击右键，点击上传DB Schema，再次提交后效果如下所示：

回到列表页，发现已经添加成功了：

在 pages 目录上单击右键，点击新建页面，新建 update 页面，修改 update.vue 如下，实现更新记录功能：

<template>
	<view>
		<uni-easyinput  v-model="item.name" placeholder="姓名" />
		<uni-easyinput  v-model="item.phone" placeholder="电话" />
		<button type="default" @click="submit">更新</button>
	</view>
</template>

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

<style>

</style>

修改 list.vue 如下：

<template>
	<view>
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="contacts">
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				<uni-list>
					<uni-list-item v-for="item in data" @click.native="updateFn(item)" @longpress.native="rmItem(item._id)" :key="item._id" :title="item.name" :note="item.phone" link></uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			updateFn(item){
				uni.navigateTo({
					url: '../update/update?item='+JSON.stringify(item),
					success: res => {},
					fail: () => {},
					complete: () => {}
				})
			},
			rmItem(id) {
				this.$refs.udb.remove(id)
			}
		}
	}
</script>

<style>

</style>

修改 database/contacts.schema.json 文件如下所示：

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

然后在 contacts.schema.json 上单击右键，点击上传DB Schema，预览运行后，在list页面单击联系人即可进入修改页面：

点击更新后，回到list页面刷新后：

文章作者：GentleTK
原文链接：https://gentletk.gitee.io/uniCloud通讯录实战