使用微信小程序制作核酸檢測點查詢工具
出門在外，沒有核酸證明寸步難行，此文將教你如何通過小程序制作一個工具幫你在人生地不熟的情況如何迅速找到核酸檢測點，實現核酸點查詢、地圖導航、撥號等功能。
小程序 創建小程序
訪問微信公眾平臺，點擊賬號註冊。
- 選擇小程序，並在表單填寫所需的各項信息進行註冊。
- 在開發管理選擇開發設置，將AppID及AppSecret復制出來進行存儲。
- 下載安裝微信web開發者工具並創建一個新的項目，填入上圖所復制的AppId。
申請騰訊地圖用戶key
訪問騰訊位置服務，申請騰訊地圖用戶Key，因為在後面我們需要將用戶的經緯度解析成地址，所以這個步驟是必不可少的
- 點擊右上角的登陸，選擇註冊或綁定現有賬號；綁定完畢後選擇創建ApiKey
- 填寫所需的各項表單信息，點擊確定將所創建的API Key保存下來。
實現小程序界面
在頁面上大致要實現選擇省市區功能，然後通過點擊查詢按鈕將核酸點數據進行渲染，實現導航及撥號等細節功能，設計如下。
- 在pages文件夾下面創建一個文件夾並新建對應的page文件。
- 在index.js中引入utils文件夾下面的引入騰訊地圖SDK核心類。
const util = require("../../utils/util.js");
const app = getApp();
// 引入騰訊地圖SDK核心類
var QQMapWX = require('../../utils/map/qqmap-wx-jssdk.js');
var qqmapsdk;
- 在JS中的onLoad函數中將其進行實例化，復制剛才在騰訊地圖所申請的用戶key。
qqmapsdk = new QQMapWX({
key: '剛剛所申請的key填到這裡'
});
- 實現省市區下拉框三級聯動，這裡需要用到的是picker組件，mode熟悉填寫region。
<picker class="picker" mode="region" bindchange="bindPickerChange" value="{{region}}" custom-item="{{customItem}}">
<view class="address little">
<text>請選擇: </text>
<text> {{provinceName}} {{cityName}} {{districtName}}</text>
</view>
</picker>
- 同時實現該組件的響應函數，看是否能夠獲取到我們所需要的信息，正確響應如下圖，然後根據數組下標取到對應的省市區並將其存儲到全局的data中。
bindPickerChange: function (e) {
let that = this;
let province = e.detail.value[0];
let city = e.detail.value[1];
let district = e.detail.value[2];
that .setData({
province : province,
city : city,
district: e.detail.value
});
},
- picker組件在加載時候默認是不會選中的，為瞭優化用戶體驗，我們需要在加載的時候獲取用戶的位置並對其進行賦值，首先需要在app.json文件中增加配置。
"permission": {
"scope.userLocation": {
"desc": "位置信息效果展示"
}
},
"requiredPrivateInfos": [
"getLocation"
]
- 回到index.js，在onLoad函數中調用wx.getLocation，這個函數是用於獲取用戶當前經緯度。
- 很顯然，經緯度是不能夠直接賦值給picker組件的，接下來需要逆解析將其轉換為地址，這時候需要用到reverseGeocoder函數瞭，將上一個函數返回的經緯度作為參數拼接調用，返回的信息中就有我們需要的省市區等詳細地址瞭。
//獲取用戶當前經緯度
wx.getLocation({
type: 'wgs84',
success (data) {
// 將用戶經緯度轉換為地址
qqmapsdk.reverseGeocoder({//地址解析
location: {
longitude: data.longitude,
latitude: data.latitude,
},
success: function (resSuc) {
let province = resSuc.result.address_component.province;
let city = resSuc.result.address_component.city;
let district = resSuc.result.address_component.district;
that.setData({
province: province.substr(0, province.length - 1),
city: city.substr(0, city.length - 1),
provinceName:province,
cityName:city,
districtName:district
});
},
fail: function (errInfo) {
}
});
},
fail: function (errInfo) {
console.info(errInfo)
}
});
全國省市區數據
後續的接口請求中需要傳遞不同的城市code，所以現在現在需要封裝一個JS，用於傳參使用。在utils文件夾中新建一個js文件，將省份及城市數據存放其中，並進行初始化。
var cityData = [{
"province_id": "1",
"province": "安徽",
"citys": [{
"city_id": "10001",
"city": "合肥"
}, {
"city_id": "10002",
"city": "蕪湖"
}, {
"city_id": "10003",
"city": "蚌埠"
}, {
"city_id": "10004",
"city": "淮南"
}, {
"city_id": "10005",
"city": "馬鞍山"
}, {
"city_id": "10006",
"city": "淮北"
}, {
"city_id": "10007",
"city": "銅陵"
}, {
"city_id": "10008",
"city": "安慶"
}, {
"city_id": "10009",
"city": "黃山"
}, {
"city_id": "10010",
"city": "滁州"
}, {
"city_id": "10011",
"city": "阜陽"
}, {
"city_id": "10012",
"city": "宿州"
}, {
"city_id": "10013",
"city": "六安"
}, {
"city_id": "10014",
"city": "亳州"
}, {
"city_id": "10015",
"city": "池州"
}, {
"city_id": "10016",
"city": "宣城"
}]
}, {
"province_id": "2",
"province": "北京",
"citys": [{
"city_id": "10017",
"city": "北京"
}]
}, {
"province_id": "3",
"province": "重慶",
"citys": [{
"city_id": "10018",
"city": "重慶"
}]
}, {
"province_id": "4",
"province": "福建",
"citys": [{
"city_id": "10019",
"city": "福州"
}, {
"city_id": "10020",
"city": "廈門"
}, {
"city_id": "10021",
"city": "莆田"
}, {
"city_id": "10022",
"city": "三明"
}, {
"city_id": "10023",
"city": "泉州"
}, {
"city_id": "10024",
"city": "漳州"
}, {
"city_id": "10025",
"city": "南平"
}, {
"city_id": "10026",
"city": "龍巖"
}, {
"city_id": "10027",
"city": "寧德"
}]
}, {
"province_id": "5",
"province": "廣東",
"citys": [{
"city_id": "10028",
"city": "廣州"
}, {
"city_id": "10029",
"city": "韶關"
}, {
"city_id": "10030",
"city": "深圳"
}, {
"city_id": "10031",
"city": "珠海"
}, {
"city_id": "10032",
"city": "汕頭"
}, {
"city_id": "10033",
"city": "佛山"
}, {
"city_id": "10034",
"city": "江門"
}, {
"city_id": "10035",
"city": "湛江"
}, {
"city_id": "10036",
"city": "茂名"
}, {
"city_id": "10037",
"city": "肇慶"
}, {
"city_id": "10038",
"city": "惠州"
}, {
"city_id": "10039",
"city": "梅州"
}, {
"city_id": "10040",
"city": "汕尾"
}, {
"city_id": "10041",
"city": "河源"
}, {
"city_id": "10042",
"city": "陽江"
}, {
"city_id": "10043",
"city": "清遠"
}, {
"city_id": "10044",
"city": "東莞"
}, {
"city_id": "10045",
"city": "中山"
}, {
"city_id": "10046",
"city": "潮州"
}, {
"city_id": "10047",
"city": "揭陽"
}, {
"city_id": "10048",
"city": "雲浮"
}]
}, {
"province_id": "6",
"province": "甘肅",
"citys": [{
"city_id": "10049",
"city": "蘭州"
}, {
"city_id": "10050",
"city": "嘉峪關"
}, {
"city_id": "10051",
"city": "金昌"
}, {
"city_id": "10052",
"city": "白銀"
}, {
"city_id": "10053",
"city": "天水"
}, {
"city_id": "10054",
"city": "武威"
}, {
"city_id": "10055",
"city": "張掖"
}, {
"city_id": "10056",
"city": "平涼"
}, {
"city_id": "10057",
"city": "酒泉"
}, {
"city_id": "10058",
"city": "慶陽"
}, {
"city_id": "10059",
"city": "定西"
}, {
"city_id": "10060",
"city": "隴南"
}, {
"city_id": "10061",
"city": "臨夏"
}, {
"city_id": "10062",
"city": "甘南"
}]
}, {
"province_id": "7",
"province": "廣西",
"citys": [{
"city_id": "10063",
"city": "南寧"
}, {
"city_id": "10064",
"city": "柳州"
}, {
"city_id": "10065",
"city": "桂林"
}, {
"city_id": "10066",
"city": "梧州"
}, {
"city_id": "10067",
"city": "北海"
}, {
"city_id": "10068",
"city": "防城港"
}, {
"city_id": "10069",
"city": "欽州"
}, {
"city_id": "10070",
"city": "貴港"
}, {
"city_id": "10071",
"city": "玉林"
}, {
"city_id": "10072",
"city": "百色"
}, {
"city_id": "10073",
"city": "賀州"
}, {
"city_id": "10074",
"city": "河池"
}, {
"city_id": "10075",
"city": "來賓"
}, {
"city_id": "10076",
"city": "崇左"
}]
}, {
"province_id": "8",
"province": "貴州",
"citys": [{
"city_id": "10077",
"city": "貴陽"
}, {
"city_id": "10078",
"city": "六盤水"
}, {
"city_id": "10079",
"city": "遵義"
}, {
"city_id": "10080",
"city": "安順"
}, {
"city_id": "10081",
"city": "畢節"
}, {
"city_id": "10082",
"city": "銅仁"
}, {
"city_id": "10083",
"city": "黔西南"
}, {
"city_id": "10084",
"city": "黔東南"
}, {
"city_id": "10085",
"city": "黔南"
}]
}, {
"province_id": "9",
"province": "河北",
"citys": [{
"city_id": "10086",
"city": "石傢莊"
}, {
"city_id": "10087",
"city": "唐山"
}, {
"city_id": "10088",
"city": "秦皇島"
}, {
"city_id": "10089",
"city": "邯鄲"
}, {
"city_id": "10090",
"city": "邢臺"
}, {
"city_id": "10091",
"city": "保定"
}, {
"city_id": "10092",
"city": "張傢口"
}, {
"city_id": "10093",
"city": "承德"
}, {
"city_id": "10094",
"city": "滄州"
}, {
"city_id": "10095",
"city": "廊坊"
}, {
"city_id": "10096",
"city": "衡水"
}]
}, {
"province_id": "10",
"province": "湖北",
"citys": [{
"city_id": "10097",
"city": "武漢"
}, {
"city_id": "10098",
"city": "黃石"
}, {
"city_id": "10099",
"city": "十堰"
}, {
"city_id": "10100",
"city": "宜昌"
}, {
"city_id": "10101",
"city": "襄陽"
}, {
"city_id": "10102",
"city": "鄂州"
}, {
"city_id": "10103",
"city": "荊門"
}, {
"city_id": "10104",
"city": "孝感"
}, {
"city_id": "10105",
"city": "荊州"
}, {
"city_id": "10106",
"city": "黃岡"
}, {
"city_id": "10107",
"city": "咸寧"
}, {
"city_id": "10108",
"city": "隨州"
}, {
"city_id": "10109",
"city": "恩施"
}, {
"city_id": "10110",
"city": "仙桃"
}, {
"city_id": "10111",
"city": "潛江"
}, {
"city_id": "10112",
"city": "天門"
}, {
"city_id": "10113",
"city": "神農架"
}]
}, {
"province_id": "11",
"province": "黑龍江",
"citys": [{
"city_id": "10114",
"city": "哈爾濱"
}, {
"city_id": "10115",
"city": "齊齊哈爾"
}, {
"city_id": "10116",
"city": "雞西"
}, {
"city_id": "10117",
"city": "鶴崗"
}, {
"city_id": "10118",
"city": "雙鴨山"
}, {
"city_id": "10119",
"city": "大慶"
}, {
"city_id": "10120",
"city": "伊春"
}, {
"city_id": "10121",
"city": "佳木斯"
}, {
"city_id": "10122",
"city": "七臺河"
}, {
"city_id": "10123",
"city": "牡丹江"
}, {
"city_id": "10124",
"city": "黑河"
}, {
"city_id": "10125",
"city": "綏化"
}, {
"city_id": "10126",
"city": "大興安嶺"
}]
}, {
"province_id": "12",
"province": "海南",
"citys": [{
"city_id": "10127",
"city": "海口"
}, {
"city_id": "10128",
"city": "三亞"
}, {
"city_id": "10129",
"city": "三沙"
}, {
"city_id": "10130",
"city": "儋州"
}, {
"city_id": "10131",
"city": "五指山"
}, {
"city_id": "10132",
"city": "瓊海"
}, {
"city_id": "10133",
"city": "文昌"
}, {
"city_id": "10134",
"city": "萬寧"
}, {
"city_id": "10135",
"city": "東方"
}, {
"city_id": "10136",
"city": "定安"
}, {
"city_id": "10137",
"city": "屯昌"
}, {
"city_id": "10138",
"city": "澄邁"
}, {
"city_id": "10139",
"city": "臨高"
}, {
"city_id": "10140",
"city": "白沙"
}, {
"city_id": "10141",
"city": "昌江"
}, {
"city_id": "10142",
"city": "樂東"
}, {
"city_id": "10143",
"city": "陵水"
}, {
"city_id": "10144",
"city": "保亭"
}, {
"city_id": "10145",
"city": "瓊中"
}]
}, {
"province_id": "13",
"province": "河南",
"citys": [{
"city_id": "10146",
"city": "鄭州"
}, {
"city_id": "10147",
"city": "開封"
}, {
"city_id": "10148",
"city": "洛陽"
}, {
"city_id": "10149",
"city": "平頂山"
}, {
"city_id": "10150",
"city": "安陽"
}, {
"city_id": "10151",
"city": "鶴壁"
}, {
"city_id": "10152",
"city": "新鄉"
}, {
"city_id": "10153",
"city": "焦作"
}, {
"city_id": "10154",
"city": "濮陽"
}, {
"city_id": "10155",
"city": "許昌"
}, {
"city_id": "10156",
"city": "漯河"
}, {
"city_id": "10157",
"city": "三門峽"
}, {
"city_id": "10158",
"city": "南陽"
}, {
"city_id": "10159",
"city": "商丘"
}, {
"city_id": "10160",
"city": "信陽"
}, {
"city_id": "10161",
"city": "周口"
}, {
"city_id": "10162",
"city": "駐馬店"
}, {
"city_id": "10163",
"city": "濟源"
}]
}, {
"province_id": "14",
"province": "湖南",
"citys": [{
"city_id": "10164",
"city": "長沙"
}, {
"city_id": "10165",
"city": "株洲"
}, {
"city_id": "10166",
"city": "湘潭"
}, {
"city_id": "10167",
"city": "衡陽"
}, {
"city_id": "10168",
"city": "邵陽"
}, {
"city_id": "10169",
"city": "嶽陽"
}, {
"city_id": "10170",
"city": "常德"
}, {
"city_id": "10171",
"city": "張傢界"
}, {
"city_id": "10172",
"city": "益陽"
}, {
"city_id": "10173",
"city": "郴州"
}, {
"city_id": "10174",
"city": "永州"
}, {
"city_id": "10175",
"city": "懷化"
}, {
"city_id": "10176",
"city": "婁底"
}, {
"city_id": "10177",
"city": "湘西"
}]
}, {
"province_id": "15",
"province": "吉林",
"citys": [{
"city_id": "10178",
"city": "長春"
}, {
"city_id": "10179",
"city": "吉林"
}, {
"city_id": "10180",
"city": "四平"
}, {
"city_id": "10181",
"city": "遼源"
}, {
"city_id": "10182",
"city": "通化"
}, {
"city_id": "10183",
"city": "白山"
}, {
"city_id": "10184",
"city": "松原"
}, {
"city_id": "10185",
"city": "白城"
}, {
"city_id": "10186",
"city": "延邊"
}]
}, {
"province_id": "16",
"province": "江蘇",
"citys": [{
"city_id": "10187",
"city": "南京"
}, {
"city_id": "10188",
"city": "無錫"
}, {
"city_id": "10189",
"city": "徐州"
}, {
"city_id": "10190",
"city": "常州"
}, {
"city_id": "10191",
"city": "蘇州"
}, {
"city_id": "10192",
"city": "南通"
}, {
"city_id": "10193",
"city": "連雲港"
}, {
"city_id": "10194",
"city": "淮安"
}, {
"city_id": "10195",
"city": "鹽城"
}, {
"city_id": "10196",
"city": "揚州"
}, {
"city_id": "10197",
"city": "鎮江"
}, {
"city_id": "10198",
"city": "泰州"
}, {
"city_id": "10199",
"city": "宿遷"
}]
}, {
"province_id": "17",
"province": "江西",
"citys": [{
"city_id": "10200",
"city": "南昌"
}, {
"city_id": "10201",
"city": "景德鎮"
}, {
"city_id": "10202",
"city": "萍鄉"
}, {
"city_id": "10203",
"city": "九江"
}, {
"city_id": "10204",
"city": "新餘"
}, {
"city_id": "10205",
"city": "鷹潭"
}, {
"city_id": "10206",
"city": "贛州"
}, {
"city_id": "10207",
"city": "吉安"
}, {
"city_id": "10208",
"city": "宜春"
}, {
"city_id": "10209",
"city": "撫州"
}, {
"city_id": "10210",
"city": "上饒"
}]
}, {
"province_id": "18",
"province": "遼寧",
"citys": [{
"city_id": "10211",
"city": "沈陽"
}, {
"city_id": "10212",
"city": "大連"
}, {
"city_id": "10213",
"city": "鞍山"
}, {
"city_id": "10214",
"city": "撫順"
}, {
"city_id": "10215",
"city": "本溪"
}, {
"city_id": "10216",
"city": "丹東"
}, {
"city_id": "10217",
"city": "錦州"
}, {
"city_id": "10218",
"city": "營口"
}, {
"city_id": "10219",
"city": "阜新"
}, {
"city_id": "10220",
"city": "遼陽"
}, {
"city_id": "10221",
"city": "盤錦"
}, {
"city_id": "10222",
"city": "鐵嶺"
}, {
"city_id": "10223",
"city": "朝陽"
}, {
"city_id": "10224",
"city": "葫蘆島"
}]
}, {
"province_id": "19",
"province": "內蒙古",
"citys": [{
"city_id": "10225",
"city": "呼和浩特"
}, {
"city_id": "10226",
"city": "包頭"
}, {
"city_id": "10227",
"city": "烏海"
}, {
"city_id": "10228",
"city": "赤峰"
}, {
"city_id": "10229",
"city": "通遼"
}, {
"city_id": "10230",
"city": "鄂爾多斯"
}, {
"city_id": "10231",
"city": "呼倫貝爾"
}, {
"city_id": "10232",
"city": "巴彥淖爾"
}, {
"city_id": "10233",
"city": "烏蘭察佈"
}, {
"city_id": "10234",
"city": "興安"
}, {
"city_id": "10235",
"city": "錫林郭勒"
}, {
"city_id": "10236",
"city": "阿拉善"
}]
}, {
"province_id": "20",
"province": "寧夏",
"citys": [{
"city_id": "10237",
"city": "銀川"
}, {
"city_id": "10238",
"city": "石嘴山"
}, {
"city_id": "10239",
"city": "吳忠"
}, {
"city_id": "10240",
"city": "固原"
}, {
"city_id": "10241",
"city": "中衛"
}]
}, {
"province_id": "21",
"province": "青海",
"citys": [{
"city_id": "10242",
"city": "西寧"
}, {
"city_id": "10243",
"city": "海東"
}, {
"city_id": "10244",
"city": "海北"
}, {
"city_id": "10245",
"city": "黃南"
}, {
"city_id": "10246",
"city": "海南"
}, {
"city_id": "10247",
"city": "果洛"
}, {
"city_id": "10248",
"city": "玉樹"
}, {
"city_id": "10249",
"city": "海西"
}]
}, {
"province_id": "22",
"province": "四川",
"citys": [{
"city_id": "10250",
"city": "成都"
}, {
"city_id": "10251",
"city": "自貢"
}, {
"city_id": "10252",
"city": "攀枝花"
}, {
"city_id": "10253",
"city": "瀘州"
}, {
"city_id": "10254",
"city": "德陽"
}, {
"city_id": "10255",
"city": "綿陽"
}, {
"city_id": "10256",
"city": "廣元"
}, {
"city_id": "10257",
"city": "遂寧"
}, {
"city_id": "10258",
"city": "內江"
}, {
"city_id": "10259",
"city": "樂山"
}, {
"city_id": "10260",
"city": "南充"
}, {
"city_id": "10261",
"city": "眉山"
}, {
"city_id": "10262",
"city": "宜賓"
}, {
"city_id": "10263",
"city": "廣安"
}, {
"city_id": "10264",
"city": "達州"
}, {
"city_id": "10265",
"city": "雅安"
}, {
"city_id": "10266",
"city": "巴中"
}, {
"city_id": "10267",
"city": "資陽"
}, {
"city_id": "10268",
"city": "阿壩"
}, {
"city_id": "10269",
"city": "甘孜"
}, {
"city_id": "10270",
"city": "涼山"
}]
}, {
"province_id": "23",
"province": "山東",
"citys": [{
"city_id": "10271",
"city": "濟南"
}, {
"city_id": "10272",
"city": "青島"
}, {
"city_id": "10273",
"city": "淄博"
}, {
"city_id": "10274",
"city": "棗莊"
}, {
"city_id": "10275",
"city": "東營"
}, {
"city_id": "10276",
"city": "煙臺"
}, {
"city_id": "10277",
"city": "濰坊"
}, {
"city_id": "10278",
"city": "濟寧"
}, {
"city_id": "10279",
"city": "泰安"
}, {
"city_id": "10280",
"city": "威海"
}, {
"city_id": "10281",
"city": "日照"
}, {
"city_id": "10282",
"city": "臨沂"
}, {
"city_id": "10283",
"city": "德州"
}, {
"city_id": "10284",
"city": "聊城"
}, {
"city_id": "10285",
"city": "濱州"
}, {
"city_id": "10286",
"city": "菏澤"
}]
}, {
"province_id": "24",
"province": "上海",
"citys": [{
"city_id": "10287",
"city": "上海"
}]
}, {
"province_id": "25",
"province": "山西",
"citys": [{
"city_id": "10288",
"city": "太原"
}, {
"city_id": "10289",
"city": "大同"
}, {
"city_id": "10290",
"city": "陽泉"
}, {
"city_id": "10291",
"city": "長治"
}, {
"city_id": "10292",
"city": "晉城"
}, {
"city_id": "10293",
"city": "朔州"
}, {
"city_id": "10294",
"city": "晉中"
}, {
"city_id": "10295",
"city": "運城"
}, {
"city_id": "10296",
"city": "忻州"
}, {
"city_id": "10297",
"city": "臨汾"
}, {
"city_id": "10298",
"city": "呂梁"
}]
}, {
"province_id": "26",
"province": "陜西",
"citys": [{
"city_id": "10299",
"city": "西安"
}, {
"city_id": "10300",
"city": "銅川"
}, {
"city_id": "10301",
"city": "寶雞"
}, {
"city_id": "10302",
"city": "咸陽"
}, {
"city_id": "10303",
"city": "渭南"
}, {
"city_id": "10304",
"city": "延安"
}, {
"city_id": "10305",
"city": "漢中"
}, {
"city_id": "10306",
"city": "榆林"
}, {
"city_id": "10307",
"city": "安康"
}, {
"city_id": "10308",
"city": "商洛"
}]
}, {
"province_id": "27",
"province": "天津",
"citys": [{
"city_id": "10309",
"city": "天津"
}]
}, {
"province_id": "28",
"province": "新疆",
"citys": [{
"city_id": "10310",
"city": "烏魯木齊"
}, {
"city_id": "10311",
"city": "克拉瑪依"
}, {
"city_id": "10312",
"city": "吐魯番"
}, {
"city_id": "10313",
"city": "哈密"
}, {
"city_id": "10314",
"city": "昌吉"
}, {
"city_id": "10315",
"city": "博爾塔拉"
}, {
"city_id": "10316",
"city": "巴音郭楞"
}, {
"city_id": "10317",
"city": "阿克蘇"
}, {
"city_id": "10318",
"city": "克孜勒蘇"
}, {
"city_id": "10319",
"city": "喀什"
}, {
"city_id": "10320",
"city": "和田"
}, {
"city_id": "10321",
"city": "伊犁"
}, {
"city_id": "10322",
"city": "塔城"
}, {
"city_id": "10323",
"city": "阿勒泰"
}]
}, {
"province_id": "29",
"province": "西藏",
"citys": [{
"city_id": "10324",
"city": "拉薩"
}, {
"city_id": "10325",
"city": "日喀則"
}, {
"city_id": "10326",
"city": "昌都"
}, {
"city_id": "10327",
"city": "林芝"
}, {
"city_id": "10328",
"city": "山南"
}, {
"city_id": "10329",
"city": "那曲"
}, {
"city_id": "10330",
"city": "阿裡"
}]
}, {
"province_id": "30",
"province": "雲南",
"citys": [{
"city_id": "10331",
"city": "昆明"
}, {
"city_id": "10332",
"city": "曲靖"
}, {
"city_id": "10333",
"city": "玉溪"
}, {
"city_id": "10334",
"city": "保山"
}, {
"city_id": "10335",
"city": "昭通"
}, {
"city_id": "10336",
"city": "麗江"
}, {
"city_id": "10337",
"city": "普洱"
}, {
"city_id": "10338",
"city": "臨滄"
}, {
"city_id": "10339",
"city": "楚雄"
}, {
"city_id": "10340",
"city": "紅河"
}, {
"city_id": "10341",
"city": "文山"
}, {
"city_id": "10342",
"city": "西雙版納"
}, {
"city_id": "10343",
"city": "大理"
}, {
"city_id": "10344",
"city": "德宏"
}, {
"city_id": "10345",
"city": "怒江"
}, {
"city_id": "10346",
"city": "迪慶"
}]
}, {
"province_id": "31",
"province": "浙江",
"citys": [{
"city_id": "10347",
"city": "杭州"
}, {
"city_id": "10348",
"city": "寧波"
}, {
"city_id": "10349",
"city": "溫州"
}, {
"city_id": "10350",
"city": "嘉興"
}, {
"city_id": "10351",
"city": "湖州"
}, {
"city_id": "10352",
"city": "紹興"
}, {
"city_id": "10353",
"city": "金華"
}, {
"city_id": "10354",
"city": "衢州"
}, {
"city_id": "10355",
"city": "舟山"
}, {
"city_id": "10356",
"city": "臺州"
}, {
"city_id": "10357",
"city": "麗水"
}]
}, {
"province_id": "32",
"province": "臺灣",
"citys": [{
"city_id": "10358",
"city": "臺灣"
}]
}, {
"province_id": "33",
"province": "香港",
"citys": [{
"city_id": "10359",
"city": "香港"
}]
}, {
"province_id": "34",
"province": "澳門",
"citys": [{
"city_id": "10360",
"city": "澳門"
}]
}];
function init(that){
that.setData( {
'cityData': cityData
});
}
module.exports={
init:init
}
API 提交資料認證並申請接口
訪問聚合數據，創建/登錄賬號，點擊個人中心，填寫對應的資料進行實名認證並申請對應的接口權限。
接口申請地址點此訪問
拼接參數調用接口
可以看到調用該接口的參數很簡單，隻有用戶應用key以及city_id，也就是我們上面所封裝的省市區js裡面的數據。
- 復制對應的key並實現從省市區JS中獲取用戶所選擇的城市id。
- 因為picker組件所響應的值是某某省、某某市這樣的數據，而我們所封裝的JS數據中又是沒有省跟市這些後綴的，所以在選擇的時候需要將省市區進行最後一位的移除，然後再通過findIndex的方式找到對應的下標，通過下標再找到對應的city_id。
- 能夠正常的獲取到城市id後，我們就可以拼接參數調用接口瞭。
wx.request({
url: 'http://apis.juhe.cn/springTravel/hsjg?key=這裡填寫你的應用key&city_id=' + cityCode,
method: 'get',
contentType: "application/x-www-form-urlencoded",
success: function (res) {
that.setData({
hospitalData: res.data.result.data
});
}
});
渲染數據優化細節
查看接口返回並渲染數據，通過上面的步驟我們可以得到如下圖，核酸檢測點數據已經成功返回瞭。
- 在頁面上定義對應的view及wx:for，將核酸檢查點名稱及電話進行展示。
- 在能將數據進行渲染之後，可以優化一些細節，例如導航及撥號等功能。
<image src="../../images/phone.png" class="phoneImg"></image>
<image src="../../images/map.png" class="mapIcon" data-name="{{item.name}}" data-id="{{item.address}}" bindtap="goMap"></image>
- 撥號功能，在撥號圖標實現對應的函數，將循環中的電話號碼以data-id的方式進行傳遞。
wx.makePhoneCall({
phoneNumber: e.currentTarget.dataset.id,
success: function () {
console.log('成功撥打電話')
}
})
- 導航功能，在地圖小圖標上面將循環中的address字段以data-id的方式進行傳遞。因為喚醒地圖需要準確的經緯度，所以我們這裡還需要將檢測點的地址進行轉換，最後再使用wx.openLocation通過微信內置地圖查看位置及導航。
goMap(e) {
let detail = e.currentTarget.dataset.id;
let name = e.currentTarget.dataset.name;
//地址轉換經緯度
qqmapsdk.geocoder({
address: e.currentTarget.dataset.id,
success: function (res) { //成功後的回調
wx.openLocation({ //使用微信內置地圖查看位置。
latitude: parseFloat(res.result.location.lat), //要去的緯度-地址
longitude: parseFloat(res.result.location.lng), //要去的經度-地址
name: name,
address: detail
})
}
});
},
在路上碰到幾個剛來的深漂拎著大包小包問哪裡有核酸可以做，給他們指完方向後覺得可以開發一個小工具幫助出門在外的朋友，抗疫不僅僅是精神的對壘也是物質的角力。
到此這篇關於使用微信小程序制作一個核酸檢測點查詢工具的文章就介紹到這瞭,更多相關小程序核酸檢測點查詢工具內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！