微信小应用学习教程之十二—手机号归属地查询 - 拼图Pintuer-跨屏响应式布局前端开发CSS框架

拼图博客

拼图更新进度、开发动态、Bug反馈,问题探讨。


微信小应用学习教程之十二—手机号归属地查询

2016-10-25 绿色的小苹果 学习教程


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

码云地址https://git.oschina.net/GreenLittleApple/wx_xiaochengxu01.git

先上图


代码解析

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


1、 显示页面


<!--index.wxml--> 
<view class="body"> 
// 输入框 
<input type="number" maxlength="11" auto-focus class="phoneInput" bindinput="listenPhoneInput" /> 
// 查询按钮(bindtap点击事件, 相当于onclick) 
<button type="primary" bindtap="queryHome4Phone" class="btnQuery"> 查询 </button> 
// 结果显示 
<text class="result" wx:if="{{province != ''}}"> {{message}} </text> </view>



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了。 如有疑问, 加群(214975625)讨论。 

交流 

拼图微信小程序交流群(214975625)
点击加入群【微信小程序之家


标签: 微信 微信小程序 微信小应用 « 微信小应用学习教程之十四—加入我们 | 微信小应用学习教程之十一—xx.wxml»
发表评论:



blogger

pintuer 拼图响应式前端框架第1作者。