微信小程序 开发之快递查询功能的实现

<!--index.wxml-->
<view class="container">
  <input placeholder="请输入快递单号" bindinput="input" />
  <button type="primary" bindtap="btnClick"> 查询 </button> 
</view>

/index.wxss/
 input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;}
 button{margin-:20px;}

//设置一个发起网络请求的方法
 getExpressInfo:function(nu,cb){
  wx.request({
   url: 'http://apis.baidu./kuaidi/express_api/express_api?muti=0&order=desc&=zhongtong&nu='+nu, 
   data: {
    x: '' ,
    y: ''
   },
   header: {
     'apikey': '247d486b40d7c8da473a9a794f900508'
   },
   suess: function(res) {
    //console.log(res.data)
    cb(res.data);
   }
  })
 },
 globalData:{
  userInfo:null
 }

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  motto: 'Hello World',
  userInfo: {}, 
  einputinfo:null,//输入框值
  expressInfo:null //快递信息
 },
 //事件处理函数
 bindViewTap: function() {
  wx.navigateTo({
   url: '../todos/todos'
  })
 },
 onLoad: function () {
  console.log('onLoad')
  var that = this
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function(userInfo){
   //更新数据
   that.setData({
    userInfo:userInfo
   })
  })
 },
 //快递输入框事件
 input:function(e){
   this.setData({einputinfo:e.detail.value});
 },
 //查询事件
 btnClick:function(){ 
  var thisexpress=this; 
  app.getExpressInfo(this.data.einputinfo,function(data){
    console.log(data);
    thisexpress.setData({expressInfo:data})
  })
 }
})

<!--index.wxml-->
<view class="container">
  <input placeholder="请输入快递单号" bindinput="input" />
  <button type="primary" bindtap="btnClick"> 查询 </button> 
</view>
<view class="expressinfo" wx:for="{{expressInfo.data}}">
  <ul>
   <li>{{item.context}}</li>
   <li>{{item.time}}</li> 
  </ul> 
</view> 

/index.wxss/
 input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;}
 button{margin-:20px;}
 .expressinfo{font-size:12px; line-height: 18px;padding:10px; text-align:left;} 
 .expressinfo li{display:block}