前端pc和小程序接入快递100(跳转方式和api方式)====实时查询接口

跳转方式

没有任何开发成本,直接一键接入

可以直接看官方文档

https://www.kuaidi100.com/openapi/api_wxmp.shtml

微信小程序(我以uniapp为例)

https://fuwu.weixin.qq.com/service/detail/00008caeab84c07c17dcdabf55b815

  1. 小程序管理后台添加插件(【设置】-【第三方设置】-【插件管理】-【搜索 wx6885acbedba59c14】)
    在这里插入图片描述

  2. manifest.json增加配置(这里直接copy不用改动)

    "mp-weixin": {
      "plugins": {
        "kdPlugin": {
          "version": "1.1.2",
          "provider": "wx6885acbedba59c14"
        }
      }
    }
    
  3. 调用插件

    // num是快递单号 appName是小程序的名称 还有其他参数参见官网
    
    uni.navigateTo({
      url: "plugin://kdPlugin/index?num=xxx&appName=xxx",
    })
    
    <navigator url="plugin://kdPlugin/index?num=xxx&appName=xxx"></navigator>
    

缺点:

  1. 默认页面只有最新的一条数据,如果要查看更多需要跳转到他们的小程序
  2. 跳转到他们的小程序默认有几秒钟的广告(虽然可以跳过)

pc

https://www.kuaidi100.com/openapi/api_jump.shtml

window.open('https://www.kuaidi100.com/chaxun?com=[]&nu=[]');

缺点:经我测试查询有问题

  1. 有时候能出结果,但有时候查不出结果
  2. 查询很慢,需要3-7秒左右

我猜测这个应该是官方做了限制,避免被白嫖

api接入

说明

这种方式需要服务端接入,而不是前端直接接入(postman可以调通,但是浏览器会有跨域问题

关于签名计算

官方写的很简单:签名, 用于验证身份, 按param + key + customer 的顺序进行MD5加密(注意加密后字符串一定要转32位大写), 不需要加上“+”号

我最后是通过管理后台的签名和我自己写的签名算法对比才得出最终的计算方式

有几点需要注意的

  1. 请求头的content-typeapplication/x-www-form-urlencoded
  2. 虽然请求方式是post,但是参数写到bodyurl中都是可以的
  3. !!!尤其需要注意param参数的写法,是一个对象,开始的时候我一直在考虑这个怎么传递,因为不是json写法,所以纠结了好久

这里直接给出demo(注意:这里需要安装一个md5加密库

import axios from 'axios';
import CryptoJS from 'crypto-js';

function generateSignature(param, key, customer) {
  // 如果param是对象,则将其转换为字符串
  let paramStr = '';
  if (typeof param === 'object') {
    paramStr = JSON.stringify(param);
  } else {
    paramStr = param;
  }
  // 拼接字符串
  const data = paramStr + key + customer;

  // 进行MD5加密
  const hash = CryptoJS.MD5(data);

  // 将加密后的字符串转为32位大写
  const signature = hash.toString(CryptoJS.enc.Hex).toUpperCase();

  return signature;
}

const key = 'xxx';
const customer = 'xxx';

/* data示例:
{
  com:'yuantong',
  num: 'YT8979806571449',
}
*/
export function query(data) {
  return axios.post(
    'https://poll.kuaidi100.com/poll/query.do',
    {
      param: data,
      sign: generateSignature(data, key, customer),
      customer,
    },
    {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    }
  );
}

成功示例

在这里插入图片描述

相关推荐

  1. 微信程序方式及问题

    2024-07-17 08:22:03       63 阅读
  2. 微信程序中路由方式

    2024-07-17 08:22:03       38 阅读
  3. 微信程序常见页面方式

    2024-07-17 08:22:03       34 阅读
  4. 微信程序-路由页面API

    2024-07-17 08:22:03       29 阅读
  5. 程序中用于页面的5个api是什么区别

    2024-07-17 08:22:03       23 阅读
  6. react传参两种方式

    2024-07-17 08:22:03       53 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-17 08:22:03       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-17 08:22:03       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-17 08:22:03       58 阅读
  4. Python语言-面向对象

    2024-07-17 08:22:03       69 阅读

热门阅读

  1. Oracle(5)什么是控制文件(Control File)?

    2024-07-17 08:22:03       24 阅读
  2. redux执行流程

    2024-07-17 08:22:03       27 阅读
  3. 网络安全----web安全防范

    2024-07-17 08:22:03       22 阅读
  4. R语言学习笔记9-数据过滤-分组-融合

    2024-07-17 08:22:03       23 阅读
  5. 实战:Spring Boot与Apache CXF构建企业级服务SOAP

    2024-07-17 08:22:03       25 阅读
  6. Transformer中Decoder的计算过程及各部分维度变化

    2024-07-17 08:22:03       26 阅读
  7. Docker

    2024-07-17 08:22:03       25 阅读
  8. ODrive学习笔记四——编码器流

    2024-07-17 08:22:03       32 阅读