Uni-Cloud 云开发实现城市选择和云数据库（保姆级教学）

打开网站https://unicloud.dcloud.net.cn/，输入HbuilderX账号进行登录

创建服务空间

选择阿里云，因为免费一个月

创建成功就是这样

配置服务空间

点击打开

创建数据表

选择创建中国城市数据表

成功回显

创建Uni-UI项目

选择打开uni-cloud-阿里云

如果已有项目就右键项目进行创建

关联云服务空间

会提示没有appid，根据提示去获取

现在再次点击关联云服务空间

下载DB Scheme

成功回显

实现原生自带城市数据的Picker

<template>
	<view class="container">
		<picker mode="region" @change="bindTimeChange" :value="multiIndex">
			<view>{{ provinceName }}</view>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select:'请选择地区',
				province:'',
				city:'',
				district:'',
				provinceName:'',
			}
		},
		methods: {
			bindTimeChange(e) {
				this.province = e.detail.value[0];
				this.city = e.detail.value[1];
				this.district = e.detail.value[2];
				this.provinceName = e.detail.value[0] + e.detail.value[1] + e.detail.value[2];
				console.log('this.province',this.province,'this.areaData',this.areaData);
			},
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

使用云端数据和uni-data-picker

带上条件编译

<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<picker mode="region" @change="bindTimeChange" :value="multiIndex">
			<view>{{ provinceName }}</view>
		</picker>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china"
			field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code"
			parent-field="parent_code" @change="onchange" @nodeclick="onnodeclick">
		</uni-data-picker>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select: '请选择地区',
				province: '',
				city: '',
				district: '',
				provinceName: '',
			}
		},
		methods: {
			bindTimeChange(e) {
				this.province = e.detail.value[0];
				this.city = e.detail.value[1];
				this.district = e.detail.value[2];
				this.provinceName = e.detail.value[0] + e.detail.value[1] + e.detail.value[2];
				console.log('this.province', this.province, 'this.areaData', this.areaData);
			},
			onchange(e) {
			        const value = e.detail.value
			},
			onnodeclick(node) {}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

成功回显

完结！！！！！