使用微信小程序制作核酸檢測點查詢工具
更新時間：2022年10月23日 11:35:02 作者：摔跤貓子
出門在外，沒有核酸證明寸步難行，此文將教你如何通過小程序制作一個工具幫你在人生地不熟的情況如何迅速找到核酸檢測點，實現核酸點查詢、地圖導航、撥號等功能，需要的朋友可以參考下
出門在外，沒有核酸證明寸步難行，此文將教你如何通過小程序制作一個工具幫你在人生地不熟的情況如何迅速找到核酸檢測點，實現核酸點查詢、地圖導航、撥號等功能。
小程序 創(chuàng)建小程序
訪問微信公眾平臺，點擊賬號注冊。
- 選擇小程序，并在表單填寫所需的各項信息進行注冊。
- 在開發(fā)管理選擇開發(fā)設置，將AppID及AppSecret復制出來進行存儲。
- 下載安裝微信web開發(fā)者工具并創(chuàng)建一個新的項目，填入上圖所復制的AppId。
申請騰訊地圖用戶key
訪問騰訊位置服務，申請騰訊地圖用戶Key，因為在后面我們需要將用戶的經緯度解析成地址，所以這個步驟是必不可少的
- 點擊右上角的登陸，選擇注冊或綁定現有賬號；綁定完畢后選擇創(chuàng)建ApiKey
- 填寫所需的各項表單信息，點擊確定將所創(chuàng)建的API Key保存下來。
實現小程序界面
在頁面上大致要實現選擇省市區(qū)功能，然后通過點擊查詢按鈕將核酸點數據進行渲染，實現導航及撥號等細節(jié)功能，設計如下。
- 在pages文件夾下面創(chuàng)建一個文件夾并新建對應的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填到這里'
});
- 實現省市區(qū)下拉框三級聯(lián)動，這里需要用到的是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>
- 同時實現該組件的響應函數，看是否能夠獲取到我們所需要的信息，正確響應如下圖，然后根據數組下標取到對應的省市區(qū)并將其存儲到全局的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組件在加載時候默認是不會選中的，為了優(yōu)化用戶體驗，我們需要在加載的時候獲取用戶的位置并對其進行賦值，首先需要在app.json文件中增加配置。
"permission": {
"scope.userLocation": {
"desc": "位置信息效果展示"
}
},
"requiredPrivateInfos": [
"getLocation"
]
- 回到index.js，在onLoad函數中調用wx.getLocation，這個函數是用于獲取用戶當前經緯度。
- 很顯然，經緯度是不能夠直接賦值給picker組件的，接下來需要逆解析將其轉換為地址，這時候需要用到reverseGeocoder函數了，將上一個函數返回的經緯度作為參數拼接調用，返回的信息中就有我們需要的省市區(qū)等詳細地址了。
//獲取用戶當前經緯度
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)
}
});
全國省市區(qū)數據
后續(xù)的接口請求中需要傳遞不同的城市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": "畢節(jié)"
}, {
"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": "新鄉(xiāng)"
}, {
"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": "鎮(zhèn)江"
}, {
"city_id": "10198",
"city": "泰州"
}, {
"city_id": "10199",
"city": "宿遷"
}]
}, {
"province_id": "17",
"province": "江西",
"citys": [{
"city_id": "10200",
"city": "南昌"
}, {
"city_id": "10201",
"city": "景德鎮(zhèn)"
}, {
"city_id": "10202",
"city": "萍鄉(xiāng)"
}, {
"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": "中衛(wèi)"
}]
}, {
"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 提交資料認證并申請接口
訪問聚合數據，創(chuàng)建/登錄賬號，點擊個人中心，填寫對應的資料進行實名認證并申請對應的接口權限。
接口申請地址點此訪問
拼接參數調用接口
可以看到調用該接口的參數很簡單，只有用戶應用key以及city_id，也就是我們上面所封裝的省市區(qū)js里面的數據。
- 復制對應的key并實現從省市區(qū)JS中獲取用戶所選擇的城市id。
- 因為picker組件所響應的值是某某省、某某市這樣的數據，而我們所封裝的JS數據中又是沒有省跟市這些后綴的，所以在選擇的時候需要將省市區(qū)進行最后一位的移除，然后再通過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
});
}
});
渲染數據優(yōu)化細節(jié)
查看接口返回并渲染數據，通過上面的步驟我們可以得到如下圖，核酸檢測點數據已經成功返回了。
- 在頁面上定義對應的view及wx:for，將核酸檢查點名稱及電話進行展示。
- 在能將數據進行渲染之后，可以優(yōu)化一些細節(jié)，例如導航及撥號等功能。
<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>
- 撥號功能，在撥號圖標實現對應的函數，將循環(huán)中的電話號碼以data-id的方式進行傳遞。
wx.makePhoneCall({
phoneNumber: e.currentTarget.dataset.id,
success: function () {
console.log('成功撥打電話')
}
})
- 導航功能，在地圖小圖標上面將循環(huán)中的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
})
}
});
},
在路上碰到幾個剛來的深漂拎著大包小包問哪里有核酸可以做，給他們指完方向后覺得可以開發(fā)一個小工具幫助出門在外的朋友，抗疫不僅僅是精神的對壘也是物質的角力。
到此這篇關于使用微信小程序制作一個核酸檢測點查詢工具的文章就介紹到這了,更多相關小程序核酸檢測點查詢工具內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了JS實現鼠標箭頭變成一個燃燒燭光效果的方法,實例分析了javascript操作鼠標事件及圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
今天小編就為大家分享一篇js+springMVC 提交數組數據到后臺的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本篇文章主要介紹了js 定時器的語法、實例、與實現代碼分析。具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
解決bootstrap導航欄navbar在IE8上存在缺陷的方法
這篇文章主要為大家詳細介紹了解決bootstrap導航欄navbar在IE8上存在缺陷的方法,需要的朋友可以參考下2016-07-07
JavaScript 中提供的進制表示方法有四種：十進制、二進制、十六進制、八進制。本文主要講介紹一下JS中這些進制的互相轉換，感興趣的可以了解一下2023-02-02
今天小編就為大家分享一篇Layui 導航默認展開和菜單欄選中高亮設置的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
在前端開發(fā)中總會遇到各種各樣需要使用或計算坐標和距離的情況，于是便有了整理記錄的想法，即加深了印象，又方便隨時查閱。2019-05-05
最近在做一個ColdFusion的項目，有一個業(yè)務Check，需要用JavaScript實現：判斷指定字符串是否為有效數字。2010-05-05
這篇文章主要介紹了js帶縮略圖的圖片輪播效果，圖片輪播效果特別適合做產品展示，感興趣的小伙伴可以參考下。2015-09-09
這篇文章主要介紹了淺談webpack打包之后的文件過大的解決方法,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03