【微信小程序】快递查询

时间 2020-04-15 标签微信小程序快递查询

前言

看了好久的视频，加上本身的摸索，想写一篇易懂的博客供你们参考，尽可能把每一步都写到最详细。java

分析

1.准备工做：
（1）须要准备一个查询快递的API
（2）一个真实的快递运单号
2.编写界面
（1）输入框（需绑定事件）
（2）按钮（需绑定事件）
（3）修改样式
3.逻辑实现
（1）编写getExpressInfo方法调用快递查询接口
（2）在data中设置两个变量（ expressNu expressInfo）
（3）编写输入框的事件
（4）编写按钮的事件
4.在模拟器输出信息
（1）用wx:for遍历数组输出web

一.准备工做

我是用的接口是 API Shopexpress

注册帐号，等审核结束后就会生成apiKey。

这个是以后接口的使url（从这找）api
准备一个真实的运单号数组

二.编写界面

输入框（需绑定事件）
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？
app

编写按钮的事件
（在这步开始是要在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) 传入到这个方法中。svg

四.在模拟器输出信息

用wx:for遍历数组输出

<view>{{expressInfo.result.expName}}</view>
    <view wx:for="{{expressInfo.result.list}}">
      {{item.status}}【{{item.time}}】
    </view>

五.展现

若你们还有疑问的话，但愿能收到你的回复！祝你们成为优秀的学习冠军！！
函数