微信小程序基础开发实战 1 待办事项小程序

微信小程序基础开发实战

本文通过一个简单实战项目「待办事项小程序」，讲解微信小程序开发的基础知识，包括页面构建、组件使用和数据绑定。

1 项目初始化与配置

• 目标：完成一个可运行的小程序基本结构。
• 步骤：
  • 使用微信开发者工具新建项目。
  • 理解项目结构（app.js、app.json、pages）。
  • 配置页面导航（app.json中pages字段）。
• 示例代码：

// app.json
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "待办小程序",
    "navigationBarTextStyle": "black"
  }
}

2 创建首页页面

• 目标：搭建首页界面，并展示基础组件。
• 步骤：
  • 创建index页面(index.wxml)。
  • 使用view、button、input基础组件布局。
• 示例代码：

<!-- index.wxml -->
<view class="container">
  <input bindinput="inputTodo" placeholder="请输入待办事项"/>
  <button bindtap="addTodo">添加事项</button>
  <view wx:for="{{todos}}" wx:key="index">
    <text>{{index + 1}}. {{item}}</text>
  </view>
</view>

3 数据绑定与逻辑实现

• 目标：实现数据的动态绑定及简单的交互。
• 步骤：
  • 使用data定义初始状态。
  • 实现input绑定方法记录用户输入。
  • 实现button点击事件处理函数添加待办事项。
• 示例代码：

// index.js
Page({
  data: {
    todos: [],
    currentInput: ''
  },
  inputTodo(e) {
    this.setData({
      currentInput: e.detail.value
    });
  },
  addTodo() {
    if (this.data.currentInput.trim() !== '') {
      this.setData({
        todos: [...this.data.todos, this.data.currentInput],
        currentInput: ''
      });
    }
  }
});

4 样式美化与布局优化

• 目标：使用WXSS实现页面的美观和清晰布局。
• 步骤：
  • 书写index.wxss，实现美观的界面布局。
  • 使用Flex布局美化列表展示。
• 示例代码：

/* index.wxss */
.container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
}
input, button {
  margin-bottom: 20rpx;
  padding: 10rpx;
}
view {
  padding: 10rpx;
  border-bottom: 1px solid #eaeaea;
}

5 小程序运行与调试

• 目标：熟悉微信开发工具的调试与模拟运行环境。
• 步骤：
  • 在微信开发者工具模拟器上运行。
  • 使用开发者工具调试界面检查数据与交互状态。
• 示例：
  • 使用开发者工具的「控制台」和「元素检查器」查看页面结构和数据变化。
    

练习

• 扩展功能：为待办事项添加删除功能。
• 提示：使用splice方法实现待办事项的删除。

本文完成后，你将能够自行创建和调试简单的小程序，并理解小程序开发的基本框架和数据交互逻辑。