好久没来更新了，今天正好有时间发发之前给做电商朋友做的一个电商的小程序，正好把关于快递查询的部分单独拿出来分享一下，后续有时间会继续更新整个电商小程序。下面来看快递查询的部分吧。

小程序效果演示(咳~~植入了点广告)

准备工作：

第一步百度搜索：“快递物流查询API接口-支持1000多家快递公司-高实时-高稳定-高并发”（也可以百度：阿里云官网–进入后搜索：快递查询–会出现很多api选合适的就行）
第二步：注册或登陆阿里云账号
第三步：购买套餐（不会花钱的这个可以放心，亲自体验）

第四步：点击去调试

第五步：准备一个真是的快递单号

第六步：com栏输入aotu表示所有快递公司
nu栏输入你自己准备的快递单号
调试信息和图中差不多表示调试成功

代码

index.wxml:

<!--index.wxml-->
<view class="box-input">
  <input placeholder="请输入要查询的快递单号" bindinput='input'/>
  <view class="button" type="primary"   bindtap="btnClick"> 查询 </view>
</view>
<scroll-view scroll-y="true" class="scroll-view"  wx:if="{{show}}">
<view>
  <view class='topExpress'>
    <view class='topExpress-left'>
      <image src='{{express[0].logo}}' style='width:80rpx;height:80rpx;border-radius:50%;'></image>
    </view>
    <view class='topExpress-right'>
      <view class='topExpress-right-top'>{{express[0].expTextName}}</view>
      <view class='topExpress-right-middle'>运单号：{{express[0].mailNo}}</view>
      <view class='topExpress-right-bottom'>官方电话:{{express[0].tel}}</view>
    </view>
  </view>
  <view class='express-container'>
    <view class='express-item' wx:for="{{TimeContext}}" wx:key="index">
      <view class='express-left-date'>
        <view>{{TimeContext[index].time}}</view>
      </view>
      <!-- 左边子容器 -->
      <view class='express-middle-axis'>
        <!-- 正在进行的时间轴上半个时间线 -->
        <view class='online-top-closing' wx:if="{{index!=0}}"></view>
        <!-- 正在进行的时间轴点 -->
        <view class='dot-closing'></view>
        <!-- 正在进行的时间轴下半个时间线 -->
        <view class='online-bottom'></view>
        <!-- 显示尾部的圆点 -->
        <view class='dot-closing' wx:if="{{index==list.length - 1}}"></view>
      </view>
      <!-- 右边子容器 -->
      <view class='express-right'>
        <view class='express-statusing' wx:if="{{index==0}}">运输中</view>
        <view class='express-status-address'>{{TimeContext[index].context}}</view>
      </view>
    </view>
  </view>
</view>
</scroll-view>

index.wxss:

/**index.wxss**/
page {
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.box-input{
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}
input{
  border: 1px solid black;
  width: 65%;
  border-radius: 20rpx;
  font-size: 40rpx;
  height: 60rpx;
}
 
.button{
 width: 150rpx;
 background-color: rgb(42, 240, 91);
 height: 60rpx;
 border-radius: 20rpx;
 line-height: 60rpx;
 text-align: center;
}
 
.scroll-view{
  height: 90vh;
}
page {
  font-size: 0.8rem;
  height: 100vh;
  overflow: hidden;
}
 
 
.topExpress {
  width: 95%;
  height: 180rpx;
  background: white;
  margin-top: 200rpx;
  margin: 10rpx auto;
  display: flex;
  border-radius: 5px;
}
 
.topExpress-left {
  width: 100rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.topExpress-right {
  color: #333;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: flex-start;
  padding: 20rpx 5rpx;
}
 
.topExpress-right-middle {
  font-size: 0.8rem;
}
 
.topExpress-right-bottom {
  color: #666;
}
 
.express-container {
  width: 95%;
  margin: 10rpx auto;
  background: white;
  border-radius: 5px;
  padding: 10rpx 0;
 
}
 
.express-item {
  display: flex;
  width: 100%;
  justify-content: start;
}
 
.express-middle-axis {
  display: flex;
  width: 48rpx;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
.express-left-date {
  display: flex;
  width: 300rpx;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
 
.online-top-closing {
  width: 1px;
  height: 80rpx;
  background: #d7d7d7;
}
 
.dot-closing {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  margin-top: 6rpx;
  margin-bottom: 6rpx;
  background: skyblue;
}
 
.dot-shou {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background: #999;
  font-size: 18rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.online-bottom {
  width: 1px;
  height: 80rpx;
  background: #999;
}
 
.express-right {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  margin: 0 20rpx;
  justify-content: center;
  width: 70%;
  border-bottom: 1rpx solid black;
}

index.js:

//index.js
const app = getApp()
 
Page({
  data: {
    OrderNo:'',
    express:[],
    TimeContext:[],
    show:false
  },
  btnClick: function (options) {
    var that = this;
    app.getExpressInfo(that.data.OrderNo, function(data) {
      console.log(data.showapi_res_body.data)
      var logo="express[0].logo"
      var expTextName="express[0].expTextName"
      var mailNo="express[0].mailNo"
      var tel="express[0].tel"
      that.setData({
        express: data.showapi_res_body.data,//格式转换*谨记
        [logo]:data.showapi_res_body.logo,
        [expTextName]:data.showapi_res_body.expTextName,
        [mailNo]:data.showapi_res_body.mailNo,
        [tel]:data.showapi_res_body.tel,
        TimeContext:data.showapi_res_body.data,
        show:true
      })
      console.log(that.data.express[0].time)
    });
  },
  onLoad: function() {
   
  },
  //输入框输入订单号后赋值
  input: function(e) {
    console.log(e.detail.value)
    this.setData({
      OrderNo: e.detail.value
    })
},
 
 
})

app.js 这边要对应申请接口的url值和Authorization值

//app.js
App({
  onLaunch: function () {
    
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        // env: 'my-env-id',
        traceUser: true,
      })
    }
 
    this.globalData = {}
  },
  getExpressInfo: function(nu, cb) {
    wx.request({
      url: 'https://ali-deliver.showapi.com/showapi_expInfo?com=auto&nu='+nu,
      data: {
        
      },
      header: {
        'Authorization': 'APPCODE 8d71c88894144e798b37278667f2c286'
      },
      success: function(res) {
        console.log(res.data)
        cb(res.data)
      }
    })
  },
})