01-2025年最新小程序快递查询案例：一键查询快递，物流信息实时追踪！

本文链接：https://blog.csdn.net/chinayun_6401/article/details/147252414

获取快递查询API接口

步骤：

第一步：登录api官网。

第二步：搜索“快递查询”，如下图所示：

第三步：选择产品，如下图所示：

快递查询API接口分析

请求地址：http,https://kuaidi100.api.bdymkt.com/poll/channelquery.do

请求类型：POST

请求参数（header）

名称	类型	默认值
Content-Type	string	application/x-www-form-urlencoded
X-Bce-Signature	string	AppCode/您的AppCode

请求参数（body）

名称

类型

是否必须

示例值

param

string

是

{

"num":"快递单号",

"order":"desc"

}

参数说明：

num：查询的快递单号，单号的最大长度是 32个字符，

order：返回结果排序方式，desc表示降序（默认），asc表示升序。

使用指南获取方式：在所选产品的 “使用指南” 处，点击即可下载文件，如下图所示：

文件目录结构

小程序目录结构如下：

project-root/
├── app.js
├── app.json
├── project.config.json
├── sitemap.json
└── pages/
    └── index/
        ├── index.js
        ├── index.wxml
        ├── index.json
        └── index.wxss

示例代码

app.js

App({
  //代码
})

app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#07c160",
    "navigationBarTextStyle": "white"
  }
}

sitemap.json

{
  "desc": "前端基地",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}

project.config.json

{
  "description": "前端基地开发系列教程之“快递查询案例”",
  "packOptions": {
    "ignore": [
      {
        "value": "test/**",
        "type": "folder"
      },
      {
        "value": "*.log",
        "type": "file"
      }
    ],
    "include": []
  },
  "setting": {
    "urlCheck": true,
    "es6": true,
    "enhance": true,
    "postcss": true,
    "preloadBackgroundData": false,
    "minified": true,
    "newFeature": false,
    "coverView": true,
    "nodeModules": false,
    "autoAudits": false,
    "showShadowRootInWxmlPanel": true,
    "scopeDataCheck": false,
    "uglifyFileName": false,
    "checkInvalidKey": true,
    "checkSiteMap": true,
    "uploadWithSourceMap": true,
    "compileHotReLoad": false,
    "lazyloadPlaceholderEnable": false,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": false,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "enableEngineNative": false,
    "useIsolateContext": true,
    "userConfirmedBundleSwitch": false,
    "packNpmManually": false,
    "packNpmRelationList": [],
    "minifyWXSS": true,
    "disableUseStrict": false,
    "showES6CompileOption": false,
    "useCompilerPlugins": false,
    "minifyWXML": true
  },
  "compileType": "miniprogram",
  "libVersion": "3.5.8",
  "appid": "touristappid",
  "projectname": "qianduanjidi",
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  },
  "condition": {}
}

index.json

{
  "navigationBarTitleText": "快递查询"
}

index.wxss

 .search,.list{
  padding:0.5rem;
}
.search .ipt{
  height:3rem;
  line-height:3rem;
  border:0.0625rem solid #ccc;
  margin-bottom:0.5rem;
  padding-left:0.75rem;
}
.list_t{
  color:#333;
  font-size:1rem;
  font-weight:bold;
}
.list_c .time{
  font-size: 0.75rem;
  color:#9195a3;
}
.list_c .context{
  font-size:0.875rem;
  color:#666;
}

index.wxml

<view class="search">
  <input type="text"  placeholder="请输入快递单号"  class="ipt" bindinput="inputVal"/>
  <button type="primary" bindtap="onTap">查询</button>
</view>
<view class="list">
  <view class="list_t">{{expressName}}</view>
  <view class="list_c">
     <block wx:for="{{logisticsList}}" wx:key="item">
      <view class="time">{{item.time}}</view>
      <view class="context">{{item.context}}</view>
     </block>
  </view>
</view>

说明：页面布局使用了 <view>、<input> 和 <button> 等组件。用户输入快递单号后，点击“查询”按钮，触发onTap方法，获取并显示物流信息。

index.js

Page({
  data:{
    iptVal:null,
    expressName:'',
    logisticsList:null
  },
  inputVal(event){
     this.setData({
       iptVal:event.detail.value
     })
  },
  onTap(){
    // 显示加载框
    wx.showLoading({
      title: '加载中...', // 加载框标题
    });
    let _this=this;
    let headers = {
      "Content-Type": "application/x-www-form-urlencoded",
      "X-Bce-Signature": "AppCode/你的AppCode",  
    }
    let baseUrl = 'http://kuaidi100.api.bdymkt.com/poll/channelquery.do'; 
    let param={
      num:this.data.iptVal,
    }
    // 将 param 对象转换为 JSON 字符串并编码
    let paramString = JSON.stringify(param);
    let encodedParam = encodeURIComponent(paramString);
    // 拼接完整的 URL
    let url = `${baseUrl}?param=${encodedParam}&`;
    wx.request({
      url: url,
      method:'POST',
      header:headers,
      success(res){
        // 清空值
        _this.setData({
          expressName:'',
          logisticsList:null
        });
        console.log(res)
        if(res.data.message==='ok'){
          // 隐藏加载框
          wx.hideLoading();
          let expressName='物流追踪';
          let logisticsList=res.data.data;
          _this.setData({
            expressName,
            logisticsList
          })
        }else{
          // 隐藏加载框
          wx.hideLoading();
          wx.showModal({
            title:res.data.message
          });
        }
      },
      fail(err){
        console.log(err);
        // 隐藏加载框
        wx.hideLoading();
      }
    })
  }
})

说明：

Page构造函数：每个小程序页面都需要一个对应的Page构造函数，用于定义页面的逻辑和数据。

data数据对象：data 是页面的数据对象，包含属性：iptVal：存储用户输入的快递单号。expressName：存储查询到的快递公司名称。logisticsList：存储查询到的物流信息列表。

inputVal方法：监听输入框的内容变化事件。当用户输入内容时，将输入的值更新到iptVal中。

onTap方法：监听“查询”按钮的点击事件。当用户点击“查询”按钮时，执行操作：显示加载框，提示用户正在加载数据。构建请求参数，包括快递单号。发起POST请求，调用快递查询 API。处理请求的成功和失败情况：如果请求成功，更新页面数据，显示快递公司名称和物流信息。

运行结果，截图如下：

当输入的快递单号不符合要求时，控制台运行结果，截图如下：