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

需求描述

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() + 1
  const 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: {
    //APPID
    appid: '上述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调用返回的结果如下

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