[解读小程序]手机归属地查询Demo(四)

[解读小程序]手机归属地查询Demo(四)

分析的程序来源:
http://blog.csdn.net/y1258429182/article/details/52666290

下载链接：http://pan.baidu.com/s/1o8bElya 密码：b621
解压密码: yangzheshare

查询手机归属地页面 index

index.wxml

<view class="container">
  <view  class="userinfo" wx:if="{{showIcon}}">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    <!--手机号-->
    <view class="section">
        <input placeholder="请输入查询的手机号" bindinput="bindKeyInput" />
    </view>
  </view>
      <button class="btnShow" type="primary" bindtap="btnClick"> {{btnText}} </button>
      <button class="btnQueryPhone" type="primary" bindtap="btnPhone"> {{btnPhone}} </button>
           <view class="body-view">
                <toast hidden="{{toast1Hidden}}" bindchange="toast1Change">{{toasMsg}}</toast>          
            </view>
</view>

其中有一段是微信自己helloworld里面提供的代码

<view  class="userinfo" wx:if="{{showIcon}}">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>

原来是获得登录的微信用户名和头像并显示在组件中的. 目前这一段代码并没有成功执行.所以就没有显示了.
我们关注的是本demo相关的代码.

<input placeholder="请输入查询的手机号" bindinput="bindKeyInput" />

<button class="btnShow" type="primary" bindtap="btnClick"> {{btnText}} </button>

<button class="btnQueryPhone" type="primary" bindtap="btnPhone"> {{btnPhone}} </button>

<toast hidden="{{toast1Hidden}}" bindchange="toast1Change">{{toasMsg}}</toast> 

都是前面讲过的组件. 不过这里button和toast显示的内容是来自逻辑层的数据绑定. 另外input组件有个maxlength属性可以控制输入长度.

index.js

初始化数据

  data: {
    btnText: '隐藏显示头像',
    btnPhone: '查询归属地',
    inputValue: "",
    toast1Hidden: true,
    toasMsg: ""
  },

获取输入框内容

  //输入绑定的方法
  bindKeyInput: function( e ) {
    this.setData( {
      inputValue: e.detail.value
    })
  },

请求网络查询手机号码归属地

  //查询手机归属地的方法
  btnPhone: function() {
    //边界条件判断
    if( this.data.inputValue == "" ) {
      this.setData( {
        toasMsg: "手机号码不能为空",
        toast1Hidden: false
      })
      return;
    }
    console.log(this.data.inputValue)
    //调用网络请求
    app.getDataFromServer( this.data.inputValue, function( result ) {
      console.log(result)
    })
  },

主要是请求网络的方法.

app.getDataFromServer( this.data.inputValue, function( result ) {
      console.log(result);
    })

还记得该应用在app.js中写的那个全局方法吗?

 getDataFromServer(phoneNum,callback) {
    wx.request( {
      url: 'http://apicloud.mob.com/v1/mobile/address/query?key=17113fceca309&phone='+phoneNum,
      data: {
        x: '',
        y: ''
      },
      header: {
        'Content-Type': 'application/json'
      },
      success: function( res ) {
        console.log( "成功"+res.data )
        callback(res.data.result.city)
      },
      fail: function( res ) {
        console.log( "失败"+res.data )
      },
      complete: function( res ) {
        console.log( "完成"+res.data )
      }
    })
  }

首先看为什么是callback(res.data.result.city)? 因为API里面说明了success(res)方法返回的内容为res = {data: ‘开发者服务器返回的内容’}.文档-发起请求
所以res.data就是返回的json对象. 至于后面的 result.city 这个是有json的结构决定的.
很明显,success()只是表示网络请求成功,也就是statusCode/100==2, 而并不是逻辑上的成功或失败. 所以这里的写法是不完善的.
调用请求方式: app.getDataFromServer( this.data.inputValue, function(result){//...}) 这个和Android中的回调匿名内部类对象是一样的.

这个手机归属地查询这个入门级的demo基本上就解读完成了. 其中跳过了很多css样式的阅读. 因为这个东西实在是太无聊了,没学过css, 很多属性都要去查, 好麻烦.

the end.