一、前言

我对小程序开发实现物流信息查询功能比较感兴趣。在网上查找了一些相关资料，实现了相关功能。
效果图：
点击选择要查看的物流公司，输入快递单号，点击查询

物流信息：

二、准备工作

使用阿里云 — 快递物流查询API接口

1.购买套餐

登录或注册阿里云，进入
https://market.aliyun.com/products/57126001/cmapi010996.html?spm=5176.2020520132.101.2.fd3b7218w99ZrP#sku=yuncode499600008链接，
购买如下套餐：

2. 快递物流节点跟踪 API接口的调试使用

点击“去调试”，进入接口调式页面：

三、小程序代码实现

1. wxml 代码

<!--pages/wechat-logistics/wechat-logistics.wxml-->
<view class="main" wx:if="{{!isShow}}"><view class="section"><picker mode="selector" value="{{index}}" range="{{expNames}}" bindchange="bindPickerChange"><view class="picker">物流公司：{{expNames[index]}}</view></picker></view><input type="text" class="text" value="" placeholder="请输入快递单号" bindblur="bindblurInput"/><button type="primary" class="btn" bindtap = "search">查询</button>
</view>
<view class="main" wx:else><view class="title">物流信息</view><!--direction ：设置显示方向，可选值为 horizontal、vertical；默认horizontal--><view class="item"><van-steps steps="{{steps}}" direction="vertical"  active="{{active}}"></van-steps></view>
</view>

2. js 代码实现

// pages/wechat-logistics/wechat-logistics.js
Page({/*** 页面的初始数据*/data: {orderNumber: "",//快递单号expNames:["申通","顺丰","圆通","中通","韵达","天天","京东","EMS","宅急送","百世","四通一达"],//物流公司expAbbrs:["shentong","shunfeng","yuantong","zhongtong","yunda","tiantian","jingdong","ems","zhaijisong","baishi","sitongyida"],index: 0,expAbbr:"shentong",//当前选中快递公司名称isShow: false, //是否显示物流信息steps:[ //物流信息],active:0,},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面显示*/onShow: function () {},//文本框失去焦点事件bindblurInput: function(e){console.log(e.detail.value)this.data.orderNumber = e.detail.value},//点击城市组件确定事件bindPickerChange: function(e){this.setData({index:e.detail.value})this.data.expAbbr=this.data.expAbbrs[e.detail.value]},//查看快递物流信息search(){if(this.data.orderNumber){this.setData({isShow: true})this.getExpressInfo(this.data.expAbbr,this.data.orderNumber)}else {wx.showToast({title: '请输入快递单号',icon: 'none'})}},/*** 阿里云api接口获取快递物流信息*  com:物流公司字母简称,(如不知道快递公司名，可以使用 auto 代替)*  number:快递单号*/getExpressInfo: function(com,number){let that = thiswx.request({url: 'https://ali-deliver.showapi.com/showapi_expInfo?com='+com+"&nu="+number,data: {},method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: {'Authorization': "APPCODE ec2b8ebb41a442dda9c5902866e442dd"}, // 设置请求的 headersuccess: function(res){// successconsole.log("success",res)let showapi_res_code = res.data.showapi_res_code //showapi平台返回码，0位成功，其他为失败let showapi_res_error = res.data.showapi_res_error///showapi平台返回的错误信息let showapi_res_body = res.data.showapi_res_bodyif(showapi_res_code == 0){let flag = showapi_res_body.flag //物流信息是否获取成功let status = showapi_res_body.status //状态 -1 待查询 0 查询异常 1 暂无记录 2 在途中 3 派送中 4 已签收 5 用户拒签 6 疑难件 7 无效单 8 超时单 9 签收失败 10 退回let data = showapi_res_body.data //具体快递路径信息let steps=[]if(flag){for(var i=0;i<data.length;i++){let obj={text:data[i].context,desc:data[i].time}steps.push(obj)}that.setData({steps:steps,active:0})}else{wx.showToast({title: showapi_res_body.msg,icon: 'none',duration:2000})}}else{//showapi平台返回的错误信息wx.showToast({title: showapi_res_error,icon: 'none',duration:2000})}},fail: function(res) {// failconsole.log("fail",res)}})}
})

3. wxss 代码

/* pages/wechat-logistics/wechat-logistics.wxss */
.main{width: 100%;margin-top: 20rpx;
}
/*物流公司*/
.section{margin-left: 20rpx;height: 60rpx;line-height: 60rpx;
}
.text{font-size: 28rpx;width:90%;margin-left: 20rpx;padding-left: 20rpx;height: 60rpx;border:2rpx solid #cccccc;
}
.btn{margin-top: 20rpx;
}
.title{text-align: center;
}

4.物流信息区采用步骤条的方式显示。我使用第三方插件 Vant Weapp 中的Steps 步骤条来呈现查询出的物流结果。

要想使用 Vant Weapp 的 Steps 插件，需要在对应页面文件的 .json文件中引入：

{"navigationBarTitleText":"快递物流追踪","usingComponents": {"van-steps":"../../static/vant/steps/index"}
}

注意：
接口传参 com 要按照文档要求：

快递公司如下：
expNames ：物流公司名称，用于物流公司显示；
expAbbrs：物流公司字母简称，用于 https://ali-deliver.showapi.com/showapi_expInfo?com=’+com+"&nu="+number接口传参，查看物流信息

参考资料：https://blog.csdn.net/m0_45329584/article/details/104494815

微信小程序 --- 物流快递查询相关推荐

微信小程序--订单查询页面
微信小程序–订单查询页面包含功能点: 订单查询结构:order.wxml <tabs tabList="{{tabList}}" binditemChange=" ...
基于微信小程序公交查询系统设计与实现
[摘要]随着互联网的技术的不断更新发展,人们生活节奏也在不断的加快,对于网络的依赖也越来越紧密,尤其是在等公交,经常会错过班次,但又不知道,下次班次几点发车,这样会导致乘客花掉大把时间在等待,如果可 ...
微信小程序星座查询
微信小程序星座查询 1.界面布局 1. .xml代码 <image class="anime_bg" src="/images/cartoon_2.jpg&quo ...
微信小程序--火车票查询
写在最前面微信小程序自九月份推出内测资格以来,经历了舆论热潮到现在看似冷清,但并不意味着大家不那么关注或者不关注了.我想不管是否有内测资格,只要是感兴趣的开发者已经进入潜心耕耘产品的阶段了,至少是静 ...
微信小程序火车票查询直取12306数据
最终效果图: 样式丑哭了,我毕竟不是前端,宗旨就是练练手,体验微信小程序的开发,以最直接的方式获取12306数据查询火车票. 目录结构: search1是出发站列表,search2是目的站列表,命名没 ...
基于微信小程序菜谱查询app设计
设计一个基于微信小程菜单查询app,一共有2个身份包括用户和管理员!用户通过微信小程序打开app后可以查询最新上架的菜谱信息,查询和查看菜谱详情信息,收藏自己喜欢的菜谱,发布留言和查看新闻公告!管理员 ...
微信小程序 —— 快递查询Demo（入门）
源码地址及提醒: 1.seach.js中的wx.request所用URL需要用申请所得数据接口替换,数据接口申请地址:https://www.juhe.cn/docs/api/id/43 2.由于使用 ...
微信小程序——快递查询
前言最近在学习微信小程序,一个简单的快递查询小程序却让人头疼不已,不知道用哪个快递查询api,不知道如何传递api参数,不知道事件如何监听··· 现在将过程记录下来,供大家相互参考学习~ 思维导图 ...
微信小程序天气查询功能--使用高德开放平台接口
写在前面: 最近做的一个小程序,加入了获得当前位置天气的功能.比对了网上几个所谓的免费接口,聚合和心知发现免费的有限...500次免费的额度确实不够用,500块一个月的也用不起. 后来,又发现腾讯和高 ...
微信小程序—天气预报查询
前不久用安卓做了个天气预报,麻烦的要死,故想体验一下微信小程序开发(其实没有可比性) 发现了一个免费的天气接口天气接口api 地址:http://wthrcdn.etouch.cn/weather_ ...

微信小程序 --- 物流快递查询

一、前言

二、准备工作

1.购买套餐

2. 快递物流节点跟踪 API接口的调试使用

三、小程序代码实现

3. wxss 代码

4.物流信息区采用步骤条的方式显示。我使用第三方插件 Vant Weapp 中的Steps 步骤条来呈现查询出的物流结果。

微信小程序 --- 物流快递查询相关推荐

最新文章

热门文章

微信小程序 --- 物流快递查询

一、前言

二、准备工作

1.购买套餐

2. 快递物流节点跟踪 API接口 的 调试使用

三、小程序 代码实现

3. wxss 代码

4.物流信息区 采用 步骤条的方式显示。我使用第三方插件 Vant Weapp 中的Steps 步骤条 来呈现 查询出的物流结果。

微信小程序 --- 物流快递查询相关推荐

最新文章

热门文章

2. 快递物流节点跟踪 API接口的调试使用

三、小程序代码实现

4.物流信息区采用步骤条的方式显示。我使用第三方插件 Vant Weapp 中的Steps 步骤条来呈现查询出的物流结果。