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

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

一、开发准备工作🌷🌷

01. 检查微信开发者工具

前期的几步操作都是通用的。继续写入博文只是更全面的了解微信小程序开发的全过程. 首先确保你的电脑已经安装了微信开发者工具。如果还没安装,访问微信公众平台(https://mp.weixin.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,获取准确的物流信息;添加快递收藏功能,方便快速查看常用快递;或者设计更美观的界面。微信小程序开发的世界还有很多惊喜等待你去发现,快动手试试吧!从中体验编程的快乐。

相关推荐
HERR_QQ11 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun19 小时前
小程序导航设置更多内容的实现方法
小程序
说私域19 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
程序员柳20 小时前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1211 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero1 天前
微信小程序41~50
微信小程序·小程序
走,带你去玩1 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉1 天前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序