快递查询（2020-1-7亲测）
项目准备
- 创建项目demo4-expressQuery（
因为练习取过这个名所以案例里面是demo-expressQuery） - 操作步骤同demo3
- 不过second目录可以改为expressQuery目录（也可以将index目录里的子文件的内容删了，在index里面写页面和脚本）
- 找一个网站有查快递API接口的，我只找到这个收费的，当然不想买的可以私聊我，在一个月内，因为我自己也不想续费。
- 我这边选择创建expressQuery目录再将index和logs给删了 反正用不到。
- app.json
- 如果对里面一些知识点不懂可以查看之前的文档
微信小程序篇】三. 微信小程序的事件
微信小程序篇】二. 微信小程序的视图与渲染
微信小程序篇】一. 入门 hello wxapp
1. 定义页面和样式
1.1 expressQuery.wxml
<!-- 根据单号查询快递 -->
<!-- container 居中 -->
<view class="container">
<!-- placeholder input提示值 -->
<input placeholder="请输入订单号 "/>
<!-- 查询按钮 -->
<button type="primary" value="">查询</button>
</view>
1.2 expressQuery.wxss
input{
border: 1px solid red;
width: 80%;
margin: 5%;
padding: 5%;
}
1.3 expressQuery.js
我去掉了一些事件，暂时用不到，最后获取应用实例。
//获取应用实例 及app.js
const app = getApp();
Page({
data: {
}
})
1.4 app.js
去掉了原来的index和log的事件，也用不到。
//app.js
App({
})
2. 页面绑定事件及js注册事件
2.2 expressQuery.wxml
<view class="container">
<!-- bindinput 绑定输入事件 -->
<input placeholder="请输入订单号" bindinput="inputE"/>
<!-- bindtap 点击事件 -->
<button type="primary" bindtap="queryE">查询</button>
</view>
2.2 expressQuery.js
data中定义从input传入的值 trackNo 和查询返回的信息 expressMessage
//获取应用实例 及app.js
const app = getApp();
Page({
data: {
trackNo:null, // 快递单号
expressMessage:null // 查询快递返回的信息
},
// input绑定的事件 inputE
inputE:function(e){
},
// button绑定的事件 queryE
queryE:function(){
}
})
2.3 app.js定义方法去调用接口查询数据并返回数据
//app.js
App({
// trackNo input传入的订单号,fun 回调函数
getExpressMessage:function(trackNo,fun){
wx.request({
url: '',
data: {
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
}
})
}
})
2.3.1 参数输入
提供接口的网站都有提供的文档 查看文档就会发现我们要的数据。
既然查看了文档那么请求里面的值就好填了。
//app.js
App({
// trackNo input传入的订单号,fun 回调函数
getExpressMessage:function(trackNo,fun){
wx.request({
url: 'http://route.showapi.com/880-1',
data: {
TrackNo: trackNo, //所需参数订单号
showapi_appid: " ", // 所需参数appid // 看看项目准备
showapi_sign: " ", //所需参数密钥
showapi_timestamp: new Date().getTime() // 所需参数请求时间
},
header: {
'content-type': 'application/json' // 返回json格式
},
success(res) {
// 回调函数 控制台输出数据
console.log(res.data)
}
})
}
})
3.事件数据传递（先图片后代码）
现在该有的页面已经有了，该有注册的事件也已经注册了，调用api接口的方法也写好了，是时候将功能串起来了。
- 首先 将input绑定事件传入的值赋值给trackNo
- 再用button绑定的事件调用api接口的方法,传入trackNo
关掉校验
-
调用api接口的方法通过button传入的值进行请求url，传data里面的参数，并通过回调函数往回传,传到button事件的回调函数
-
button绑定的事件通过回调函数将值取出来赋值给expressMessage
-
expressQuery.wxml获取{{expressMessage}},并循环输出出来。
- 给class=‘viewMess’加点样式
4. 上代码
4.1 expressQuery.wxml
<!-- 根据单号查询快递 -->
<!-- YT4320769108383 -->
<!-- container 居中 -->
<view class="container">
<!-- placeholder input提示值 --><!-- bindinput 绑定输入事件 -->
<input placeholder="请输入订单号" bindinput="inputE"/>
<!-- 查询按钮 --> <!-- bindtap 点击事件 -->
<button type="primary" bindtap="queryE">查询</button>
<!-- 带下划线view -->
<scroll-view scroll-y="true" style="height: 500rpx;" >
<!-- 遍历 -->
<view wx:for="{{expressMessage}}">
<view class="viewMess">【{{item.AcceptTime}}】{{item.AcceptStation}}</view>
</view>
</scroll-view>
</view>
4.2 expressQuery.wxss
input{
border: 1px solid red;
width: 80%;
margin: 5%;
padding: 5%;
}
.viewMess{
font-size: 12px;
}
4.3 expressQuery.js
//获取应用实例 及app.js
const app = getApp();
Page({
data: {
trackNo:null, // 快递单号
expressMessage:null // 查询快递的信息
},
// input绑定的事件 inputE
inputE:function(e){
// console.log(e);
this.setData({ trackNo: e.detail.value }); //将input绑定事件传入的值赋值给trackNo
},
// button绑定的事件 queryE
queryE:function(){
var thisPage = this;
// 用button绑定的事件调用api接口的方法,传入trackNo
// this.data.trackNo 从上面data{}中取值，function(){} 回调函数
app.getExpressMessage(this.data.trackNo, function (data) {
// 将从回调过来的参数赋值给expressMessage
thisPage.setData({ expressMessage: data });
})
}
})
4.4 app.js
//app.js
App({
// trackNo input传入的订单号,fun 回调函数
getExpressMessage:function(trackNo,fun){
wx.request({
url: 'http://route.showapi.com/880-1',
data: {
TrackNo: trackNo, //所需参数订单号
showapi_appid: " ", // 所需参数appid
showapi_sign: " ", //所需参数密钥
showapi_timestamp: new Date().getTime() // 所需参数请求时间
},
header: {
'content-type': 'application/json' // 返回json格式
},
success(res) {
// 回调函数 控制台输出数据
console.log(res.data)
// 通过fun将数据回调给调用者（queryE的回调函数里面的data）
fun(res.data.showapi_res_body.data.Trace);
}
})
}
})
5. 完，谢谢观看！
注意:因为微信小程序更新的很快，所以隔一段时间可能一些数据获取方式就变了。
最后需要id和密钥看项目准备。。。。。
