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

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

一、开发准备工作🌷🌷

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,获取准确的物流信息;添加快递收藏功能,方便快速查看常用快递;或者设计更美观的界面。微信小程序开发的世界还有很多惊喜等待你去发现,快动手试试吧!从中体验编程的快乐。

相关推荐
2501_9151063232 分钟前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview
paopaokaka_luck5 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
老虎062711 小时前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
郭邯16 小时前
小程序中自定义组件的样式隔离
微信小程序
每天开心19 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
老华带你飞1 天前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽1 天前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
说私域1 天前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往1 天前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw1 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友