微信小程序之快递查询

实现原理:调用接口将获取的数据展示在界面上。
实现难点:{获取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);
    //这里使用回调函数将数据当做参数传回indexjs(我把indexjs做视图数据渲染层控制)
    cb(res.data);
  }
})

  }

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);



  })

  },

}

实现总结:
通过这次小项目的实践,遇到了一个问题就是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

同时APPjs也是一个对象
但是他是global对象

e {globalData: Object}
getUserInfo
:
()
getkuaidi
:
()
globalData
:
Object
onHide
:
()
onLaunch
:
()
onShow
:
()
onUnlaunch
:
()
__proto__
:
Object
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值