支付宝小程序开发——获取位置API没有城市区号的最佳处理方案
前言：
需要对城市区号进行判断，但是支付宝小程序提供的my.getLocation() API返回的数据中只有6位的城市行政代码，诸如：深圳（440300），并没有区号（0755），那么怎么办呢？
需求分析：
通常会想到两种方法，一个是调用第三方地图，但这个对接调用就太麻烦了（还得注册账号），另一种就是找插件转换了。
第一种方法就不考虑了，第二种么，百度了下，貌似没有这种插件，鉴于之前做过不少接口文档或这表格数据转换js格式数据或者标签的小工具，想了下原理都差不多，索性自己做了个工具进行转换。
工具可以自己做，但是还需要数据来匹配城市行政编码和区号，那么就需要一份包含全国所有城市行政编码以及区号的文档了。
下载行政区比那吗与城市区号相关的文档：
继续百度，只是看到别人写的示例数据，但是自己写数据不现实啊（也不靠谱）。最后去高德看了下，找到了《行政区编码与城市编码表》，网页地址：https://lbs.amap.com/api/javascript-api/download：
下载解压后，是如下所示的电子表格，刚好包含了城市名、行政编码、区号，刚好够用，不多不少。
万事俱备，只欠东风，下面开始写工具，借东风。
工具代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<div id="app">
<div class="fileBtn">
<p>
<textarea v-model="textarea" placeholder="请复制粘贴excel表格中的城市名,行政编码,区号数据" cols="30" rows="20"></textarea>
</p>
<button id="btnTitleTrans" @click="btnTitleTrans">生成json数据</button>
</div>
<article>
<h4>生成代码预览</h4>
<ul>
<li v-for="item in fileData">{{item}}</li>
</ul>
</article>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.config.silent = false;
Vue.config.devtools = true;
var app = new Vue({
el: '#app',
data: {
fileData: [],
textarea: "",
label: "td",
subStr: "",
supStr: ""
},
methods: {
btnTitleTrans() {
//读取完成后，数据保存在对象的result属性中
this.fileData = this.textarea.split("\n") //根据换行进行截取
for (var i in this.fileData) {
//不同行数据的循环
var str = this.fileData[i]
var tds = str.split(' ') //对同行的单元格进行分割
//将电子表格同行三个单元格的数据组合成{cityName:'北京市',code:'110000',cityCode:'010'}的格式
//下面语句中用了es6的模板字符串,以前要用数组遍历实现的,这里用模板字符串一行搞定
this.fileData[i] =`${i==0?'[':''}{cityName:'${tds[0]}',code:'${tds[1]}',cityCode:'${tds[2]}'}${i==(this.fileData.length-1)?']':','}`
}
}
}
})
</script>
<style lang="css">
li {
list-style: none;
}
</style> </html>
如上，其实上边代码中有点技术含量的也就算是模板字符串了吧，以前都是用数组遍历来实现的，这里一行搞定。如果看不懂，可以按下面方法进行解析：
this.fileData[i] =
`${i==0?'[':''}
{
cityName:'${tds[0]}',
code:'${tds[1]}',
cityCode:'${tds[2]}'
}
${i==(this.fileData.length-1)?']':','}`
如上，可以按照js对象的格式进行编写也是可以的，不影响正常编译（强大的模板字符串）
验证转换工具：
打开网页，复制几行数据粘贴到文本域中（一定要三列完整的复制），然后点击转换按钮：
非常完美的完成了excel到json数据的转换，然后就可以对整个电子表格文档进行转换了！
后续优化——解决转换数据过大的问题：
虽然上边成功将电子表格中的数据转换未json格式数据，但是转换之后的数据文件比较大：
这就不太好了，我们需要的只是根据小程序API返回的行政编码查询区号，那么我们就可以对转换数据进行优化，只保留行政编码和区号。
关键代码如下：
this.fileData[i] =`${i==0?'{':''}'${tds[0]}':'${tds[1]}'${i==(this.fileData.length-1)?'}':','}`
如上，将行政编码作为key（唯一性），区号作为value，这样可以直接将整个数据转换成一个对象类型的json数据（数组类型的还得遍历，调用有点麻烦了）。
小程序调用示例：
getCityCodeByCityAdcode(cityAdcode) {
let cityCode = require('../../utils/cityCode')
return cityCode[cityAdcode] || ''
}
支付宝小程序开发——获取位置API没有城市区号的最佳处理方案的更多相关文章
- 支付宝小程序开发之与微信小程序不同的地方
前言: 本文仅汇总微信小程序移植支付宝小程序过程中遇到的一些不同的地方,详细请参考官方开发文档. 网络请求: 对于网络请求,基本上改动不大,也就支付宝小程序没有responseType属性及响应码字段 ...
- 支付宝小程序开发——如何获取支付宝小程序页面的https链接
前边介绍过通过配置支付宝Scheme协议alipays://来实现h5到小程序的跳转,其实还可以获取小程序页面的https格式链接,虽然支付宝官方并没有直接提供方案,但是通过小程序后台的“码管理”给页 ...
- 支付宝小程序开发——H5跳转到小程序（获取小程序页面的链接）
前言: 这个问题支付宝小程序官方文档并没有专门说明,钉钉群的官方技术支持给了个开发者社区的帖子,详见:如何跳转小程序. 如果配置的页面没有参数还好,不会出问题,如果有参数,很可能配出来的链接无法正常获 ...
- 微信小程序开发——获取小程序带参二维码全流程
前言: 想要获取微信小程序带参数二维码,如这种: 官方文档只说了获取小程序码和二维码的三种接口及调用(参考链接:https://developers.weixin.qq.com/miniprogram ...
- Tarojs+redux支付宝小程序开发攻略
技术选型 对于习惯react语法的开发者来讲,RN是实现native的必备工具. 我们甚至可以屏蔽官方稳定而强大的配置层,直接上手开发. 而后,同为表层React语法的Rax.Taro这样的开源多端开 ...
- 支付宝小程序开发——rich-text富文本组件支持html代码
前言: 与微信小程序不同,支付宝小程序的富文本组件并不能直接支持html代码,如: 如上,支付宝小程序的富文本组件只支持数组类型,html代码需要使用 mini-html-parser 转换,具体用法 ...
- 小程序开发-7-访问api数据与ES6在小程序中的应用
访问API数据与ES6在小程序中的应用 看待组件的两种观点 组件复用 代码分离-(特别重要) 不能在一个页面写所有的代码,代码分离具有很强的可读性.可维护性 Blink Api 介绍与测试API ur ...
- 微信小程序开发-易源API的调用
起因:在开发一款旅游类微信小程序时,需要接入大量的景点信息,此时可以选择自己新建数据库导入数据并读取,但是对于我来说,因为只有一个人,数据库还涉及到需要维护方面,选择调用已有API. 过程:首先查阅微 ...
- 小程序开发获取token值
// 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId // console.lo ...
随机推荐
- Servlet入门和HTTP。
Servlet: 1.概念:Servlet:server applet ,运行在服务器端的小程序. 浏览器在访问服务器的动态资源时,访问的是具有逻辑性的Java代码(Java类),而这里的Jav ...
- springboot+内置改为外置tomcat
1.pom.xml springboot项目利用的是自己内置的tomcat,这边就是不依赖内置的tomcat,将其编译的作用域设置为provided <dependency> <gr ...
- Copy Files from Windows 10 to wsl
Method 1 reboot( close wsl window and reopen ) Method 2 – Windows System Drive as a Mount point Wind ...
- springboot+jndi+tomcat配置多数据源
1.在application.properties中,添加jndi配置,如下图 2.新建dataSourceConfig类 3.dataSourceConfig类详细代码,这里只贴出其中一个,多个数据 ...
- go语言每个工程是不是都要单独设置GOPATH?
go语言每个工程是不是都要单独设置GOPATH?比如我的go项目都统一管理在d:/workspace/go_work/目录下面,该目录下有3个项目project_01,project_02,pro ...
- linux中的halt和shutdown
最近一直在学鸟哥的Linux私房菜,突然想起来,halt 和 shutdown的区别好像没有搞懂 ** 所以我检索了一下,发现区别是这样的.halt和shutdown都是关闭系统,但是halt不会关闭 ...
- win7 创建vhd提示“找不到指定文件的虚拟磁盘支持提供程序”解决方法
本文参照:https://itbbs.pconline.com.cn/diy/16509116_2.html 14楼中"坚持不放弃"用户的答案得到解决 问题复现: 1.window ...
- XXX接口自动化测试方案
XXX接口自动化测试方案 1.引言 1.1 文档版本 版本 作者 审批 备注 V1.0 XXXX 创建测试方案文档 1.2 项目情况 项目名称 XXX 项目版本 V1.0 项目经理 XX 测试人员 X ...
- Tensorflow简单实践系列（三）：图和会话
当执行一个 TensorFlow 函数的时候,并不会马上执行运算,而是把运算存储到一个称为“图”(graph)的数据结构里面. 图存储的各种运算,只有在会话(session)里执行图,才会真正地执行. ...
- Pytorch autograd,backward详解
平常都是无脑使用backward,每次看到别人的代码里使用诸如autograd.grad这种方法的时候就有点抵触,今天花了点时间了解了一下原理,写下笔记以供以后参考.以下笔记基于Pytorch1.0 ...