微信小程序入门实例_____快速搭建一个快递查询小程序

最新推荐文章于 2025-07-07 22:16:15 发布

原创最新推荐文章于 2025-07-07 22:16:15 发布 · 832 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

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

4 篇文章

订阅专栏

代码星辉·七月创作之星挑战赛 10w+人浏览 87人参与

🌷🌷之前几篇博文我们一起开发了天气查询、单词速记和待办事项小程序，这次我们来对生活中常用的功能 —— 快递查询来探索相关的小程序。网购已经成为大家生活的一部分，有了自己的快递查询小程序，不用切换多个应用，就能随时掌握自己的包裹动态。下面就跟着详细步骤，看看这款小程序开发的全部步骤。

一、开发准备工作🌷🌷

01. 检查微信开发者工具

前期的几步操作都是通用的。继续写入博文只是更全面的了解微信小程序开发的全过程. 首先确保你的电脑已经安装了微信开发者工具。如果还没安装，访问微信公众平台（https://mp.wei xin .qq.com /），在页面底部找到 “下载” 按钮，根据电脑系统（Windows 或 Mac）下载对应的安装包并完成安装。已经安装的用户，打开开发者工具，检查是否有更新提示，及时更新到最新版本，以获得更好的开发体验和新功能支持。

2. 处理小程序账号

若你有将小程序发布上线，供他人使用的计划，那就需要在微信公众平台注册一个正式的小程序账号，注册完成后获取 AppID。如果只是用于学习和练习，在微信开发者工具创建项目时，选择 “体验模式”，跳过 AppID 填写也能正常开发。

二、创建快递查询小程序项目🌷🌷

打开微信开发者工具，点击 “新建项目”。在弹出的窗口中，填写项目名称，比如 “便捷快递追踪助手”，选择好项目在电脑中存放的目录。如果有 AppID，就准确填入；没有的话，勾选 “不使用云服务”，选择 “体验模式”，点击 “新建”，这样一个空白的小程序项目框架就搭建好了。

这个项目创建成功后，我们先熟悉一下项目的目录结构。pages文件夹用来存放小程序各个页面的代码；app.js是小程序的逻辑入口文件，掌控着小程序的整体运行逻辑；app.json用于配置小程序的页面路径、窗口样式等重要信息；app.wxss负责设置小程序的全局样式，后续开发过程中，我们会频繁和这些文件打交道。

三、构建快递查询小程序页面🌷🌷

我们要开发的快递查询小程序，主要包含一个页面，用户在这个页面输入快递单号，选择快递公司，点击查询按钮，就能获取快递的物流信息。这里我们使用模拟数据来展示查询结果，实际开发中可以接入快递查询 API 获取真实数据。

1-------创建页面文件

在pages文件夹上右键单击，选择 “新建 Page”，命名为expressTracking，系统会自动生成expressTracking.js、expressTracking.json、expressTracking.wxml、expressTracking.wxss四个文件，分别对应页面的逻辑处理、配置信息、结构布局和样式设计。

2-------------编写小程序页面结构

<view class="container">
  <view class="input-group">
    <text class="label">快递单号：</text>
    <input placeholder="请输入快递单号" bindinput="inputExpressNumber"></input>
  </view>
  <view class="input-group">
    <text class="label">快递公司：</text>
    <picker mode="selector" bindchange="selectCompany">
      <view class="picker-view">
        {{selectedCompany}}
      </view>
      <view class="picker-modal">
        <view wx:for="{{companyList}}" wx:key="index">{{item}}</view>
      </view>
    </picker>
  </view>
  <button bindtap="queryExpress">查询快递</button>
  <view wx:if="{{expressInfo}}">
    <text class="title">快递信息</text>
    <text>快递公司：{{expressInfo.company}}</text>
    <text>快递单号：{{expressInfo.number}}</text>
    <view wx:for="{{expressInfo.traces}}" wx:key="index">
      <text>{{item.time}} - {{item.status}}</text>
    </view>
  </view>
</view>

这段代码定义了页面的基本结构。两个input-group分别用于输入快递单号和选择快递公司；picker组件实现了快递公司的下拉选择功能；queryExpress绑定按钮点击事件，用于触发快递查询操作；wx:if根据是否获取到快递信息，决定是否展示快递详情。

3. 编写小程序的页面样式

.container {
  padding: 20px;
}

.input-group {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.label {
  width: 80px;
  font-weight: bold;
}

input {
  flex: 1;
  height: 40px;
  padding-left: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.picker-view {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding-left: 10px;
}

.picker-modal {
  display: none;
}

button {
  width: 100%;
  height: 40px;
  background-color: #007AFF;
  color: white;
  border: none;
  border-radius: 5px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

这里设置了页面容器、输入框、选择器和按钮等元素的样式，让页面布局合理、美观。

4. 编写小程序页面逻辑

Page({
  data: {
    inputExpressNumber: '',
    selectedCompany: '请选择快递公司',
    companyList: ['中通快递', '圆通速递', '申通快递', '韵达快递', '顺丰速运'],
    expressInfo: null
  },
  inputExpressNumber: function (e) {
    this.setData({
      inputExpressNumber: e.detail.value
    });
  },
  selectCompany: function (e) {
    let index = e.detail.value;
    let companyList = this.data.companyList;
    this.setData({
      selectedCompany: companyList[index]
    });
  },
  queryExpress: function () {
    // 这里用模拟数据代替真实的快递查询结果
    let mockExpressInfo = {
      company: this.data.selectedCompany,
      number: this.data.inputExpressNumber,
      traces: [
        { time: '2024-01-01 10:00:00', status: '已揽收' },
        { time: '2024-01-02 08:00:00', status: '运输中' },
        { time: '2024-01-03 15:00:00', status: '已送达' }
      ]
    };
    this.setData({
      expressInfo: mockExpressInfo
    });
  }
});

在data中定义了页面初始数据，包括输入的快递单号、选中的快递公司、快递公司列表和快递信息。inputExpressNumber方法获取用户输入的快递单号；selectCompany方法处理快递公司选择事件；queryExpress方法模拟快递查询，设置展示的快递信息。这样操作基本就完成了

四、运行与调试小程序🌷🌷

完成以上的代码编写后，点击开发者工具上方的 “编译” 按钮，或者使用快捷键Ctrl + S（Windows）/Command + S（Mac）保存代码，就能在模拟器中看到我们的快递查询小程序了。在输入框输入快递单号，选择快递公司，点击 “查询快递” 按钮，就能看到模拟的快递物流信息。

如果小程序运行出现问题，不要慌！利用开发者工具右侧的调试面板查看报错信息。在expressTracking.js的各个方法中添加console.log()语句，比如在queryExpress方法中添加console.log(this.data.inputExpressNumber)，可以打印出用户输入的快递单号，方便我们定位和解决问题。

到这里，一个简单的快递查询小程序就开发完成了。后续你可以进一步优化它，比如接入真实的快递查询 API，获取准确的物流信息；添加快递收藏功能，方便快速查看常用快递；或者设计更美观的界面。微信小程序开发的世界还有很多惊喜等待你去发现，快动手试试吧！从中体验编程的快乐。