微信小程序之快递查询（完整版）

最新推荐文章于 2024-04-27 06:13:41 发布

Memory沙漏

最新推荐文章于 2024-04-27 06:13:41 发布

阅读量1.2w

点赞数 18

分类专栏：微信小程序

本文链接：https://blog.csdn.net/m0_45329584/article/details/104494815

版权

微信小程序专栏收录该内容

14 篇文章 4 订阅

订阅专栏

一、简介：

点击按钮查看快递信息。我也在网上找了很多快递查询的例子，但是它们都不是很详细。在代码上他们都没错，但是在配置上却缺少了一些东西，导致我们这些白嫖党并没有什么用,对于程序中出现的一些错误无法解决，这样对一些新手并不友好。
这篇文章将为大家详细讲解编程过程。
需求：输入快递单号，点击查询按钮即可查看快递信息
api：快递物流查询API接口-支持1000多家快递公司-高实时-高稳定-高并发

二、准备工作：

第一步百度搜索：“快递物流查询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

//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)
      }
    })
  },
})

四、app.js页面解析wx.request请求：

getExpressInfo: function(nu, cb) {
//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)
}
})
},
url: ‘https://ali-deliver.showapi.com/showapi_expInfo?com=auto&nu=’+nu,
对应：
在这里插入图片描述

header: ‘Authorization’: ‘APPCODE 8d71c88894144e798b37278667f2c286’
对应：
在这里插入图片描述

五：添加request 合法域名列表（request 合法域名校验出错）
做完前四个步骤就可以运行了，运行过后会出现以下错误：
在这里插入图片描述
第一步：百度搜索微信公众平台，进入后登陆自己的小程序账号
第二步：点击-开发-在点击-开发设置-最后点击-开始配置-进入

第三步：查看并赋值地址

在这里插入图片描述
第四步：在第二步操作过后的配置界面中写入第三步查看的地址并保存

第五步：查看是否配置成功：

第六步：运行小程序进行快递查询

在这里插入图片描述
注意：1.才配置好如果不行就重启小程序开发工具。
2.查询的时候因为网络原因可以多查询几遍。

Memory沙漏

关注

18
点赞
踩
86

收藏

觉得还不错? 一键收藏
打赏
11
评论
微信小程序之快递查询（完整版）

一、简介：点击按钮查看快递信息。我也在网上找了很多快递查询的例子，但是它们都不是很详细。在代码上他们都没错，但是在配置上却缺少了一些东西，导致我们白嫖并没有什么用,对于一些新手并不友好。这篇文章将为大家详细讲解编程过程。 **需求：输入快递单号，点击查询按钮即可查看快递信息 api：快递物流查询API接口-支持1000多家快递公司-高实时-高稳定-高并发**二、准备工作：第一步百...
复制链接

扫一扫