微信小程序 - 快递查询
效果图:
准备API
需要对接快递物流查询接口,进行物流信息查询。若不知道该如何选择api的话,可以访问阿里云,搜索快递接口,选择适合自己的即可,且阿里云有完整的API使用教程。
阿里云可以对接口进行调试
之后就可以在AP调试页面对接口进行调试。
小程序编写
- 在app.json中注册页面
"pages":[
"pages/index/index",
"pages/imgPage/imgPage",
"pages/search/search",
"pages/videoPage/videoPage",
"pages/myWeChat/myWeChat",
"pages/logs/logs"
]
- 首先在 .wxml 文件中添加一个输入框和一个查询按钮,并绑定对应的事件
<view style="margin: 50px 0;">
<input bindchange="selectExp" class="weui-input" placeholder="请输入快递单号" />
<button bindtap="selectBtn" style="margin: auto" type="primary" formType="submit">查询</button>
</view>
selectExp: function (e) {
// 将文本框中的快递单号存入Data中
this.setData({
selectExpNum: e.detail.value
})
},
selectBtn: function () {
var that = this;
wx.request({
// 请求参数
url: 'http://wuliu.market.alicloudapi.com/kdi?no=' + that.data.selectExpNum,
data: {
x: '',
y: ''
},
header: {
"Authorization":"APPCODE XXXXXXXXXXXXXXXXXXXXXX"
},
success (res) {
that.setData({
// 将返回结果存入data中
expList: res.data.result.list
})
console.log(that.data.expList);
}
})
},
- 之后就是将返回的数据 遍历显示到页面上就行了
<scroll-view scroll-y="true" style="height: 600rpx;">
<view wx:for="{{expList}}" wx:for-item="list">
<view class="time">时间:{{list.time}}:</view>
<view class="status">状态:{{list.status}}</view>
</view>
</scroll-view>