This article mainly introduces in detail the relevant methods of selecting cities based on letters in the WeChat applet. It has a certain reference value. Interested friends can refer to it

Develop a small program today , which involves region selection. After reading some versions on the Internet, I feel that the writing is incomplete. Maybe my understanding is not enough. Today I will combine the answers on the Internet and reorganize them according to my own needs. I hope everyone has to help. Let’s take a look at the screenshots first:

Project screenshots

Let’s sort out the code.

1. Create the index.wxml file

In the pages->index folder, create a new index.wxml file with the following code:

 class="title">
  class="title_list" value="{{cityName}}" placeholder="城市名稱" />
 確認
  scroll-y="true" style="height: {{winHeight}}px;" scroll-into-view="{{scrollTopId}}" class="city_list">
   wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">
    id="{{idx}}" class="list_tit">{{idx}}
    wx:for="{{cityName}}">
     class="list_con" data-city="{{item.name}}" bindtap="bindCity">{{item.name}}
   
  
 class="scroll_list" 
   bindtouchstart="chStart"
   bindtouchend="chEnd"
   catchtouchmove="chMove"
   style="background: rgba(0,0,0,{{trans}});"
   >
  wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">
    wx:if="{{idx != '熱門城市'}}">
    id="{{idx}}" class="scroll_list_chi" style="line-height:{{lineHeight}}px ; height:{{lineHeight}}px ;font-size:{{lineHeight/1.7}}px;" bindtouchstart="getWords" bindtouchend="setWords">{{idx}}
   
  
 hidden="{{hidden}}" class="showwords">
 {{showwords}}

2. Create the corresponding CSS

In the pages->index folder, create a new index.wxss file with the following code:

/**index.wxss**/
.title {
  position: relative;
  padding: 10px 0;
}
.title_list {
  display: inline-block;
  padding: 0 15px;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
}
.title button {
  width: 50px;
  height: 30px;
  font-size: 16px;
  padding: 0;
  line-height: 30px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom:0;
  right: 10px;
  background: none;
}
.title button::after {
  border: none;
}
.title_list:nth-child(1) {
  border-right:1px #ccc solid;
}
/*城市列表*/
.city_list {
  position: relative;
}
/*城市選擇頭部*/
.list_tit {
  display: block;
  line-height: 40px;
  height: 40px;
  padding-left: 15px;
  font-size: 16ppx;
  background: #f5f5f5;
  color: #666;
}
.list_con {
  height: 40px;
  /*border-top: 1px #f5f5f5 solid ;*/
  line-height: 40px;
  font-size: 16px;
  padding-left: 15px;
}
.list_con::before {
  content: " ";
  height: 1px;
  border-top: 1px #f5f5f5 solid;
  position: absolute;
  width: 100%;
}
.list_con::before:nth-child(1) {
  border: none;
}
/*城市選擇 右邊*/
.scroll_list {
  background: rgba(0,0,0,0);
  position: absolute;
  height: calc(100% - 100px);
  width: 25px;
  top: 90px;
  right: 10px;
}
.scroll_list_chi {
  /*border: 1px blue solid;*/
  text-align: center;
  font-size: 12px;
}
/*顯示框*/
.showwords {
  width: 80px;
  height: 80px;
  background: rgba(0,0,0,.3);
  border-radius:50%;
  line-height: 80px;
  text-align: center;
  font-size:10vw;
  margin: auto;
  position: absolute;
  top: 0;left: 0;bottom: 0;right: 0;
  z-index: 999;  
}

3. Create a JS file

In the pages->index folder, create a new index.js file with the following code:

//先引用城市數(shù)據(jù)文件
var city = require('../../utils/city.js')
var lineHeight = 0;
var endWords = "";
var isNum;
Page({
 data: {
  "hidden": true,
  cityName:"", //獲取選中的城市名
 },
 onLoad: function (options) {
  // 生命周期函數(shù)--監(jiān)聽頁面加載
 },
 onReady: function () {
  // 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  var cityChild = city.City[0];
  var that = this;
  wx.getSystemInfo({
   success: function (res) {
    lineHeight = (res.windowHeight - 100) / 22;
    console.log(res.windowHeight - 100)
    that.setData({
     city: cityChild,
     winHeight: res.windowHeight - 40,
     lineHeight: lineHeight
    })
   }
  })
 },
 onShow: function () {
  // 生命周期函數(shù)--監(jiān)聽頁面顯示
 },
 onHide: function () {
  // 生命周期函數(shù)--監(jiān)聽頁面隱藏
 },
 onUnload: function () {
  // 生命周期函數(shù)--監(jiān)聽頁面卸載
 },
 //觸發(fā)全部開始選擇
 chStart: function () {
  this.setData({
   trans: ".3",
   hidden: false
  })
 },
 //觸發(fā)結(jié)束選擇
 chEnd: function () {
  this.setData({
   trans: "0",
   hidden: true,
   scrollTopId: this.endWords
  })
 },
 //獲取文字信息
 getWords: function (e) {
  var id = e.target.id;
  this.endWords = id;
  isNum = id;
  this.setData({
   showwords: this.endWords
  })
 },
 //設(shè)置文字信息
 setWords: function (e) {
  var id = e.target.id;
  this.setData({
   scrollTopId: id
  })
 },
 // 滑動選擇城市
 chMove: function (e) {
  var y = e.touches[0].clientY;
  var offsettop = e.currentTarget.offsetTop;
  var height = 0;
  var that = this;
  ;
  var cityarr = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"]
  // 獲取y軸最大值
  wx.getSystemInfo({
   success: function (res) {
    height = res.windowHeight - 10;
   }
  });
  //判斷選擇區(qū)域,只有在選擇區(qū)才會生效
  if (y > offsettop && y < height) {
   // console.log((y-offsettop)/lineHeight)
   var num = parseInt((y - offsettop) / lineHeight);
   endWords = cityarr[num];
   // 這里 把endWords 綁定到this 上，是為了手指離開事件獲取值
   that.endWords = endWords;
  };
  //去除重復(fù)，為了防止每次移動都賦值 ,這里限制值有變化后才會有賦值操作，
  //DOTO 這里暫時還有問題，還是比較卡，待優(yōu)化
  if (isNum != num) {
   // console.log(isNum);
   isNum = num;
   that.setData({
    showwords: that.endWords
   })
  }
 },
 //選擇城市，并讓選中的值顯示在文本框里
 bindCity: function(e) {
  console.log(e);
  var cityName = e.currentTarget.dataset.city;
  this.setData({ cityName: cityName })
 }
})

4. Create a city file

Create the city.js file in the utils folder. The specific code is as follows:

var city = {
 "City": [
  {
   "熱門城市": [
    {
     "name": "北京",
     "key": "熱門"
    },
    {
     "name": "上海",
     "key": "熱門"
    },
    {
     "name": "廣州",
     "key": "熱門"
    },
    {
     "name": "深圳",
     "key": "熱門"
    },
    {
     "name": "成都",
     "key": "熱門"
    },
    {
     "name": "重慶",
     "key": "熱門"
    },
    {
     "name": "天津",
     "key": "熱門"
    },
    {
     "name": "杭州",
     "key": "熱門"
    },
    {
     "name": "南京",
     "key": "熱門"
    },
    {
     "name": "蘇州",
     "key": "熱門"
    },
    {
     "name": "武漢",
     "key": "熱門"
    },
    {
     "name": "西安",
     "key": "熱門"
    }
   ],
   "A": [
    {
     "name": "阿壩",
     "key": "A"
    },
    {
     "name": "阿拉善",
     "key": "A"
    },
    {
     "name": "阿里",
     "key": "A"
    },
    {
     "name": "安康",
     "key": "A"
    },
    {
     "name": "安慶",
     "key": "A"
    },
    {
     "name": "鞍山",
     "key": "A"
    }
    ,
    {
     "name": "安順",
     "key": "A"
    }
    ,
    {
     "name": "安陽",
     "key": "A"
    }
    ,
    {
     "name": "澳門",
     "key": "A"
    }
   ],
   "B": [
    {
     "name": "北京",
     "key": "B"
    },
    {
     "name": "白銀",
     "key": "B"
    },
    {
     "name": "保定",
     "key": "B"
    },
    {
     "name": "寶雞",
     "key": "B"
    },
    {
     "name": "保山",
     "key": "B"
    },
    {
     "name": "包頭",
     "key": "B"
    },
    {
     "name": "巴中",
     "key": "B"
    }
    ,
    {
     "name": "北海",
     "key": "B"
    }
    ,
    {
     "name": "蚌埠",
     "key": "B"
    }
    ,
    {
     "name": "本溪",
     "key": "B"
    }
    ,
    {
     "name": "畢節(jié)",
     "key": "B"
    }
    ,
    {
     "name": "濱州",
     "key": "B"
    }
    ,
    {
     "name": "百色",
     "key": "B"
    }
    ,
    {
     "name": "亳州",
     "key": "B"
    }
   ],
   "C": [
    {
     "name": "重慶",
     "key": "C"
    },
    {
     "name": "成都",
     "key": "C"
    },
    {
     "name": "長沙",
     "key": "C"
    },
    {
     "name": "長春",
     "key": "C"
    },
    {
     "name": "滄州",
     "key": "C"
    },
    {
     "name": "常德",
     "key": "C"
    },
    {
     "name": "昌都",
     "key": "C"
    }
    ,
    {
     "name": "長治",
     "key": "C"
    }
    ,
    {
     "name": "常州",
     "key": "C"
    }
    ,
    {
     "name": "巢湖",
     "key": "C"
    }
    ,
    {
     "name": "潮州",
     "key": "C"
    }
    ,
    {
     "name": "承德",
     "key": "C"
    }
    ,
    {
     "name": "郴州",
     "key": "C"
    }
    ,
    {
     "name": "赤峰",
     "key": "C"
    }
    ,
    {
     "name": "池州",
     "key": "C"
    }
    ,
    {
     "name": "崇左",
     "key": "C"
    }
    ,
    {
     "name": "楚雄",
     "key": "C"
    }
    ,
    {
     "name": "滁州",
     "key": "C"
    }
    ,
    {
     "name": "朝陽",
     "key": "C"
    }
   ],
   "D": [
    {
     "name": "大連",
     "key": "D"
    },
    {
     "name": "東莞",
     "key": "D"
    },
    {
     "name": "大理",
     "key": "D"
    },
    {
     "name": "丹東",
     "key": "D"
    },
    {
     "name": "大慶",
     "key": "D"
    },
    {
     "name": "大同",
     "key": "D"
    },
    {
     "name": "大興安嶺",
     "key": "D"
    }
    ,
    {
     "name": "德宏",
     "key": "D"
    }
    ,
    {
     "name": "德陽",
     "key": "D"
    }
    ,
    {
     "name": "德州",
     "key": "D"
    }
    ,
    {
     "name": "定西",
     "key": "D"
    }
    ,
    {
     "name": "迪慶",
     "key": "D"
    }
    ,
    {
     "name": "東營",
     "key": "D"
    }
   ],
   "E": [
    {
     "name": "鄂爾多斯",
     "key": "E"
    }
    ,
    {
     "name": "恩施",
     "key": "E"
    }
    ,
    {
     "name": "鄂州",
     "key": "E"
    }
   ],
   "F": [
    {
     "name": "福州",
     "key": "F"
    }
    ,
    {
     "name": "防城港",
     "key": "F"
    }
    ,
    {
     "name": "佛山",
     "key": "F"
    }
    ,
    {
     "name": "撫順",
     "key": "F"
    }
    ,
    {
     "name": "撫州",
     "key": "F"
    }
    ,
    {
     "name": "阜新",
     "key": "F"
    }
    ,
    {
     "name": "阜陽",
     "key": "F"
    }
   ]
   ,
   "G": [
    {
     "name": "廣州",
     "key": "G"
    },
    {
     "name": "贛州",
     "key": "G"
    },
    {
     "name": "桂林",
     "key": "G"
    },
    {
     "name": "貴陽",
     "key": "G"
    },
    {
     "name": "甘南",
     "key": "G"
    },
    {
     "name": "甘孜",
     "key": "G"
    },
    {
     "name": "廣安",
     "key": "G"
    }
    ,
    {
     "name": "廣元",
     "key": "G"
    }
    ,
    {
     "name": "果洛",
     "key": "G"
    }
    ,
    {
     "name": "貴港",
     "key": "G"
    }
   ],
   "H": [
    {
     "name": "杭州",
     "key": "H"
    },
    {
     "name": "哈爾濱",
     "key": "H"
    },
    {
     "name": "合肥",
     "key": "H"
    },
    {
     "name": "?？?quot;,
     "key": "H"
    },
    {
     "name": "海東",
     "key": "H"
    },
    {
     "name": "海北",
     "key": "H"
    },
    {
     "name": "海南",
     "key": "H"
    }
    ,
    {
     "name": "海西",
     "key": "H"
    }
    ,
    {
     "name": "邯鄲",
     "key": "H"
    }
    ,
    {
     "name": "漢中",
     "key": "H"
    }
    ,
    {
     "name": "鶴壁",
     "key": "H"
    }
    ,
    {
     "name": "河池",
     "key": "H"
    }
    ,
    {
     "name": "鶴崗",
     "key": "H"
    }
    ,
    {
     "name": "黑河",
     "key": "H"
    }
    ,
    {
     "name": "衡水",
     "key": "H"
    }
    ,
    {
     "name": "衡陽",
     "key": "H"
    }
    ,
    {
     "name": "河源",
     "key": "H"
    }
    ,
    {
     "name": "賀州",
     "key": "H"
    }
    ,
    {
     "name": "紅河",
     "key": "H"
    }
    ,
    {
     "name": "淮安",
     "key": "H"
    }
    ,
    {
     "name": "淮北",
     "key": "H"
    }
    ,
    {
     "name": "懷化",
     "key": "H"
    }
    ,
    {
     "name": "淮南",
     "key": "H"
    }
    ,
    {
     "name": "黃岡",
     "key": "H"
    }
    ,
    {
     "name": "黃南",
     "key": "H"
    }
    ,
    {
     "name": "黃山",
     "key": "H"
    },
    {
     "name": "黃石",
     "key": "H"
    },
    {
     "name": "惠州",
     "key": "H"
    },
    {
     "name": "葫蘆島",
     "key": "H"
    },
    {
     "name": "呼倫貝爾",
     "key": "H"
    },
    {
     "name": "湖州",
     "key": "H"
    }
    ,
    {
     "name": "菏澤",
     "key": "H"
    }
   ],
   "J": [
    {
     "name": "濟南",
     "key": "J"
    },
    {
     "name": "佳木斯",
     "key": "J"
    },
    {
     "name": "吉安",
     "key": "J"
    },
    {
     "name": "江門",
     "key": "J"
    },
    {
     "name": "焦作",
     "key": "J"
    },
    {
     "name": "嘉興",
     "key": "J"
    },
    {
     "name": "嘉峪關(guān)",
     "key": "J"
    }
    ,
    {
     "name": "揭陽",
     "key": "J"
    }
    ,
    {
     "name": "吉林",
     "key": "J"
    }
    ,
    {
     "name": "金昌",
     "key": "J"
    }
    ,
    {
     "name": "晉城",
     "key": "J"
    }
    ,
    {
     "name": "景德鎮(zhèn)",
     "key": "J"
    }
    ,
    {
     "name": "荊門",
     "key": "J"
    }
    ,
    {
     "name": "荊州",
     "key": "J"
    }
    ,
    {
     "name": "金華",
     "key": "J"
    }
    ,
    {
     "name": "濟寧",
     "key": "J"
    }
    ,
    {
     "name": "晉中",
     "key": "J"
    }
    ,
    {
     "name": "錦州",
     "key": "J"
    }
    ,
    {
     "name": "九江",
     "key": "J"
    }
    ,
    {
     "name": "酒泉",
     "key": "J"
    }
   ]
   ,
   "K": [
    {
     "name": "昆明",
     "key": "K"
    }
    ,
    {
     "name": "開封",
     "key": "K"
    }
   ]
   ,
   "L": [
    {
     "name": "蘭州",
     "key": "L"
    },
    {
     "name": "拉薩",
     "key": "L"
    },
    {
     "name": "來賓",
     "key": "L"
    },
    {
     "name": "萊蕪",
     "key": "L"
    },
    {
     "name": "廊坊",
     "key": "L"
    },
    {
     "name": "樂山",
     "key": "L"
    },
    {
     "name": "涼山",
     "key": "L"
    }
    ,
    {
     "name": "連云港",
     "key": "L"
    }
    ,
    {
     "name": "聊城",
     "key": "L"
    }
    ,
    {
     "name": "遼陽",
     "key": "L"
    }
    ,
    {
     "name": "遼源",
     "key": "L"
    }
    ,
    {
     "name": "麗江",
     "key": "L"
    }
    ,
    {
     "name": "臨滄",
     "key": "L"
    }
    ,
    {
     "name": "臨汾",
     "key": "L"
    }
    ,
    {
     "name": "臨夏",
     "key": "L"
    }
    ,
    {
     "name": "臨沂",
     "key": "L"
    }
    ,
    {
     "name": "林芝",
     "key": "L"
    }
    ,
    {
     "name": "麗水",
     "key": "L"
    }
    ,
    {
     "name": "六安",
     "key": "L"
    }
    ,
    {
     "name": "六盤水",
     "key": "L"
    }
    ,
    {
     "name": "柳州",
     "key": "L"
    }
    ,
    {
     "name": "隴南",
     "key": "L"
    }
    ,
    {
     "name": "龍巖",
     "key": "L"
    }
    ,
    {
     "name": "婁底",
     "key": "L"
    }
    ,
    {
     "name": "漯河",
     "key": "L"
    }
    ,
    {
     "name": "洛陽",
     "key": "L"
    },
    {
     "name": "瀘州",
     "key": "L"
    },
    {
     "name": "呂梁",
     "key": "L"
    }
   ],
   "M": [
    {
     "name": "馬鞍山",
     "key": "M"
    }
    ,
    {
     "name": "茂名",
     "key": "M"
    }
    ,
    {
     "name": "眉山",
     "key": "M"
    }
    ,
    {
     "name": "梅州",
     "key": "M"
    }
    ,
    {
     "name": "綿陽",
     "key": "M"
    }
    ,
    {
     "name": "牡丹江",
     "key": "M"
    }
   ],
   "N": [
    {
     "name": "南京",
     "key": "N"
    },
    {
     "name": "南昌",
     "key": "N"
    },
    {
     "name": "南寧",
     "key": "N"
    },
    {
     "name": "南充",
     "key": "N"
    },
    {
     "name": "南平",
     "key": "N"
    },
    {
     "name": "南通",
     "key": "N"
    },
    {
     "name": "南陽",
     "key": "N"
    }
    ,
    {
     "name": "那曲",
     "key": "N"
    }
    ,
    {
     "name": "內(nèi)江",
     "key": "N"
    }
    ,
    {
     "name": "寧德",
     "key": "N"
    }
    ,
    {
     "name": "怒江",
     "key": "N"
    }
   ],
   "P": [
    {
     "name": "盤錦",
     "key": "P"
    }
    ,
    {
     "name": "攀枝花",
     "key": "P"
    }
    ,
    {
     "name": "平頂山",
     "key": "P"
    }
    ,
    {
     "name": "平?jīng)?quot;,
     "key": "P"
    }
    ,
    {
     "name": "萍鄉(xiāng)",
     "key": "P"
    }
    ,
    {
     "name": "莆田",
     "key": "P"
    }
    ,
    {
     "name": "濮陽",
     "key": "P"
    }
   ],
   "Q": [
    {
     "name": "青島",
     "key": "Q"
    },
    {
     "name": "黔東南",
     "key": "Q"
    },
    {
     "name": "黔南",
     "key": "Q"
    },
    {
     "name": "黔西南",
     "key": "Q"
    },
    {
     "name": "慶陽",
     "key": "Q"
    },
    {
     "name": "清遠",
     "key": "Q"
    },
    {
     "name": "秦皇島",
     "key": "Q"
    }
    ,
    {
     "name": "欽州",
     "key": "Q"
    }
    ,
    {
     "name": "齊齊哈爾",
     "key": "Q"
    }
    ,
    {
     "name": "泉州",
     "key": "Q"
    }
    ,
    {
     "name": "曲靖",
     "key": "Q"
    }
    ,
    {
     "name": "衢州",
     "key": "Q"
    }
   ],
   "R": [
    {
     "name": "日喀則",
     "key": "R"
    },
    {
     "name": "日照",
     "key": "R"
    }
   ]
   ,
   "S": [
    {
     "name": "上海",
     "key": "S"
    },
    {
     "name": "深圳",
     "key": "S"
    },
    {
     "name": "蘇州",
     "key": "S"
    },
    {
     "name": "沈陽",
     "key": "S"
    },
    {
     "name": "石家莊",
     "key": "S"
    },
    {
     "name": "三門峽",
     "key": "S"
    },
    {
     "name": "三明",
     "key": "S"
    }
    ,
    {
     "name": "三亞",
     "key": "S"
    }
    ,
    {
     "name": "商洛",
     "key": "S"
    }
    ,
    {
     "name": "商丘",
     "key": "S"
    }
    ,
    {
     "name": "上饒",
     "key": "S"
    }
    ,
    {
     "name": "山南",
     "key": "S"
    }
    ,
    {
     "name": "汕頭",
     "key": "S"
    }
    ,
    {
     "name": "汕尾",
     "key": "S"
    }
    ,
    {
     "name": "韶關(guān)",
     "key": "S"
    }
    ,
    {
     "name": "紹興",
     "key": "S"
    }
    ,
    {
     "name": "邵陽",
     "key": "S"
    }
    ,
    {
     "name": "十堰",
     "key": "S"
    }
    ,
    {
     "name": "朔州",
     "key": "S"
    }
    ,
    {
     "name": "四平",
     "key": "S"
    }
    ,
    {
     "name": "綏化",
     "key": "S"
    }
    ,
    {
     "name": "遂寧",
     "key": "S"
    }
    ,
    {
     "name": "隨州",
     "key": "S"
    }
    ,
    {
     "name": "婁底",
     "key": "S"
    }
    ,
    {
     "name": "宿遷",
     "key": "S"
    }
    ,
    {
     "name": "宿州",
     "key": "S"
    }
   ],
   "T": [
    {
     "name": "天津",
     "key": "T"
    },
    {
     "name": "太原",
     "key": "T"
    },
    {
     "name": "泰安",
     "key": "T"
    },
    {
     "name": "泰州",
     "key": "T"
    },
    {
     "name": "唐山",
     "key": "T"
    },
    {
     "name": "天水",
     "key": "T"
    },
    {
     "name": "鐵嶺",
     "key": "T"
    }
    ,
    {
     "name": "銅川",
     "key": "T"
    }
    ,
    {
     "name": "通化",
     "key": "T"
    }
    ,
    {
     "name": "通遼",
     "key": "T"
    }
    ,
    {
     "name": "銅陵",
     "key": "T"
    }
    ,
    {
     "name": "銅仁",
     "key": "T"
    }
    ,
    {
     "name": "臺灣",
     "key": "T"
    }
   ]
   ,
   "W": [
    {
     "name": "武漢",
     "key": "W"
    },
    {
     "name": "烏魯木齊",
     "key": "W"
    },
    {
     "name": "無錫",
     "key": "W"
    },
    {
     "name": "威海",
     "key": "W"
    },
    {
     "name": "濰坊",
     "key": "W"
    },
    {
     "name": "文山",
     "key": "W"
    },
    {
     "name": "溫州",
     "key": "W"
    }
    ,
    {
     "name": "烏海",
     "key": "W"
    }
    ,
    {
     "name": "蕪湖",
     "key": "W"
    }
    ,
    {
     "name": "烏蘭察布",
     "key": "W"
    }
    ,
    {
     "name": "武威",
     "key": "W"
    }
    ,
    {
     "name": "梧州",
     "key": "W"
    }
   ],
   "X": [
    {
     "name": "廈門",
     "key": "X"
    },
    {
     "name": "西安",
     "key": "X"
    },
    {
     "name": "西寧",
     "key": "X"
    },
    {
     "name": "襄樊",
     "key": "X"
    },
    {
     "name": "湘潭",
     "key": "X"
    },
    {
     "name": "湘西",
     "key": "X"
    },
    {
     "name": "咸寧",
     "key": "X"
    }
    ,
    {
     "name": "咸陽",
     "key": "X"
    }
    ,
    {
     "name": "孝感",
     "key": "X"
    }
    ,
    {
     "name": "邢臺",
     "key": "X"
    }
    ,
    {
     "name": "新鄉(xiāng)",
     "key": "X"
    }
    ,
    {
     "name": "信陽",
     "key": "X"
    }
    ,
    {
     "name": "新余",
     "key": "X"
    }
    ,
    {
     "name": "忻州",
     "key": "X"
    }
    ,
    {
     "name": "西雙版納",
     "key": "X"
    }
    ,
    {
     "name": "宣城",
     "key": "X"
    }
    ,
    {
     "name": "許昌",
     "key": "X"
    }
    ,
    {
     "name": "徐州",
     "key": "X"
    }
    ,
    {
     "name": "香港",
     "key": "X"
    }
    ,
    {
     "name": "錫林郭勒",
     "key": "X"
    }
    ,
    {
     "name": "興安",
     "key": "X"
    }
   ]
   ,
   "Y": [
    {
     "name": "銀川",
     "key": "Y"
    },
    {
     "name": "雅安",
     "key": "Y"
    },
    {
     "name": "延安",
     "key": "Y"
    },
    {
     "name": "延邊",
     "key": "Y"
    },
    {
     "name": "鹽城",
     "key": "Y"
    },
    {
     "name": "陽江",
     "key": "Y"
    },
    {
     "name": "陽泉",
     "key": "Y"
    }
    ,
    {
     "name": "揚州",
     "key": "Y"
    }
    ,
    {
     "name": "煙臺",
     "key": "Y"
    }
    ,
    {
     "name": "宜賓",
     "key": "Y"
    }
    ,
    {
     "name": "宜昌",
     "key": "Y"
    }
    ,
    {
     "name": "宜春",
     "key": "Y"
    }
    ,
    {
     "name": "營口",
     "key": "Y"
    }
    ,
    {
     "name": "益陽",
     "key": "Y"
    }
    ,
    {
     "name": "永州",
     "key": "Y"
    }
    ,
    {
     "name": "岳陽",
     "key": "Y"
    }
    ,
    {
     "name": "榆林",
     "key": "Y"
    }
    ,
    {
     "name": "運城",
     "key": "Y"
    }
    ,
    {
     "name": "云浮",
     "key": "Y"
    }
    ,
    {
     "name": "玉樹",
     "key": "Y"
    }
    ,
    {
     "name": "玉溪",
     "key": "Y"
    }
    ,
    {
     "name": "玉林",
     "key": "Y"
    }
   ],
   "Z": [
    {
     "name": "雜多縣",
     "key": "Z"
    },
    {
     "name": "贊皇縣",
     "key": "Z"
    },
    {
     "name": "棗強縣",
     "key": "Z"
    },
    {
     "name": "棗陽市",
     "key": "Z"
    },
    {
     "name": "棗莊",
     "key": "Z"
    },
    {
     "name": "澤庫縣",
     "key": "Z"
    },
    {
     "name": "增城市",
     "key": "Z"
    }
    ,
    {
     "name": "曾都區(qū)",
     "key": "Z"
    }
    ,
    {
     "name": "澤普縣",
     "key": "Z"
    }
    ,
    {
     "name": "澤州縣",
     "key": "Z"
    }
    ,
    {
     "name": "札達縣",
     "key": "Z"
    }
    ,
    {
     "name": "扎賚特旗",
     "key": "Z"
    }
    ,
    {
     "name": "扎蘭屯市",
     "key": "Z"
    }
    ,
    {
     "name": "扎魯特旗",
     "key": "Z"
    }
    ,
    {
     "name": "扎囊縣",
     "key": "Z"
    }
    ,
    {
     "name": "張北縣",
     "key": "Z"
    }
    ,
    {
     "name": "張店區(qū)",
     "key": "Z"
    }
    ,
    {
     "name": "章貢區(qū)",
     "key": "Z"
    }
    ,
    {
     "name": "張家港",
     "key": "Z"
    }
    ,
    {
     "name": "張家界",
     "key": "Z"
    }
    ,
    {
     "name": "張家口",
     "key": "Z"
    }
    ,
    {
     "name": "漳平市",
     "key": "Z"
    }
    ,
    {
     "name": "漳浦縣",
     "key": "Z"
    }
    ,
    {
     "name": "章丘市",
     "key": "Z"
    }
    ,
    {
     "name": "樟樹市",
     "key": "Z"
    }
    ,
    {
     "name": "張灣區(qū)",
     "key": "Z"
    },
    {
     "name": "彰武縣",
     "key": "Z"
    },
    {
     "name": "漳縣",
     "key": "Z"
    },
    {
     "name": "張掖",
     "key": "Z"
    },
    {
     "name": "漳州",
     "key": "Z"
    },
    {
     "name": "長子縣",
     "key": "Z"
    }
    ,
    {
     "name": "湛河區(qū)",
     "key": "Z"
    }
    ,
    {
     "name": "湛江",
     "key": "Z"
    }
    ,
    {
     "name": "站前區(qū)",
     "key": "Z"
    }
    ,
    {
     "name": "沾益縣",
     "key": "Z"
    }
    ,
    {
     "name": "詔安縣",
     "key": "Z"
    },
    {
     "name": "召陵區(qū)",
     "key": "Z"
    },
    {
     "name": "昭平縣",
     "key": "Z"
    },
    {
     "name": "肇慶",
     "key": "Z"
    },
    {
     "name": "昭通",
     "key": "Z"
    },
    {
     "name": "趙縣",
     "key": "Z"
    }
   ]
  }
 ]
}
module.exports = city;

The above is the detailed content of Introduction to how to implement the WeChat applet function of selecting cities based on letters. For more information, please follow other related articles on the PHP Chinese website!