前言：

需要对城市区号进行判断，但是支付宝小程序提供的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没有城市区号的最佳处理方案的更多相关文章

  1. 支付宝小程序开发之与微信小程序不同的地方

    前言: 本文仅汇总微信小程序移植支付宝小程序过程中遇到的一些不同的地方,详细请参考官方开发文档. 网络请求: 对于网络请求,基本上改动不大,也就支付宝小程序没有responseType属性及响应码字段 ...

  2. 支付宝小程序开发——如何获取支付宝小程序页面的https链接

    前边介绍过通过配置支付宝Scheme协议alipays://来实现h5到小程序的跳转,其实还可以获取小程序页面的https格式链接,虽然支付宝官方并没有直接提供方案,但是通过小程序后台的“码管理”给页 ...

  3. 支付宝小程序开发——H5跳转到小程序（获取小程序页面的链接）

    前言: 这个问题支付宝小程序官方文档并没有专门说明,钉钉群的官方技术支持给了个开发者社区的帖子,详见:如何跳转小程序. 如果配置的页面没有参数还好,不会出问题,如果有参数,很可能配出来的链接无法正常获 ...

  4. 微信小程序开发——获取小程序带参二维码全流程

    前言: 想要获取微信小程序带参数二维码,如这种: 官方文档只说了获取小程序码和二维码的三种接口及调用(参考链接:https://developers.weixin.qq.com/miniprogram ...

  5. Tarojs+redux支付宝小程序开发攻略

    技术选型 对于习惯react语法的开发者来讲,RN是实现native的必备工具. 我们甚至可以屏蔽官方稳定而强大的配置层,直接上手开发. 而后,同为表层React语法的Rax.Taro这样的开源多端开 ...

  6. 支付宝小程序开发——rich-text富文本组件支持html代码

    前言: 与微信小程序不同,支付宝小程序的富文本组件并不能直接支持html代码,如: 如上,支付宝小程序的富文本组件只支持数组类型,html代码需要使用 mini-html-parser 转换,具体用法 ...

  7. 小程序开发-7-访问api数据与ES6在小程序中的应用

    访问API数据与ES6在小程序中的应用 看待组件的两种观点 组件复用 代码分离-(特别重要) 不能在一个页面写所有的代码,代码分离具有很强的可读性.可维护性 Blink Api 介绍与测试API ur ...

  8. 微信小程序开发-易源API的调用

    起因:在开发一款旅游类微信小程序时,需要接入大量的景点信息,此时可以选择自己新建数据库导入数据并读取,但是对于我来说,因为只有一个人,数据库还涉及到需要维护方面,选择调用已有API. 过程:首先查阅微 ...

  9. 小程序开发获取token值

    // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId // console.lo ...

随机推荐

  1. JVM 运行时数据区：程序计数器、Java 虚拟机栈和本地方法栈，方法区、堆以及直接内存

    Java 虚拟机可以看作一台抽象的计算机,如同真实的计算机,它也有自己的指令集和运行时内存区域. Java 虚拟机在执行 Java 程序的过程中会把它所管理的内存(运行时内存区域)划分为若干个不同的数 ...

  2. Linux运维技术之详解任务计划(crontab命令)

    crontab命令 按照预先设置的时间周期(分钟.小时.天……)重复执行用户指定的命令操作,属于周期性计划任务 (1).先来看一下/etc/crontab文件的内容: [root@localhost ...

  3. 执行shell脚本时提示/bin/sh^M: bad interpreter: No such file or directory

    执行脚本时提示解释器有问题,错误提示如下: 这种提示一般是脚本在windows系统之通过记事本写的,记事本修改过的文本,会默认在文本前面加上一些看不到的标记,导致shell脚本不能被shell解释器识 ...

  4. jvm内存模型-和内存分配以及jdk、jre、jvm是什么关系(阿里，美团，京东)

    参考:JVM的垃圾回收机制 总结(垃圾收集.回收算法.垃圾回收器) 1.什么是jvm?(1)jvm是一种用于计算设备的规范,它是一个虚构出来的机器,是通过在实际的计算机上仿真模拟各种功能实现的.(2) ...

  5. HDU5036(bitset加速传递闭包+期望)

    HDU5036 题解 题目链接 思路: 求出破坏or打开所有门所需要的期望炮弹数量,那么根据期望的线性性质,我们可以求出每一个门的期望值最后累加起来就行了. 我们最后的目标就是求对于一个门\(i\), ...

  6. React (Native) Rendering Lifecycle

    How Does React Native Work? The idea of writing mobile applications in JavaScript feels a little odd ...

  7. Spring核心模块解析

    Spring框架是一个轻量级的集成式开发框架,可以和任何一种框架集成在一起使用,可以说是一个大的全家桶.Spring从1.x发展到现在的5.x可以说是越来越强大,下面来看看Spring都包含哪些核心的 ...

  8. C程序运行原理

    计算机不能直接识别和执行高级语言写的命令,必须用编译程序(也称编译器)把C源程序翻译成二进制形式的目标程序,然后再将该目标程序与系统的函数库以及其他目标程序连接起来,形成可执行的目标程序 C语言的编译 ...

  9. Python爬虫selenium中get_cookies()和add_cookie（）的用法

    在用selenium爬取网页的时候,有时候需要登陆,这时候用selenium获取cookie和携带cookie是很方便的,获取cookie可以通过内置的函数get_cookies(),它得到的是一组c ...

  10. canal简单安装使用

    canal简介:https://github.com/alibaba/canal 1.数据库配置 首先使用canal需要修改数据库配置 [mysqld] log-bin=mysql-bin # 开启 ...