微信小程序入门实例_____从零开始 开发一个“旅行清单 ”微信小程序_class="{{item.checked ? \'checked-text\' : \'\'}}

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

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

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=\"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}}\"> <text class=\"{{item.checked ? \'checked-text\' : \'\'}}\">{{item.name}} <button bindtap=\"deleteItem\" data-index=\"{{index}}\" size=\"mini\">删除  清空清单  <view class=\"empty-tip\" wx:if=\"{{itemList.length === 0}}\">清单为空，添加你的旅行物品吧~

           这段代码构建了页面的基本结构。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通过模态框确认后清空清单。​

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

             完成代码后，点击微信开发者工具的 “编译” 按钮，模拟器中就会显示这个旅行清单小程序。在输入框输入物品名称，点击 “添加” 按钮，物品会被加入清单；勾选复选框可标记物品已携带；点击 “删除” 可移除对应物品；点击 “清空清单” 可删除所有物品。​

          若运行出现问题，可通过右侧调试面板查看报错信息。比如在addItem方法中添加console.log(this.data.inputValue)，查看是否成功获取输入的物品名称，帮助排查问题。​

             这个旅行清单小程序功能实用，涵盖了数据的增删改查和本地存储等常用操作。你还可以进一步优化，比如给物品分类、设置提醒时间等。赶紧动手试试，让你的旅行准备更有条理吧！每次的教程让你领略开发的全过程。了解微信小程序的一些基本常识。