微信小程序实战—快递查询

微信小程序实战—快递查询案例

需求：输入快递单号，点击查询按钮即可查看快递信息

api：阿里云全国快递物流查询

关键代码:

• 数据定义（index.js）

   data: {
     motto: 'Hello World',
     userInfo: {},
     hasUserInfo: false,
     canIUse: wx.canIUse('button.open-type.getUserInfo'),
     expressNu: null, //订单号
     expressInfo: null //订单信息
   },

• 调用第三方接口获得快递信息（app.js）

 //nu为快递单号
   getExpressInfo: function(nu, cb) {
     wx.request({
       url: 'http://ali-deliver.showapi.com/showapi_expInfo?com=auto&nu=' + nu, 
       data: {
         x: '',
         y: ''
       },
       header: {
         'Authorization': 'APPCODE 自己的appcode'
       },
       success: function(res) {
         //console.log(res.data)
         cb(res.data) //将数据返回
       }
     })
   },

• 事件处理函数（index.js）

 //输入框输入订单号后赋值
 input: function(e) {
     this.setData({
       expressNu: e.detail.value
     })
   },

 //点击查询按钮后获取信息并赋值
  btnClick: function() {
     var thispage = this;
     app.getExpressInfo(this.data.expressNu, function(data) {
       //console.log(data)
       //console.log(data.showapi_res_body.data)
       thispage.setData({
         expressInfo: data.showapi_res_body.data//格式转换*谨记
       })
     });
   },

•  页面设计

<!--index.wxml-->
<view class="container">
  <input placeholder='请输入快递单号' bindinput='input'></input>
  <!-- 按钮绑定点击事件-->
  <button type='primary' bindtap='btnClick'>查询</button>

  <scroll-view scroll-y="true" style='height:300px;'>
    <view wx:for="{{expressInfo}}" wx:key="{{index}}">
      {{item.context}} {{item.time}}
    </view>
  </scroll-view>

</view>

效果图