首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

基于小程序云开发能力和vant业务组件实现省市区选择

记一下vant的云开发示例实现 vant weapp的Area省市区选择业务组件提供了一个云开发示例但是没写详细的过程,这里把具体步骤说明一下。方便一下别的同学。...省市区数据获取 数据导入云开发数据库 小程序中使用 效果示例 Vant Weapp组件的说明 省市区选择组件 实际项目中,可以通过小程序云开发的能力,将省市区数据保存在云开发的数据库中,并在小程序中使用云开发的接口异步获取数据...每项以省市区编码作为 key,省市区名字作为 value。编码为 6 位数字,前两位代表省份,中间两位代表城市,后两位代表区县,以 0 补足 6 位。...1.根据说明我们要先找到完整数据 2.复制完整数据中 export default 对象的内容(即export default后面所有内容,包含花括号) 3.本地新建一个area.json文件,将上述复制内容粘贴进去并保存...3.导入获取到的省市区数据json文件,导入成功后即可看到集合中多了一条记录 ?

2.8K10

全国省市区县乡镇街道行政区划数据

uniapp 级链选择器(官方自己的组件库) 问题描述: 在使用uniapp时用到uni-data-picker这个组件的时候需要用到省市区三级联动,发现没有全国省市区三级联动的数据,如果要使用的话还需要去开通对应的服务...解决思路: 当然是在百度一下全国省市区json数据了,谁让我是一个前端呢(其实也是一个后端菜鸟) <uni-data-picker...pcaTree: pcaData } } } pca-code.json...的数据来源于github 给大伙找来有json格式的, sql数据的以下的链接仅供参照(推荐1) 中华人民共和国行政区划(五级):省级、地级、县级、乡级和村级 中国5级行政区域mysql库 最全最新中国省...,市,地区 json 及 sql 数据

71950

实战|省市区三级联动数据爬取

[pexels-splitshire-1360.jpg] 前言   最近收到客服反应,系统的省市区数据好像不准,并且缺了一些地区。经过询问同事得知,数据库内的数据是从老项目拷贝过来的,有些年头了。...正好最近在对接网商银行,发现网商提供了省市区的数据的接口。这就很舒服了哇,抄起键盘就是干,很快的就把同步程序写好了。   然后在同步的过程中,发现网商提供的数据和数据库有些对不上。...String.valueOf(Integer.parseInt(areaCode) / 100 * 100); } } } 数据修正 [KFk4cl.jpg]   由于我们需要的是省市区三级数据联动...JSON-2020-11县以上行政区划代码 SQL-2020-11县以上行政区划代码 对于直辖市也可以做两级的,这个主要看产品的需求吧 总结   总体来讲,这个爬虫比较简单,只有简单的几行代码。

2.3K11

vue+Element UI实现省市区镇四级联动封装

在一些需要填写地址的前端页面中,总是少不了需要填写地址的级联选择器,类似这样的:在某依框架中,是直接把省市区的地址和编码放在了数据库里。个人觉得还是很头疼的:sql写起来麻烦。...当然是有的,前端就有这样的一个库:npm install element-china-area-data具体的使用可以参考对应的官方文档或者博客vue+Element UI 实现中国省市区三级联动。...在gitee上找到了这个项目:中国省市区数据。这个json文件里就是全部的json数据:具体的数据选择,也可参考官方文档:中国省市区数据项目。...addrCodes }} {{ addrCodesSelected }} let pcas = require('@/assets/pcas-code.json...selectedOptions: [], addrCodes: [], addrCodesSelected: [], } }, methods: { // 获取省市区地址级联

67210

v-distpicker 省市区插件的使用

v-distpicker 使用说明 下拉菜单选择省市区 第一步: 安装v-distpicker npm install v-distpicker -s 第二步: 在main.js中引入 //...省市区插件 import VDistpicker from 'v-distpicker' Vue.component('v-distpicker', VDistpicker) 第三步: 在vue的组件中使用...province: "江西省", city: "", area: "" }, /// 当值是中文的时候,要完整的省份名称,比如"江西省,不能给 "江西 } } * 事件绑定 获得选择好的的省市区的...console.log(val); console.log(val.city.code); // 打印出城市的code }, 优点: 支持通过code来显示省市区的中文...实际开发过程中,会接收后台返回的code用于显示当前的省市区的名称,当用户不做任何修改的时候又要把当前的code发送给后台。

1.9K30
领券