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

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

需求描述

API申请和小程序设置

API申请

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

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

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

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

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

小程序设置

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

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

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

业务实现

代码框架

我们的业务代码框架如下

代码实现

app.json实现

总体基调设置如下

{"pages": ["pages/index/index","pages/logs/logs" ],"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#FFFFFF","navigationBarTitleText": "手机号码归属地查询","navigationBarTextStyle": "black"},"sitemapLocation": "sitemap.json"
}

util.js实现

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return [year, month, day].map(formatNumber).join('') + '' + [hour, minute, second].map(formatNumber).join('')
}const formatNumber = n => {n = n.toString()return n[1] ? n : '0' + n
}module.exports = {formatTime: formatTime
}

index.wxml实现

界面布局实现

<!--pages/index/index.wxml-->
<view class='tel'><view class='input'><input type='number'placeholder='请输入查询的手机号'bindinput='bindInput'></input></view><view class='button'><button bindtap='bindSearch'>查询</button></view><view class='info'><text>温馨提示：查询结果仅供参考，以当地营业厅查询结果为</text></view><view class='result_caption'><text>{{ret_code}}</text></view><view class='result' hidden='{{hidden}}'><view class='row bg'>所查号码</view><view class='row bg'>{{number}}</view><view class='row'>归属省</view><view class='row'>{{prov}}</view><view class='row bg'>归属地区</view><view class='row bg'>{{city}}</view><view class='row'>运营商</view><view class='row'>{{name}}</view><view class='row bg'>城市编码</view><view class='row bg'>{{cityCode}}</view><view class='row'>邮政编码</view><view class='row'>{{postCode}}</view></view>
</view>

index.wxss实现

界面样式实现

/* pages/index/index.wxss */
.tel {width: 70%;margin: 0 auto;font-size: 30rpx;
}
.tel view {margin: 15rpx 0;
}
.input input {border: 1rpx solid #eee;background-color: #eee;padding: 18rpx;border-radius: 8rpx;color: #666;
}
.button button {background-color: #0080ff;color: white;
}
.info text {color: #999;font-size: 24rpx;
}
.result_caption text {color: #0080ff;
}
.result {display: flex;flex-wrap: wrap;color: #666;border: 1rpx solid #999;
}
.result .row {flex-basis: 50%;box-sizing: border-box;margin: 0;padding: 10rpx;
}
.result .bg {background-color: #eee;
}

index.js实现

业务实现如下

// pages/index/index.js
const util = require('../../utils/util.js');
Page({/*** 页面的初始数据*/data: {//APPIDappid: '上述API申请的ID',//密钥sign: '上述API申请的签名',//当前查询的时间timesTamp : util.formatTime(new Date()),//手机号码number : '',//默认隐藏hidden:true,//省份prov: '',//城市city: '',//卡类型name: '',//判断ret_code: '',},//输入手机号bindInput : function (e) {//查询得到手机号this.setData({number : e.detail.value});},//查询号码bindSearch : function (e) {var that = this;//请求wx.request({url: 'https://route.showapi.com/6-1?num=' + that.data.number + '&showapi_appid=' + that.data.appid + '&showapi_timestamp=' + that.data.timesTamp + '&showapi_sign=' + that.data.sign,success : function (e) {//获取归属地数据var result = e.data.showapi_res_body;//判断手机号码是否合法if (result.ret_code == -2) {that.setData({ret_code: '对不起，您查询的号码有误！',hidden : true});} else {that.setData({ret_code: '结果如下：',hidden: false,prov: result.prov,city: result.city,name: result.name,postCode: result.postCode,cityCode: result.cityCode});}}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

我们可以看到通过API调用返回的结果如下

至此我们完成手机归属地的开发内容。