前言
看了很久的视频,加上自己的摸索,想写一篇易懂的博客供大家参考,尽量把每一步都写到最详细。
分析
1.准备工作:
(1)需要准备一个查询快递的API
(2)一个真实的快递运单号
2.编写界面
(1)输入框(需绑定事件)
(2)按钮(需绑定事件)
(3)修改样式
3.逻辑实现
(1)编写getExpressInfo方法调用快递查询接口
(2)在data中设置两个变量( expressNu expressInfo)
(3)编写输入框的事件
(4)编写按钮的事件
4.在模拟器输出信息
(1)用wx:for遍历数组输出
一.准备工作
我是用的接口是 API Shop
-
注册账号,等审核结束后就会生成apiKey。
这个是之后接口的使url(从这找) -
准备一个真实的运单号
二.编写界面
- 输入框(需绑定事件)
bindinput:用输入框输入中文的过程中就触发了事件。
<!--express.wxml-->
<input placeholder="请输入运单号" bindinput="input"></input>
- 按钮(需绑定事件)
bindtap:绑定点击,点击的时候会触发。
<!--express.wxml-->
<button bindtap="btnClick">查询</button>
- 修改样式
/*按自己的需求设定*/
input{
border: 2px solid LightPink;
height: 60rpx;
width: 80%;
margin: 10%;
padding: 5rpx;
}
button{
background-color: Snow;
color:Plum;
}
三.逻辑实现
- 编写getExpressInfo方法调用快递查询接口
getExpressInfo:function(expressNumber,cb){
wx.request({
url: 'https://api.apishop.net/common/express/getExpressInfo?apiKey=nWhZMdhca51263978dc3c9ac81cf9cf83bxxxxxxxxx&expressNumber='+expressNumber,
data: {
x: '',
y: ''
},
header: {
'apiKey': 'nWhZMdhca51263978dc3c9ac81cf9cf83bxxxxxxxxx'
},
success (res) {
cb(res.data) //cb是指callback( )回调函数
}
})
},
这里面的 请求转发 是在微信官方文档中可搜索到
- 在data中设置两个变量( expressNu expressInfo)
全都设置为null
/*express.js*/
data: {
motoo:'Hello World',
userInfo: {},
expressNu:null, //用来保存输入的运单号
expressInfo:null //用来保存查询到的快递信息
},
- 编写输入框的事件
input:function(e){
this.setData({expressNu:e.detail.value})
},
如何知道 e.detail.value?
- 编写按钮的事件
(在这步开始是要在express.js最开头写上)
const app = getApp()
/*express.js*/
btnClick: function() {
var thispage = this;
app.getExpressInfo(this.data.expressNu,function(data){
console.log(data)
thispage.setData({expressInfo:data})
})
},
调用app.js中的 getExpressInfo 方法,把 this.data.expressNu (这是键盘输入的订单号) function(data) 传入到这个方法中。
四.在模拟器输出信息
- 用wx:for遍历数组输出
<view>{{expressInfo.result.expName}}</view>
<view wx:for="{{expressInfo.result.list}}">
{{item.status}}【{{item.time}}】
</view>
五.展示
若大家还有疑问的话,希望能收到你的回复!祝大家成为优秀的学习冠军!!