快递查询

最新推荐文章于 2021-10-08 14:19:11 发布

夜来泛

最新推荐文章于 2021-10-08 14:19:11 发布

阅读量246

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_45529248/article/details/108813200

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

微信小程序 - 快递查询

效果图：
在这里插入图片描述

准备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>