微信小程序实现快递查询功能(附源码)

效果图

项目结构

快递查询API获取

这里我使用的是天行数据API，打开官网，注册或登录你的账号

在首页搜索快递查询

点击快递查询，进入申请接口即可

这里得到的快递接口为http://api.tianapi.com/txapi/kuaidi/index?key=你后台的APIKEY &number=你要查询的快递单号

微信小程序后台配置

记得在你的小程序后台配置好request合法域名

页面代码

这里分为两个page，express提供查询界面，logistics提供物流详情界面
如果你不想下载整个项目，你可以将下面代码复制或者替换到你的项目里，另外的图片素材下载

express页面代码

.wxml

<view class="search"><input type="text" bindblur="listener" bindinput="listener" placeholder="请输入快递单号" value="{{num}}"/><image mode="widthFix" bindtap="sweep" src="/images/icon_sweep.png"></image></view>
<view bindtap="submit" class="bt_submit">查询</view>

.wxss

page{background-color: #f6f6f6;
}
.search{margin: 132rpx 32rpx 32rpx 32rpx;background-color: white;border-radius: 18rpx;box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.15);display: flex;justify-content: space-between;align-content: center;align-items: center;
}.search input{width: 100%;display: inline-block;padding: 32rpx 48rpx;
}
.search image{margin-right: 32rpx;display: inline-block;width: 60rpx;
}
.close{display: inline-block;margin-right: 18rpx;
}
.bt_submit{text-align: center;padding: 18rpx 0;width: 686rpx;margin: 64rpx 32rpx;color: white;background-color: #58ACFA;border-radius: 12rpx;box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.15);
}

.js

var exNum = '';
Page({/*** 页面的初始数据*/data: {num: null},/*** 扫码*/sweep() {var that = thiswx.scanCode({success(res) {var num = res.resultconsole.log(res)that.setData({num: num})exNum = num}})},/*** 监听输入*/listener(e) {var num = e.detail.valueexNum = num},/*** 提交单号*/submit() {//console.log(exNum)if (exNum.length < 5) {wx.showModal({title: '提示',content: '请检查快递单号是否输入正确',showCancel: false})} else {wx.showLoading({title: '查询中',})wx.request({url: 'https://api.tianapi.com/txapi/kuaidi/index?key=你后台的APIKEY&number=' + exNum,complete: function() {wx.hideLoading()},success: function(result) {if (result.data.msg == "数据返回为空") {wx.showModal({title: '查询失败',content: '查询快递信息失败',showCancel: false})} else if (result.data.msg == "success") {console.log(result)var list = result.data.newslist[0]list.num = exNumwx.navigateTo({url: '/pages/logistics/logistics?list=' + JSON.stringify(list)})} else {wx.showModal({title: '查询失败',content: '未知错误',showCancel: false})}}})}},/*** 用户点击右上角分享*/onShareAppMessage: function() {}
})

.json

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

logistics页面代码

.wxml

<view class="logistics-container"><view class="logistics-info"><view class="logistics-info-title"><image src="https://moyv.top/wechat/images/express/京东快递.png" mode="widthFix"></image><view class="logistics-name">{{list.kuaidiname}}</view><view class="logistics-num">{{list.num}}</view><view class="line"></view><view class="logistics-status">{{status[list.status]}}</view></view><view class="logistics-box"><view class="logistics-item" wx:for="{{list.list}}" wx:key="index"><view class="logistics-item-left"><view class="line-box"><view class="top-line "></view><view class="bottom-line "></view></view><view class="center-circle"></view></view><view class="logistics-item-right "><view class="logistics-item-text">{{item.content}}</view><view class="logistics-item-time">{{item.time}}</view></view></view></view></view>
</view>

.wxss

page{background-color: #f2f2f2;
}
.logistics-container {width: 100%;height: 100vh;box-sizing: border-box;background-color: #f2f2f2;
}.logistics-info {background-color: white;width: 686rpx;margin: 32rpx;padding: 0 32rpx;box-sizing: border-box;border-radius: 18rpx;box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.15);
}.logistics-info-title {text-align: center;padding: 32rpx 0;box-sizing: border-box;
}
.logistics-info-title image{width: 120rpx;
}
.logistics-name{display: block;font-weight: bold;font-size: 40rpx;
}
.logistics-num{color: gray;font-size: 30rpx;margin-bottom: 32rpx;
}
.line{width: 100%;border-top: 1rpx dashed  gray ;
}
.logistics-status{color: #58ACFA;margin: 18rpx 0 0 0 ;font-weight: bold;
}
.logistics-box {}.logistics-item {width: 100%;display: flex;
}.logistics-item-left {position: relative;width: 60rpx;
}.line-box {width: 100%;height: 100%;display: flex;flex-direction: column;padding-left: 29rpx;
}.bg-gray {background-color: #ccc;
}.top-line {width: 3rpx;height: 80rpx;background-color: gainsboro;
}.bottom-line {flex: 1;width: 1px;background-color: gainsboro;
}.map-icon {position: absolute;top: 30rpx;left: 9rpx;width: 40rpx;height: 40rpx;
}.center-circle {position: absolute;top: 80rpx;left: 22rpx;width: 18rpx;height: 18rpx;border-radius: 50%;background-color: #ccc;
}.logistics-item-right {flex: 1;padding: 32rpx 0 32rpx 18rpx;box-sizing: border-box;
}.border-bottom {border-bottom: 1px solid #f2f2f2;
}.color-gray {color: #ccc;
}.logistics-item-text {font-size: 30rpx;margin-bottom: 10rpx;
}.logistics-item-time {font-size: 24rpx;color: gray;
}.logistics-no-info {padding: 40rpx 0;box-sizing: border-box;text-align: center;color: #ccc;
}
.logistics-item:nth-child(1) .center-circle{left: 10rpx;border: 10rpx solid #A9E2F3;background-color: #58ACFA;
}
.logistics-item:nth-child(1) .top-line{background-color: white;
}
.logistics-item:nth-last-child(1) .bottom-line{background-color: white;
}
.logistics-item:nth-child(1) .logistics-item-text{color: #027aff;
}

.js

Page({/*** 页面的初始数据*/data: {status: ["查询异常", "暂无记录", "在途中", "派送中", "已签收", "用户拒签", "疑难件", "无效单", "超时单", "签收失败","退回"],list: {}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var list = JSON.parse(options.list)this.setData({list: list})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {}
})

.json

{"usingComponents": {},"navigationBarTitleText": "物流信息"
}

注意问题（使用必看）

登录你的天行数据官网，进入控制台，复制你的apikey

然后在小程序项目的express.js中替换你刚刚复制的apikey

留言

如果有什么不懂或者有BUG，请在评论区留言或者加我qq1354760865，我会在第一时间回复！！！

目前正在学习前端欢迎关注，一起学习！！！
欢迎访问我的小程序

微信小程序实现快递查询功能(附源码)相关推荐

springboot基于微信小程序的选课系统毕业设计-附源码060000
目录摘要 1 1 绪论 1 1.1研究背景 1 1.2开发意义 1 1.3系统开发技术的特色 1 1.4论文结构与章节安排 1 2选课系统小程序系统分析 3 2.1 可行性分析 3 2.2 系统流 ...
微信小程序实现购物商城（附源码）
2018年本人做了一个淘宝购物返利的微信公众号,截至目前已运营了近5年的时间,也陆续积累了不少粉丝.近日,有部分用户反馈是否可以在公众号上展示促销商品列表,而且要具备搜索功能.为感谢粉丝朋友们的长期支 ...
小程序源码免费html5,微信小程序静态页面案例（附源码）
微信小程序出来有段时间了,最近抽空写了个静态案例练练手.由于没有公测名额,无法测试,没有接口,所以先这样吧. 首先上图,整个app的演示是这样的: 图一一.微信小程序和html5标签的区别: 二.w ...
微信小程序推送模板教程附源码
无聊的时候玩一下小功能踩踩坑首先模板推送需要准备一些材料准备材料:1)公众号|小程序,添加选择的模板消息,2)在设置>开发设置页面,开通消息模板功能:如: 如果还没模板素材的请新建一 ...
微信小程序自定义车牌号输入键盘-附源码
键盘已做过处理第一位只能是省份简称,第二位只能输入字母,第三位以后可以输入数字加字母的组合,输入完成后有正则方法校验车牌号的合法性.高效率车牌号输入键盘,大大提升用户体验,增强用户输入车牌号的真实性 ...
微信小程序实战—快递查询
微信小程序实战-快递查询案例需求:输入快递单号,点击查询按钮即可查看快递信息 api:阿里云全国快递物流查询关键代码: 数据定义(index.js) data: {motto: 'Hello Wo ...
校园跑腿微信小程序跑腿同学带直播新版源码
校园跑腿微信小程序跑腿同学带直播新版源码适用类型微信小程序测试环境:系统环境:CentOS Linux 7.6.1810 (Core).运行环境:宝塔 Linux v7.0.3(专业版).网站环 ...
微信小程序之快递查询（完整版）
一.简介: 点击按钮查看快递信息.我也在网上找了很多快递查询的例子,但是它们都不是很详细.在代码上他们都没错,但是在配置上却缺少了一些东西,导致我们这些白嫖党并没有什么用,对于程序中出现的一些错误无法 ...
基于微信小程序的加油服务系统毕业设计源码
目录一.程序介绍: 三.文档目录: 四.运行截图: 五.数据库表: 六.代码展示: 七.更多学习目录: 八.互动留言一.程序介绍: 文档:开发技术文档.参考LW.答辩PPT,部分项目另有其他文档 ...