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

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

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

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)，查看是否成功获取输入的物品名称，帮助排查问题。​

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