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