前言：

需要对城市区号进行判断，但是支付宝小程序提供的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. win黑窗口命令

    rd 删除 文件夹, 语法: rd [/S] [/Q] [drive:]path 参数: drive 盘符 path 文件路径 /S   递归删除文件夹( 删除前, 要确认是否进行删除) /Q  关闭 ...

  2. “为了交项目干杯”对“那周余嘉熊掌将得队”、“男上加男,强人所男”的Beta产品测试报告

    "为了交项目干杯"对"那周余嘉熊掌将得队"."男上加男,强人所男"的Beta产品测试报告 格式描述 课程名称:软件工程1916|W(福州大学 ...

  3. rsync+inotify百万级文件实时同步

    实验环境:Centos7.4 目的:将源服务器的文件实时同步至目标服务器 源服务器:10.11.1.107 目标服务器:10.11.1.106 分别在两个节点安装rsync yum -y instal ...

  4. React中组件通信的几种方式

    https://segmentfault.com/a/1190000012361461 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...

  5. React Virtual DOM Explained in Simple English

    If you are using React or learning React, you must have heard of the term “Virtual DOM”. Now what is ...

  6. apollo报：系统出错，请重试或联系系统负责人

    说明:基于 docker 搭建的 apollo,创建项目后一直报系统出错,请重试或联系系统负责人错误. 项目人员列表一直空白: 经排查是数据库配置参数不匹配,由于自己的虚拟机 ip 为 192.168 ...

  7. 04_配置交换机Telnet服务（数通华为）

    1. 网络拓扑: 2. SW1配置:2.1 配置为Access口,vlan 10:[SW1]vlan 10[SW1-GigabitEthernet0/0/1]port link-type access ...

  8. singer tap-minio-csv 使用

    使用tap-minio-csv 我们可以将s3 中csv 的文件,通过singer 的target 写到不用的系统中,可以兼容 s3 的存储类型,以下是一个集成minio 的测试,将minio 中的c ...

  9. Python 10 训练模型

    原文:https://www.cnblogs.com/denny402/p/7520063.html 原文:https://www.jianshu.com/p/84f72791806f 原文:http ...

  10. 【题解】洛谷 P2725 邮票 Stamps

    目录 题目 思路 \(Code\) 题目 P2725 邮票 Stamps 思路 \(\texttt{dp}\).\(\texttt{dp[i]}\)表示拼出邮资\(i\)最少需要几张邮票. 状态转移方 ...