前端pc和小程序接入快递100(跳转方式和api方式)====实时查询接口
蓝枫秋千 2024-09-05 09:03:01 阅读 59
文章目录
跳转方式微信小程序(我以uniapp为例)pc
api接入说明关于签名计算成功示例
跳转方式
没有任何开发成本,直接一键接入
可以直接看官方文档
https://www.kuaidi100.com/openapi/api_wxmp.shtml
微信小程序(我以uniapp为例)
https://fuwu.weixin.qq.com/service/detail/00008caeab84c07c17dcdabf55b815
小程序管理后台添加插件(【设置】-【第三方设置】-【插件管理】-【搜索 wx6885acbedba59c14】)
<code>manifest.json增加配置(这里直接copy不用改动)
"mp-weixin": { -- -->
"plugins": {
"kdPlugin": {
"version": "1.1.2",
"provider": "wx6885acbedba59c14"
}
}
}
调用插件
// num是快递单号 appName是小程序的名称 还有其他参数参见官网
uni.navigateTo({
url: "plugin://kdPlugin/index?num=xxx&appName=xxx",
})
<navigator url="plugin://kdPlugin/index?num=xxx&appName=xxx"></navigator>code>
缺点:
默认页面只有最新的一条数据,如果要查看更多需要跳转到他们的小程序跳转到他们的小程序默认有几秒钟的广告(虽然可以跳过)
pc
https://www.kuaidi100.com/openapi/api_jump.shtml
window.open('https://www.kuaidi100.com/chaxun?com=[]&nu=[]');
缺点:经我测试查询有问题
有时候能出结果,但有时候查不出结果查询很慢,需要3-7
秒左右
我猜测这个应该是官方做了限制,避免被白嫖
api接入
说明
这种方式需要服务端接入,而不是前端直接接入(postman可以调通,但是浏览器会有跨域问题
)
关于签名计算
官方写的很简单:签名, 用于验证身份, 按param + key + customer 的顺序进行MD5加密(注意加密后字符串一定要转32位大写), 不需要加上“+”号
我最后是通过管理后台
的签名和我自己写的签名算法对比才得出最终的计算方式
有几点需要注意的
请求头的content-type
为application/x-www-form-urlencoded
虽然请求方式是post,但是参数写到body
和url
中都是可以的!!!
尤其需要注意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',
},
}
);
}
成功示例
上一篇: 【一起学Rust | 框架篇 | Tauri2.0框架】在Angular中集成Material Web Components
下一篇: Three.js & WebGPU 节点材质系统 控制instances的某个实例单独的透明度,颜色等属性
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。