[解读小程序]手机归属地查询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.