小程序开发中的物流跟踪与查询功能实现 分类:公司动态 发布时间:2025-08-12

在电商时代,物流跟踪与查询功能已成为小程序开发中不可或缺的一部分。微信小程序作为一种轻量级应用,广泛应用于在线购物、订单管理等领域。用户可以通过小程序实时查询快递状态、查看物流轨迹,从而提升购物体验并减少客服咨询量。根据微信官方数据,小程序电商交易额持续增长,物流功能直接影响用户留存率。本文将详细介绍微信小程序中物流跟踪与查询功能的实现方式,包括官方插件、第三方插件和自定义API集成,帮助开发者快速上手。
 
一、实现方式概述
 
微信小程序的物流功能主要有三种实现路径:
1. 官方插件:微信提供的“物流查询组件”,集成简单,支持状态变更通知,但需满足接入条件。
2. 第三方插件:如快递100(Kuaidi100)插件,免费接入,支持多家快递公司,适合快速开发。
3. 自定义API集成:使用第三方物流API(如快递鸟或快递100的API),灵活性高,可自定义UI,但需处理后端逻辑。
 
选择方式取决于项目需求:插件适合标准化场景,自定义适合复杂定制。以下逐一详解。
 
二、使用微信官方物流查询插件
 
微信官方的“物流查询组件”允许小程序展示订单物流信息,并在状态变更时推送消息通知。该组件由微信提供,稳定性高,但需申请权限。
 
1. 接入条件
(1)小程序已开通微信支付。
(2)过去30天内有交易记录。
(3)通过小程序管理后台(MP)申请“查询组件”权限:登录后台 > 功能 > 物流服务 > 申请查询组件。
(4)调用频率限制:每个appid每日最多10万次调用,每用户每日最多100次。
(5)合规要求:仅查询小程序内生成的购物订单,并向订阅微信快递服务的实际买家发送消息。违规可能导致插件禁用。
 
2. 添加插件
(1)在小程序的 app.json 中声明插件:
 
   {
     "plugins": {
       "logisticsPlugin": {
         "version": "2.1.5",
         "provider": "wx9ad912bf20548d92"
       }
     }
   }
 
3. 后端API集成
官方插件需后端调用微信API获取 waybillToken 。主要接口包括:
(1)跟踪运单接口:POST https://api.weixin.qq.com/cgi-bin/express/delivery/open_msg/trace_waybill?access_token=XXX
a. 参数示例:
 
    {
      "openid": "用户openid",
      "waybill_id": "运单号",
      "sender_phone": "发件人电话",
      "receiver_phone": "收件人电话",
      "delivery_id": "快递公司ID(如KYSY)",
      "goods_info": {
        "detail_list": [
          {
            "goods_name": "商品名",
            "goods_img_url": "商品图URL"
          }
        ]
      }
    }
 
  b. 返回 waybillToken ,用于前端调用。
(2)查询轨迹接口:POST https://api.weixin.qq.com/cgi-bin/express/delivery/open_msg/query_trace?access_token=XXX,使用 waybillToken 获取详情。
(3)获取快递公司列表:POST https://api.weixin.qq.com/cgi-bin/express/delivery/open_msg/get_delivery_list?access_token=XXX。
 
后端需使用 access_token ,可通过微信API获取。
 
4. 前端调用
在页面JS中引入插件并调用 openWaybillTracking :
 
var plugin = requirePlugin("logisticsPlugin");
 
Page({
  data: {
    waybillToken: '' // 从后端获取
  },
  searchDetail: function() {
    const { waybillToken } = this.data;
    plugin.openWaybillTracking({
      waybillToken: waybillToken
    });
  }
});
 
测试需在真机预览模式下进行,开发工具无法模拟。
 
三、使用第三方插件(如快递100)
 
快递100插件免费、无门槛,支持多家快递公司查询,常用于电商小程序。插件ID:wx6885acbedba59c14。
 
1. 添加插件
(1)登录小程序管理后台 > 设置 > 第三方设置 > 插件管理 > 添加插件。
(2)搜索appid  wx6885acbedba59c14 ,添加并等待审核通过。
(3)在 app.json 中声明(针对Uniapp或其他框架类似):
 
   {
     "plugins": {
       "kdPlugin": {
         "version": "1.1.2",
         "provider": "wx6885acbedba59c14"
       }
     }
   }
 
2. 置与调用
(1)通过页面跳转调用插件:
 
  uni.navigateTo({
    url: `plugin://kdPlugin/index?num=${物流单号}&appName=${小程序名称}`
  });
 
(2)或使用 <navigator> 组件:
 
  <navigator url="plugin://kdPlugin/index?num=xxx&appName=xxx"></navigator>
 
(3)参数说明(表格):
 
参数名 说明 类型 是否必填
num 物流单号 string 是
appName 调用小程序名称 string 是
com 快递公司代码(如shunfeng) string 否
mobile 手机号后四位(某些公司需要验证) number 否
title 页面标题(默认“物流信息”) string 否
rss 是否显示订阅(0隐藏,默认1) number 否
return 是否显示退换货按钮(0隐藏,默认显示) number 否
name 收件人姓名 string 否
phone 收件人电话 string 否
address 收件人地址 string 否
backgroundColor 导航栏背景色(十六进制) string 否
 
常见快递公司代码:
 
公司名称 代码
顺丰 shunfeng
EMS ems
申通 shentong
中通 zhongtong
圆通 yuantong
韵达 yunda
京东 jd
 
首次运行需安装插件。
 
四、自定义API集成
 
若插件不满足需求,可集成第三方API如快递鸟(KDniao)或快递100 API。
 
步骤
1. 注册API:在快递鸟官网注册,获取API Key和ID。支持免费查询多家快递。
2. 前端UI:设计输入页面(WXML+WXSS),用户输入单号和公司代码。
示例WXML:
 
     <view>
       <input placeholder="快递单号" bindinput="inputNum" />
       <input placeholder="快递公司代码" bindinput="inputCom" />
       <button bindtap="query">查询</button>
       <view wx:for="{{logs}}" wx:key="index">{{item.time}} - {{item.context}}</view>
     </view>
 
3. 后端查询:使用Node.js或云函数调用API(避免小程序端暴露Key)。
示例云函数(查询接口):
 
     const request = require('request');
     exports.main = async (event) => {
       const { num, com } = event;
       const url = `https://api.kdniao.com/api/dist?num=${num}&com=${com}&key=您的Key`;
       return new Promise((resolve) => {
         request(url, (err, res, body) => {
           resolve(JSON.parse(body));
         });
       });
     };
 
4. 前端显示:调用云函数,解析返回数据展示轨迹。
 
   Page({
     data: { logs: [] },
     query: function() {
       wx.cloud.callFunction({
         name: 'queryLogistics',
         data: { num: this.data.num, com: this.data.com },
         success: res => {
           this.setData({ logs: res.result.Traces });
         }
       });
     }
   });
 
5. 地图轨迹(可选):集成微信地图API显示位置,使用`wx.createMapContext`绘制轨迹。
 
五、注意事项
 
1. 隐私与安全:遵守微信数据规范,避免泄露用户手机号。使用HTTPS调用API。
2. 性能优化:缓存查询结果,减少API调用。处理无结果场景,提供友好提示。
3. 用户体验:支持订阅通知(官方插件自动),实时推送状态变更。
4. 测试与上线:真机测试插件;上线前审核权限。监控调用频率,避免超限。
5. 兼容性:插件版本更新需同步;自定义API需处理公司代码匹配。
 
微信小程序开发的物流跟踪与查询功能通过插件或API集成,能显著提升用户满意度。官方插件适合标准化电商,第三方插件快速上手,自定义方式提供灵活性。开发者可根据项目规模选择,结合实际测试优化。
在线咨询
服务项目
获取报价
意见反馈
返回顶部