实现原理:调用接口将获取的数据展示在界面上。
实现难点:{获取input框内的值并给将其保存到全局变量}
{编写点击函数btnclick}
{编写接口函数传进input框内的值并且使用回调函数将数据回传给一个全局变量}
实现代码{
index.wxml
<view class="container">
<view class="section__title">你输入的是:{{inputValue}}</view>
//这里的bindinput属性把bindKeyInput函数绑定到了此处
<input placeholder="快递查询" bindinput="bindKeyInput"/>
//此处bindtap="btnclick"。同上
<button type="primary" bindtap="btnclick"> 查询 </button>
<scroll-view scroll-y="true" style="height: 400px;">
//这里应用wx:for绑定一个数组。并通item代名词调用数组内部的属性进行渲染
<view wx:for="{{inputinfo.data}}">
{{item.context}}--{{item.time}}--
</view>
</scroll-view>
</view>
app.js
这里是接口获取函数,我写在了appjs里面
getkuaidi:function(nu,cb){
console.log(this);
wx.request({
url: 'http://apis.baidu.com/kuaidicom/express_api/express_api?com=yuantong&nu='+nu+'&muti=0&order=desc',
data: {
x: '' ,
y: ''
},
header: {
'apikey': '11750027a78cd0cf17749c0460cebf67'
},
success: function(res) {
console.log(res.data);
cb(res.data);
}
})
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
indexjs
//事件处理函数
bindKeyInput: function(e) {
//这里设置全局变量inputValue为e.detail.value当前对象的值
this.setData({
inputValue: e.detail.value
})
console.log(this.data.inputValue)
},
btnclick(){
console.log(this.data.inputValue)
var that=this
console.log(that)
//这里调用app里面的接口函数,并使用回调函数将数据传回indexjs
app.getkuaidi(this.data.inputValue,function(data){
console.log(data)
that.setData({
inputinfo: data
})
console.log(that.data.inputinfo)
})
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
}
实现总结:
通过这次小项目的实践,遇到了一个问题就是indexjs里面的this是一个object,即该indexjs作为一整个对象存在,
e {data: Object}
__route__
:
(...)
get __route__
:
()
set __route__
:
()
__wxWebviewId__
:
(...)
get __wxWebviewId__
:
()
set __wxWebviewId__
:
()
bindKeyInput
:
()
bindViewTap
:
()
btnclick
:
()
data
:
Object
onHide
:
()
onLoad
:
()
onReady
:
()
onRouteEnd
:
()
onShow
:
()
onUnload
:
()
__proto__
:
Object
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
同时APPjs也是一个对象
但是他是global对象
e {globalData: Object}
getUserInfo
:
()
getkuaidi
:
()
globalData
:
Object
onHide
:
()
onLaunch
:
()
onShow
:
()
onUnlaunch
:
()
__proto__
:
Object