「微信小程序」快递查询

前言

看了很久的视频，加上自己的摸索，想写一篇易懂的博客供大家参考，尽量把每一步都写到最详细。

分析

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

一.准备工作

我是用的接口是 API Shop

1. 注册账号，等审核结束后就会生成apiKey。
   
   这个是之后接口的使url（从这找）

2. 准备一个真实的运单号

二.编写界面

1. 输入框（需绑定事件）
   bindinput:用输入框输入中文的过程中就触发了事件。

<!--express.wxml-->
<input placeholder="请输入运单号" bindinput="input"></input>

2. 按钮（需绑定事件）
   bindtap:绑定点击,点击的时候会触发。

<!--express.wxml-->
<button bindtap="btnClick">查询</button>

3. 修改样式

/*按自己的需求设定*/
input{
  border: 2px solid LightPink;
  height: 60rpx;
  width: 80%;
  margin: 10%;
  padding: 5rpx;
}
button{
  background-color: Snow;
  color:Plum;
}

三.逻辑实现

1. 编写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( )回调函数
      }
    })
  },

这里面的 请求转发 是在微信官方文档中可搜索到

2. 在data中设置两个变量（ expressNu expressInfo）
   全都设置为null

/*express.js*/
  data: {
      motoo:'Hello World',
      userInfo: {},
      expressNu:null,   //用来保存输入的运单号
      expressInfo:null  //用来保存查询到的快递信息
  },

3. 编写输入框的事件

input:function(e){
  this.setData({expressNu:e.detail.value})
},

如何知道 e.detail.value？

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

四.在模拟器输出信息

1. 用wx:for遍历数组输出

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

五.展示

若大家还有疑问的话，希望能收到你的回复！祝大家成为优秀的学习冠军！！