好久没来更新了，今天正好有时间发发之前给做电商朋友做的一个电商的小程序，正好把关于快递查询的部分单独拿出来分享一下，后续有时间会继续更新整个电商小程序。下面来看快递查询的部分吧。

小程序效果演示(咳~~植入了点广告)

准备工作：

第一步百度搜索：“快递物流查询API接口-支持1000多家快递公司-高实时-高稳定-高并发”（也可以百度：阿里云官网–进入后搜索：快递查询–会出现很多api选合适的就行）
第二步：注册或登陆阿里云账号
第三步：购买套餐（不会花钱的这个可以放心，亲自体验）

第四步：点击去调试

第五步：准备一个真是的快递单号
第六步：com栏输入aotu表示所有快递公司
nu栏输入你自己准备的快递单号
调试信息和图中差不多表示调试成功

代码

index.wxml:

<!--index.wxml-->
<view class="box-input"><input placeholder="请输入要查询的快递单号" bindinput='input'/><view class="button" type="primary"   bindtap="btnClick"> 查询 </view>
</view>
<scroll-view scroll-y="true" class="scroll-view"  wx:if="{{show}}">
<view><view class='topExpress'><view class='topExpress-left'><image src='{{express[0].logo}}' style='width:80rpx;height:80rpx;border-radius:50%;'></image></view><view class='topExpress-right'><view class='topExpress-right-top'>{{express[0].expTextName}}</view><view class='topExpress-right-middle'>运单号：{{express[0].mailNo}}</view><view class='topExpress-right-bottom'>官方电话:{{express[0].tel}}</view></view></view><view class='express-container'><view class='express-item' wx:for="{{TimeContext}}" wx:key="index"><view class='express-left-date'><view>{{TimeContext[index].time}}</view></view><!-- 左边子容器 --><view class='express-middle-axis'><!-- 正在进行的时间轴上半个时间线 --><view class='online-top-closing' wx:if="{{index!=0}}"></view><!-- 正在进行的时间轴点 --><view class='dot-closing'></view><!-- 正在进行的时间轴下半个时间线 --><view class='online-bottom'></view><!-- 显示尾部的圆点 --><view class='dot-closing' wx:if="{{index==list.length - 1}}"></view></view><!-- 右边子容器 --><view class='express-right'><view class='express-statusing' wx:if="{{index==0}}">运输中</view><view class='express-status-address'>{{TimeContext[index].context}}</view></view></view></view>
</view>
</scroll-view>

index.wxss:

/**index.wxss**/
page {background: #f6f6f6;display: flex;flex-direction: column;justify-content: flex-start;
}
.box-input{width: 95%;margin-left: auto;margin-right: auto;border-radius: 20rpx;display: flex;justify-content: space-around;align-items: center;background-color: white;padding-top: 20rpx;padding-bottom: 20rpx;
}
input{border: 1px solid black;width: 65%;border-radius: 20rpx;font-size: 40rpx;height: 60rpx;
}.button{width: 150rpx;background-color: rgb(42, 240, 91);height: 60rpx;border-radius: 20rpx;line-height: 60rpx;text-align: center;
}.scroll-view{height: 90vh;
}
page {font-size: 0.8rem;height: 100vh;overflow: hidden;
}.topExpress {width: 95%;height: 180rpx;background: white;margin-top: 200rpx;margin: 10rpx auto;display: flex;border-radius: 5px;
}.topExpress-left {width: 100rpx;height: 100%;display: flex;justify-content: center;align-items: center;
}.topExpress-right {color: #333;display: flex;justify-content: space-around;flex-direction: column;align-items: flex-start;padding: 20rpx 5rpx;
}.topExpress-right-middle {font-size: 0.8rem;
}.topExpress-right-bottom {color: #666;
}.express-container {width: 95%;margin: 10rpx auto;background: white;border-radius: 5px;padding: 10rpx 0;}.express-item {display: flex;width: 100%;justify-content: start;
}.express-middle-axis {display: flex;width: 48rpx;flex-direction: column;align-items: center;justify-content: center;
}.express-left-date {display: flex;width: 300rpx;align-items: center;flex-direction: column;justify-content: center;text-align: center;
}.online-top-closing {width: 1px;height: 80rpx;background: #d7d7d7;
}.dot-closing {width: 20rpx;height: 20rpx;border-radius: 50%;margin-top: 6rpx;margin-bottom: 6rpx;background: skyblue;
}.dot-shou {width: 30rpx;height: 30rpx;border-radius: 50%;background: #999;font-size: 18rpx;color: #fff;display: flex;justify-content: center;align-items: center;
}.online-bottom {width: 1px;height: 80rpx;background: #999;
}.express-right {display: flex;flex-grow: 1;flex-direction: column;margin: 0 20rpx;justify-content: center;width: 70%;border-bottom: 1rpx solid black;
}

index.js:

//index.js
const app = getApp()Page({data: {OrderNo:'',express:[],TimeContext:[],show:false},btnClick: function (options) {var that = this;app.getExpressInfo(that.data.OrderNo, function(data) {console.log(data.showapi_res_body.data)var logo="express[0].logo"var expTextName="express[0].expTextName"var mailNo="express[0].mailNo"var tel="express[0].tel"that.setData({express: data.showapi_res_body.data,//格式转换*谨记[logo]:data.showapi_res_body.logo,[expTextName]:data.showapi_res_body.expTextName,[mailNo]:data.showapi_res_body.mailNo,[tel]:data.showapi_res_body.tel,TimeContext:data.showapi_res_body.data,show:true})console.log(that.data.express[0].time)});},onLoad: function() {},//输入框输入订单号后赋值input: function(e) {console.log(e.detail.value)this.setData({OrderNo: e.detail.value})
},})

app.js 这边要对应申请接口的url值和Authorization值

//app.js
App({onLaunch: function () {if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({// env 参数说明：//   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源//   此处请填入环境 ID, 环境 ID 可打开云控制台查看//   如不填则使用默认环境（第一个创建的环境）// env: 'my-env-id',traceUser: true,})}this.globalData = {}},getExpressInfo: function(nu, cb) {wx.request({url: 'https://ali-deliver.showapi.com/showapi_expInfo?com=auto&nu='+nu,data: {},header: {'Authorization': 'APPCODE 8d71c88894144e798b37278667f2c286'},success: function(res) {console.log(res.data)cb(res.data)}})},
})

最后:做完前四个步骤就可以运行了，运行过后会出现以下错误：

添加request 合法域名列表（request 合法域名校验出错）

解决办法:

第一步：百度搜索微信公众平台，进入后登陆自己的小程序账号
第二步：点击-开发-在点击-开发设置-最后点击-开始配置-进入

第三步：查看并赋值地址

第四步：在第二步操作过后的配置界面中写入第三步查看的地址并保存

第五步：查看是否配置成功：

第六步：运行小程序进行快递查询

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

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

微信小程序-快递查询