? ? ? ? ? 前面的博文中。我們陸續學習與開發了記賬等一些實用實用小程序的開發過程，今天來打造一個適合出行場景的工具 ——“旅行清單小程序”。無論是短途游玩還是長途旅行，它都能幫你梳理需要攜帶的物品，避免遺漏。下面就跟著步驟，一步步實現這個小程序。再次體驗開發者的快樂

一、開發小程序員前的準備工作?🌷🌷

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通過模態框確認后清空清單。?

四、運行與調試小程序?🌷🌷

? ? ? ? ? ? ?完成代碼后，點擊微信開發者工具的 “編譯” 按鈕，模擬器中就會顯示這個旅行清單小程序。在輸入框輸入物品名稱，點擊 “添加” 按鈕，物品會被加入清單；勾選復選框可標記物品已攜帶；點擊 “刪除” 可移除對應物品；點擊 “清空清單” 可刪除所有物品。?

? ? ? ? ? 若運行出現問題，可通過右側調試面板查看報錯信息。比如在addItem方法中添加console.log(this.data.inputValue)，查看是否成功獲取輸入的物品名稱，幫助排查問題。?

? ? ? ? ? ? ?這個旅行清單小程序功能實用，涵蓋了數據的增刪改查和本地存儲等常用操作。你還可以進一步優化，比如給物品分類、設置提醒時間等。趕緊動手試試，讓你的旅行準備更有條理吧！每次的教程讓你領略開發的全過程。了解微信小程序的一些基本常識。

?