关键词：
出门在外，没有核酸证明寸步难行，此文将教你如何通过小程序制作一个工具帮你在人生地不熟的情况如何迅速找到核酸检测点，实现核酸点查询、地图导航、拨号等功能。
小程序
创建小程序
- 访问微信公众平台，点击账号注册。
- 选择小程序，并在表单填写所需的各项信息进行注册。
- 在开发管理选择开发设置，将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": "邯郸"
查看详情
微信小程序开发工具使用方法
注册微信公众号安装微信小程序开发工具第一步注册微信公众号 微信公众平台注册类型选择小程序。 输入信息完成注册。安装微信小程序开发工具 微信小程序开发工具包下载(ionic.wang)下载合适自己的版本。安装就是傻瓜... 查看详情
微信小程序开发工具怎么用小程序开发工具使用方法
1、首先要下载微信官方的微信Web开发者工具。打开微信公众平台（mp.weixin.qq.com），找到右下方的小程序模块，点击「开发」按钮；2、点击顶部导航栏的「工具」按钮，在新页面的左侧栏中找到「下载」。可以看到，开发工具提... 查看详情
微信小程序怎么用webstore开发
微信小程序开发的方法及步骤：首先要下载微信官方的微信Web开发者工具。打开微信公众平台，找到右下方的小程序模块，点击「开发」按钮；点击顶部导航栏的「工具」按钮，在新页面的左侧栏中找到「下载」。可以看到，开... 查看详情
微信小程序怎么制作自己的程序
参考技术A一、认识微信小程序（1）先了解应用如何开发WebApp（内嵌内浏览器打开指定网页）NativeApp（原生开发，也就是使用iOS和Android代码开发）HybridApp（混合APP开发，写DIV+CSS+JS+PHP代码开发）（2）微信、公众号、小程序微信：... 查看详情
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏。2算法描述首先就是对微信小程序开发者工具的配置，官网搜索后进入，选择稳定版，Windows64位下载。然后点开开发者工具，选择小程序，点击图片位置的... 查看详情
微信小程序怎么渲染html格式的内容
1、首先要下载微信官方的微信Web开发者工具。打开微信公众平台，找到右下方的小程序模块，点击「开发」按钮; 2、点击顶部导航栏的「工具」按钮，在新页面的左侧栏中找到「下载」。可以看到，开发工具提供Windows32位、... 查看详情
如何制作微信小程序
如何制作微信小程序,今天教大家只要三个步骤就可以制作出一个简单的小程序。第一步，就是注册小程序的账号,首先，进入公众平台，点击立即注册，选择小程序。按照页面提示填写注册信息即可，在这里，建议先注册一个服... 查看详情
怎么制作快手小铃铛微信小程序
制作快手小铃铛微信小程序所需材料:身份证，邮箱，手机号码，营业执照，已认证的服务号或订阅号，小程序源码。【第一步】注册小程序账号与登陆开发工具登陆微信公众平台申请注册小程序账号，根据提示逐步填写信息，... 查看详情
微信小程序｜基于小程序+云开发制作一个菜谱小程序
今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力。一、小程序1.创建小程序</ 查看详情
微信小程序｜使用小程序制作一个节日祝福生成器(代码片段)
...你的祝福脱颖而出吧。二、实现步骤2.1、创建小程序访问微信公众平台，点击账号注册。选择小程序，并在表单填写所需的各项信息进行注册。在 查看详情
微信小程序｜基于小程序+c#制作一个考试答题小程序
基于小程序+C#制作一个考试答题小程序打破传统线下考试答题的边界线问题，使考试不用再局限与某个统一的场所，只要有设备，哪里都能考试。一、小程序 查看详情
微信小程序代码怎么写?
参考技术A不懂代码怎么制作微信小程序首先看一下官方的干货：mp.weixin.qq/...201714指南包括小程序产品定位功能介绍，设计规范，开发入门教程，小程序数据相关分析等等一系列新手教程，接近手把手教，只要认真看总会有所感... 查看详情
微信小程序｜基于小程序+c#制作一个聊天系统(代码片段)
...与服务端的聊天功能。用小程序自带的客服功能只能绑定微信且一对一沟通，接入市面上成熟的即时通讯预算又略显不足，干脆自己开发一个也能应对简单的业务场景。实现流程1、服务端1.1、项目创建1.2、设计界面1.3、... 查看详情
微信小程序使用swiper制作一个滑动导航(代码片段)
最近在做一个导航的时候，发现使用overflow-x:auto来做多内容滑动导航效果很不好，思索是不是可以使用swiper来做一个，研究了下其实发现原理基本相同这里说下，要用swiper做导航菜单，有几个要特别注意的参数1：autoplay，官方说... 查看详情
恋爱话术表白头像漫画制作微信小程序
简介：恋爱话术表白头像漫画制作微信小程序恋爱信封表白制作生成(内涵N种文案)、头像转漫画制作、土味情话、舔狗语录、渣女语录、暖男情话等等多种功能使用方法:使用微信开发者工具，导入恋爱小程序源码，... 查看详情
微信小程序入门与实战常用组件api开发技巧项目实战
第1章什么是微信小程序？介绍小程序的特点与适用场景、对开发者的影响以及课程特色！七月老师小程序进阶课《纯正商业应用——微信小程序实战》与《微信小程序商城构建全栈应用》已上线，全面进阶小程序！第2章小程序... 查看详情
微信小程序怎么做店铺（微信小程序店铺怎么开通制作）
参考技术A随着微信的用户群体越来越大，很多商家纷纷开通自己的微信小程序店铺，在线售卖商品，而且依托微信这个拥有巨大流量的平台，不仅能有效运营推广店铺或品牌，还能拓展更多的客户资源，提升销售额。那么微信... 查看详情