当前位置：首页 > news >正文

微信小程序入门实例_____从零开始开发一个“旅行清单 ”微信小程序

news 2025/7/22 10:14:08

前面的博文中。我们陆续学习与开发了记账等一些实用实用小程序的开发过程，今天来打造一个适合出行场景的工具 ——“旅行清单小程序”。无论是短途游玩还是长途旅行，它都能帮你梳理需要携带的物品，避免遗漏。下面就跟着步骤，一步步实现这个小程序。再次体验开发者的快乐

一、开发小程序员前的准备工作🌷🌷

1. 工具检查🌷🌷

确保微信开发者工具已安装并更新到最新版本。若未安装，打开微信公众平台（微信公众平台），在页面底部找到 “下载” 选项，根据电脑系统选择对应的安装包进行安装。已安装的用户，打开工具后留意是否有更新提示，及时更新以保障开发顺利。

2. 账号准备

若仅用于个人学习，无需上线，创建项目时选择 “体验模式” 即可。若有上线计划，需在微信公众平台注册小程序账号，注册完成后在 “设置 - 开发设置” 中获取 AppID，创建项目时填入。

二、创建旅行清单小程序项目🌷🌷

打开微信开发者工具，点击 “新建项目”。在弹出的窗口中，填写项目名称，比如 “我的旅行清单”，选择合适的项目存放目录。有 AppID 则填入，没有则勾选 “不使用云服务” 并选择 “体验模式”，点击 “新建”，项目框架就搭建好了。

项目创建后，熟悉一下目录结构。pages文件夹用于存放各页面代码；app.js是小程序的逻辑入口；app.json负责配置页面路径、窗口样式等；app.wxss用于设置全局样式，这些文件在开发中会频繁用到。

三、构建旅行清单小程序页面🌷🌷

这个旅行清单小程序主要有一个页面，能实现添加物品、标记物品是否已携带、删除物品以及清空清单等功能。

1. 创建页面文件

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

2. 编写小程序的页面结构

<view class="container"><view class="add-section"><input placeholder="请输入要携带的物品" bindinput="inputItem"></input><button bindtap="addItem">添加</button></view><view class="list-section" wx:if="{{itemList.length > 0}}"><view class="list-item" wx:for="{{itemList}}" wx:key="index"><checkbox checked="{{item.checked}}" bindchange="toggleCheck" data-index="{{index}}"></checkbox><text class="{{item.checked ? 'checked-text' : ''}}">{{item.name}}</text><button bindtap="deleteItem" data-index="{{index}}" size="mini">删除</button></view><button bindtap="clearList" class="clear-btn">清空清单</button></view><view class="empty-tip" wx:if="{{itemList.length === 0}}">清单为空，添加你的旅行物品吧~</view>
</view>

这段代码构建了页面的基本结构。add-section包含输入框和添加按钮，用于添加物品；list-section在清单有物品时显示，里面通过循环展示物品列表，每个物品包含复选框、名称和删除按钮；clear-btn用于清空清单；empty-tip在清单为空时显示提示文字。

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

.container {padding: 20px;
}.add-section {display: flex;gap: 10px;margin-bottom: 25px;
}.add-section input {flex: 1;height: 45px;border: 1px solid #ddd;border-radius: 6px;padding-left: 12px;
}.add-section button {width: 100px;height: 45px;background-color: #2196F3;color: white;border: none;border-radius: 6px;
}.list-item {display: flex;align-items: center;gap: 10px;padding: 12px;border: 1px solid #f0f0f0;border-radius: 6px;margin-bottom: 10px;
}.list-item checkbox {transform: scale(1.2);
}.checked-text {text-decoration: line-through;color: #999;flex: 1;
}.list-item text {flex: 1;font-size: 16px;
}.list-item button {background-color: #f44336;color: white;border: none;border-radius: 4px;
}.clear-btn {width: 100%;height: 40px;background-color: #f5f5f5;color: #666;border: none;border-radius: 6px;margin-top: 15px;
}.empty-tip {text-align: center;color: #999;padding: 30px 0;
}

这些样式让页面布局更合理美观，设置了添加区域、物品列表、按钮等元素的样式，勾选后的物品名称会显示删除线并变灰，增强视觉区分。

4. 编写小程序页面逻辑

Page({data: {inputValue: '',itemList: []},onLoad: function () {// 从本地存储获取清单数据const list = wx.getStorageSync('travelList');if (list) {this.setData({itemList: list});}},inputItem: function (e) {this.setData({inputValue: e.detail.value});},addItem: function () {if (!this.data.inputValue.trim()) {wx.showToast({title: '请输入物品名称',icon: 'none'});return;}const newItem = {name: this.data.inputValue.trim(),checked: false};const newList = [...this.data.itemList, newItem];this.setData({itemList: newList,inputValue: ''});// 保存到本地存储wx.setStorageSync('travelList', newList);wx.showToast({title: '添加成功',icon: 'success'});},toggleCheck: function (e) {const index = e.currentTarget.dataset.index;const newList = [...this.data.itemList];newList[index].checked =!newList[index].checked;this.setData({itemList: newList});wx.setStorageSync('travelList', newList);},deleteItem: function (e) {const index = e.currentTarget.dataset.index;const newList = [...this.data.itemList];newList.splice(index, 1);this.setData({itemList: newList});wx.setStorageSync('travelList', newList);},clearList: function () {wx.showModal({title: '提示',content: '确定要清空所有物品吗？',success: (res) => {if (res.confirm) {this.setData({itemList: []});wx.setStorageSync('travelList', []);}}});}
});

在data中定义了输入框的值和物品列表。onLoad方法从本地存储获取清单数据；inputItem获取输入的物品名称；addItem验证输入后添加物品到清单，并更新本地存储；toggleCheck处理物品的勾选状态切换；deleteItem删除指定物品；clearList通过模态框确认后清空清单。