微信小程序实现一键查询全国快递物流地图轨迹

随着电子商务的快速发展，物流行业成为了一个关键的领域。对于用户来说，了解快递物流的实时状态和轨迹信息非常重要。本教程将介绍如何在微信小程序中实现一键查询全国快递物流地图轨迹的功能。通过这个功能，用户可以方便地查看快递的实时位置和运输轨迹。

海碗吃饭

122人浏览 · 2023-07-13 16:25:30

海碗吃饭 · 2023-07-13 16:25:30 发布

引言

步骤1: 创建小程序页面

首先，创建两个小程序页面，分别是输入快递单号的页面和显示地图轨迹的页面。

在微信开发者工具中，选择你的小程序项目，右键点击"pages"目录，选择"新建文件夹"，创建名为"inputPage"的文件夹。

在"inputPage"文件夹下，右键点击选择"新建页面"，并命名为"inputPage"，将自动生成的"wxml"、"wxss"和"js"文件保留。

同样，在"pages"目录下，右键点击选择"新建页面"，并命名为"showPage"，同样保留生成的"wxml"、"wxss"和"js"文件。

步骤2: 输入页面设计

输入页面代码（inputPage.wxml），添加以下代码：

<view class="container">
  <text>请输入快递单号：</text>
  <input bindinput="handleInput" placeholder="请输入快递单号"></input>
  <text>请输入快递单号：</text>
  <input bindinput="handleInput" placeholder="请输入快递单号"></input>
  <button bindtap="handleSearch">查询</button>
</view>

输入页面样式（inputPage.wxss），添加以下代码：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 200rpx;
}

input {
  width: 80%;
  height: 60rpx;
  border: 1rpx solid #ccc;
  border-radius: 4rpx;
  margin-top: 20rpx;
  padding: 0 20rpx;
}

button {
  width: 150rpx;
  height: 60rpx;
  background-color: #0088cc;
  color: #fff;
  border-radius: 4rpx;
  margin-top: 20rpx;
}

输入页面逻辑（inputPage.js），添加以下代码：

Page({
  data: {
    expressNumber: '',
  },

  handleInput(event) {
    this.setData({
      expressNumber: event.detail.value,
    });
  },

  handleSearch() {
    // 跳转到显示页面并传递快递单号
    wx.navigateTo({
      url: '/pages/showPage/showPage?expressNumber=' + this.data.expressNumber,
    });
  },
});

步骤3: 显示页面设计

显示页面代码（showPage.wxml）

<view class="container">
  <web-view src="{{ traceMapR }}"></web-view>
</view>

显示页面样式（showPage.wxss）

.container {
  height: 100%;
}

web-view {
  width: 100%;
  height: 100%;
}

显示页面逻辑（showPage.js）

Page({
  data: {
    traceMapR: '',
  },

  onLoad(options) {
    onLoad(options) {
    var data = {
      "cpCode": "YTO",
      "mailNo": "YTO1111111111",
      "phone": "1300000000",
      "origin": "浙江省杭州市滨江区",
      "destination": "浙江省杭州市滨江区",
      "receiveAddress": "江南大道",
      "responseModel": "H5"
    };

    wx.request({
      url: "https://eolink.o.apispace.com/wldtgj1/paidtobuy_api/trace_map",
      method: "POST",
      header: {
        "X-APISpace-Token": "API 密钥",
        "Authorization-Type": "apikey",
        "Content-Type": "application/json"
      },
      data: data,
      success: (response) => {
        console.log(response.data);
        // 在这里处理返回的数据，例如将数据保存到 data 中并在页面上展示
      }
    });
  },
  },
});

请注意，在示例代码中的 X-APISpace-Token 头部字段需要填入你的API密钥，可以登陆 APISpace 接口平台获取。

另外，根据实际需要，你可以在 success回调函数中处理返回的数据，例如将数据保存到data中并在页面上展示。

步骤4: 小程序配置

在微信开发者工具中，打开"app.json"文件，添加以下代码：

{
  "pages": [
    "pages/inputPage/inputPage",
    "pages/showPage/showPage"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "快递查询",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": []
  }
}

保存文件后，即可完成小程序的配置。