支付寶小程序開發——獲取位置API沒有城市區號的最佳處理方案

時間 2019-11-06

標籤支付寶程序開發獲取位置 api 沒有城市區號最佳處理方案简体版

原文原文鏈接

前言：javascript

須要對城市區號進行判斷，可是支付寶小程序提供的my.getLocation() API返回的數據中只有6位的城市行政代碼，諸如：深圳（440300），並無區號（0755），那麼怎麼辦呢？css

需求分析：html

一般會想到兩種方法，一個是調用第三方地圖，但這個對接調用就太麻煩了（還得註冊帳號），另外一種就是找插件轉換了。vue

第一種方法就不考慮了，第二種麼，百度了下，貌似沒有這種插件，鑑於以前作過很多接口文檔或這表格數據轉換js格式數據或者標籤的小工具，想了下原理都差很少，索性本身作了個工具進行轉換。java

工具能夠本身作，可是還須要數據來匹配城市行政編碼和區號，那麼就須要一份包含全國全部城市行政編碼以及區號的文檔了。es6

下載行政區比那嗎與城市區號相關的文檔：npm

繼續百度，只是看到別人寫的示例數據，可是本身寫數據不現實啊（也不靠譜）。最後去高德看了下，找到了《行政區編碼與城市編碼表》，網頁地址：https://lbs.amap.com/api/javascript-api/download：json

下載解壓後，是以下所示的電子表格，恰好包含了城市名、行政編碼、區號，恰好夠用，很少很多。小程序

萬事俱備，只欠東風，下面開始寫工具，借東風。api

工具代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7     </head>
 8 
 9     <body>
10         <div id="app">
11             <div class="fileBtn">
12                 <p>
13                     <textarea v-model="textarea" placeholder="請複製粘貼excel表格中的城市名,行政編碼,區號數據" cols="30" rows="20"></textarea>
14                 </p>
15                 <button id="btnTitleTrans" @click="btnTitleTrans">生成json數據</button>
16             </div>
17             <article>
18                 <h4>生成代碼預覽</h4>
19                 <ul>
20                     <li v-for="item in fileData">{{item}}</li>
21                 </ul>
22             </article>
23         </div>
24     </body>
25     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
26     <script>
27         Vue.config.silent = false;
28         Vue.config.devtools = true;
29         var app = new Vue({
30             el: '#app',
31             data: {
32                 fileData: [],
33                 textarea: "",
34                 label: "td",
35                 subStr: "",
36                 supStr: ""
37             },
38             methods: {
39                 btnTitleTrans() {
40                     //讀取完成後，數據保存在對象的result屬性中
41                     this.fileData = this.textarea.split("\n") //根據換行進行截取
42                     for (var i in this.fileData) {
43                         //不一樣行數據的循環
44                         var str = this.fileData[i]
45                         var tds = str.split('    ') //對同行的單元格進行分割
46                         //將電子表格同行三個單元格的數據組合成{cityName:'北京市',code:'110000',cityCode:'010'}的格式
47                         //下面語句中用了es6的模板字符串,之前要用數組遍歷實現的,這裏用模板字符串一行搞定
48                         this.fileData[i] =`${i==0?'[':''}{cityName:'${tds[0]}',code:'${tds[1]}',cityCode:'${tds[2]}'}${i==(this.fileData.length-1)?']':','}`
49                     }
50                 }
51             }
52         })
53     </script>
54     <style lang="css">
55         li {
56             list-style: none;
57         }
58     </style>
59 
60 </html>

如上，其實上邊代碼中有點技術含量的也就算是模板字符串了吧，之前都是用數組遍從來實現的，這裏一行搞定。若是看不懂，能夠按下面方法進行解析：

1                         this.fileData[i] =
2                             `${i==0?'[':''}
3                                     {
4                                         cityName:'${tds[0]}',
5                                         code:'${tds[1]}',
6                                         cityCode:'${tds[2]}'
7                                     }
8                             ${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] || ''
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。