微信小程序之手机归属地查询

API申请

第一步：完整账号注册
我们需要来到如下网站，注册账号：万维易源

第二步：账号注册完成以后，点击右上角的控制台信息。

第三步：在控制台界面选择接口使用者-appKey管理

第四步：在appKey管理界面，点击添加按钮，在应用中输入自己想要的名字，白名单非必填，可调用接口搜索手机可以查询到对应的如下信息，选择以后点击“立即创建”。

第五步：设置以后，我们便可以看到我们常见的appKey了。

小程序设置

在小程序中，我们应用的API不是随便能够使用的，是需要在小程序中进行设置才能够使用。
第一步：登录小程序管理后台：微信公众平台
第二步：在小程序后台点击管理-开发管理中的开发设置

第三步：在开发设置中鼠标滚轮往下拉找到服务器域名设置，然后点击右侧修改按钮，在request合法域名中讲我们设置的需要的api加入进去，结果如下

至此，我们的API Key的申请以及小程序的设置已经完成，我们可以正式开发我们的业务。

业务实现

代码框架

我们的业务代码框架如下

代码实现

app.json实现

总体基调设置如下

util.js实现

index.wxml实现

界面布局实现

index.wxss实现

界面样式实现

index.js实现

业务实现如下