微信小程序开发实战demo

微信小程序开发实战Demo：轻松入门，玩转移动端开发

🎉大家好！今天给大家带来一篇关于微信小程序开发的实战Demo，通过这个Demo，让我们一起轻松入门，玩转移动端开发！👨‍💻

什么是微信小程序？

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的理念，用户扫一扫或搜一下即可打开应用，微信小程序开发基于微信平台，具有丰富的API和便捷的开发工具,使得开发者可以快速构建出具有良好用户体验的移动应用。

实战Demo：制作一个简单的微信小程序

我们将通过一个简单的微信小程序Demo，来学习微信小程序的开发过程,这个Demo将实现一个简单的待办事项列表功能。

创建小程序

在微信开发者工具中创建一个新的小程序项目，填写项目名称、描述等信息。

配置页面

在项目中，我们创建两个页面：首页（index）和添加待办事项页面（addTask）。

• 首页：展示待办事项列表,并提供添加新待办事项的入口。
• 添加待办事项页面：用于添加新的待办事项。

编写页面代码

首页（index.wxml）

<view class="container">
  <view class="list">
    <view class="item" wx:for="{{tasks}}" wx:key="index">
      <text>{{item.name}}</text>
      <button bindtap="deleteTask" data-index="{{index}}">删除</button>
    </view>
  </view>
  <button bindtap="goToAddTask">添加待办事项</button>
</view>

首页（index.wxss）

.container {
  padding: 20rpx;
}
.list {
  margin-bottom: 20rpx;
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

添加待办事项页面（addTask.wxml）

<view class="container">
  <input type="text" placeholder="请输入待办事项" bindinput="inputTask" />
  <button bindtap="addTask">添加</button>
</view>

添加待办事项页面（addTask.wxss）

.container {
  padding: 20rpx;
}

编写页面逻辑

首页（index.js）

Page({
  data: {
    tasks: []
  },
  deleteTask: function (e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      tasks: this.data.tasks.filter((item, idx) => idx !== index)
    });
  },
  goToAddTask: function () {
    wx.navigateTo({
      url: '/pages/addTask/addTask'
    });
  }
});

添加待办事项页面（addTask.js）

Page({
  data: {
    taskName: ''
  },
  inputTask: function (e) {
    this.setData({
      taskName: e.detail.value
    });
  },
  addTask: function () {
    const tasks = this.data.tasks;
    tasks.push({
      name: this.data.taskName
    });
    this.setData({
      tasks: tasks,
      taskName: ''
    });
    wx.navigateBack();
  }
});

运行小程序

完成以上步骤后，点击微信开发者工具中的“预览”按钮,即可在手机上查看和体验我们制作的微信小程序。

🎉恭喜你！你已经成功制作了一个简单的微信小程序Demo！🎉

通过这个实战Demo，你不仅可以学习到微信小程序的基本开发流程，还可以了解如何使用微信小程序的API和组件，希望这篇文章对你有所帮助，祝你在微信小程序开发的道路上越走越远！🚀