微信小程序新手教程手机归属地查询实例

　　微信小程序新手教程手机归属地查询实例，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧

　　读万卷书 不如行一里路， 上手才是王道

　　先上图

　　代码解析

　　很简单， 一个js就能搞定。

　　1、 显示页面

　　// 输入框

　　// 查询按钮(bindtap点击事件， 相当于onclick)

　　查询

　　// 结果显示

　　{{message}}

　　2、 控制代码 js

　　// 监听手机号输入

　　listenPhoneInput: function(e) {

　　this.data.phoneNumber = e.detail.value

　　},

　　// 查询手机号归属地

　　queryHome4Phone: function() {

　　var page = this

　　console.log("手机号是"+ this.data.phoneNumber)

　　// 网络请求

　　wx.request({

　　url: 'http://apis.juhe.cn/mobile/get', // 接口地址

　　data: { // 参数

　　phone: this.data.phoneNumber,

　　key: '自己申请key(用的聚合数据)'

　　},

　　header: {

　　'Content-Type': 'application/json',

　　},

　　success: function(res) { // 成功回调函数

　　var result = res.data

　　console.log(res.data)

　　if(result.error_code == 201101) {

　　page.setData({

　　message: '手机号不能为空'

　　})

　　} else if(result.error_code == 201102) {

　　page.setData({

　　message: '错误的手机号码'

　　})

　　} else if(result.error_code == 201103) {

　　page.setData({

　　message: '查询无结果'

　　})

　　} else {

　　page.setData({ // 组合结果

　　message: result.result.province + " " + result.result.city + " " + result.result.company

　　})

　　}

　　}

　　})

　　},

　　至此， 手机号归属地就OK了。