文章目录

• 前言
• 创建微信小程序项目
• 创建项目目录结构
• 编写首页页面
• 编写编辑页面
• 实现增删改查功能
• 展示最终效果
• 总结
• 写在最后

前言

上一篇博客中我们学习了什么是小程序以及开发一个小程序的具体步骤。

在本篇博客中，我们来开发一个用户列表增删改查功能的完整流程，包括微信小程序项目目录、项目创建、编码、实现功能以及最终效果的展示。

创建微信小程序项目

首先，在微信开发者工具中，选择新建小程序项目，填写小程序名称、AppID以及项目路径，点击确定即可创建微信小程序项目。

创建项目目录结构

在创建好的微信小程序项目中，创建以下目录结构：

- pages/
  - index/
    - index.js
    - index.json
    - index.wxml
    - index.wxss
  - edit/
    - edit.js
    - edit.json
    - edit.wxml
    - edit.wxss
- app.js
- app.json
- app.wxss

编写首页页面

在pages目录下，创建一个index目录，用于存放首页页面相关文件。在index目录下，创建以下文件：

- index.js
- index.json
- index.wxml
- index.wxss

在index.js中，编写以下代码：

// index.js
Page({
  data: {
    listData: []
  },
  onLoad: function () {
    // 页面加载时，从本地缓存中获取数据
    const listData = wx.getStorageSync('listData') || []
    this.setData({
      listData
    })
  },
  gotoAdd: function () {
    // 跳转到添加页面
    wx.navigateTo({
      url: '/pages/edit/edit',
    })
  },
  gotoEdit: function (e) {
    // 跳转到编辑页面
    const id = e.currentTarget.dataset.id
    wx.navigateTo({
      url: `/pages/edit/edit?id=${id}`,
    })
  },
  deleteData: function (e) {
    // 删除数据
    const id = e.currentTarget.dataset.id
    const listData = wx.getStorageSync('listData') || []
    const index = listData.findIndex(item => item.id === Number(id))
    listData.splice(index, 1)
    wx.setStorageSync('listData', listData)
    this.setData({
      listData
    })
  }
})

在index.wxml中，编写以下代码：

<!-- index.wxml -->
<view class="container">
  <button class="add-btn" bindtap="gotoAdd">添加</button>
  <view class="list">
    <block wx:for="{{listData}}" wx:key="id">
      <view class="item" bindtap="gotoEdit" data-id="{{item.id}}">
        <text class="text">{{item.text}}</text>
        <text class="delete" bindtap="deleteData" data-id="{{item.id}}">删除</text>
      </view>
    </block>
  </view>
</view>

在index.wxss中，编写以下代码：

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
}

.add-btn {
  width: 80%;
  background-color: #4caf50;
  color: #fff;
  border-radius: 5rpx;
  padding: 10rpx;
  text-align: center;
  margin-bottom: 20rpx;
}

.list {
  width: 80%;
}

.item {
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx;
  background-color: #fff;
  border-radius: 5rpx;
  margin-bottom: 10rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
}

.text {
  font-size: 16rpx;
}

.delete {
color: red;
font-size: 14rpx;
}

在index.json中，编写以下代码：

{
  "navigationBarTitleText": "首页"
}

编写编辑页面

在pages目录下，创建一个edit目录，用于存放编辑页面相关文件。在edit目录下，创建以下文件：

- edit.js
- edit.json
- edit.wxml
- edit.wxss

在edit.js中，编写以下代码：

// edit.js
Page({
  data: {
    id: 0,
    text: ''
  },
  onLoad: function (options) {
    if (options.id) {
      // 如果是编辑页面，从本地缓存中获取数据
      const listData = wx.getStorageSync('listData') || []
      const data = listData.find(item => item.id === Number(options.id))
      this.setData({
        id: data.id,
        text: data.text
      })
    }
  },
  handleInput: function (e) {
    // 监听输入框输入事件
    this.setData({
      text: e.detail.value
    })
  },
  handleSave: function () {
    // 保存数据
    const listData = wx.getStorageSync('listData') || []
    let { id, text } = this.data
    if (id) {
      // 如果是编辑数据，修改原有数据
      const index = listData.findIndex(item => item.id === Number(id))
      listData[index] = {
        id: Number(id),
        text
      }
    } else {
      // 如果是新增数据，生成新的id，并添加到列表中
      id = listData.length ? listData[listData.length - 1].id + 1 : 1
      listData.push({
        id,
        text
      })
    }
    wx.setStorageSync('listData', listData)
    wx.navigateBack()
  }
})

在edit.wxml中，编写以下代码：

<!-- edit.wxml -->
<view class="container">
  <input class="input" type="text" placeholder="请输入内容" value="{{text}}" bindinput="handleInput" />
  <button class="save-btn" bindtap="handleSave">保存</button>
</view>

在edit.wxss中，编写以下代码：

/* edit.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
}

.input {
  width: 80%;
  height: 80rpx;
  font-size: 16rpx;
  border-radius: 5rpx;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
  margin-bottom: 20rpx;
}

.save-btn {
  width: 80%;
  background-color: #4caf50;
  color: #fff;
  border-radius: 5rpx;
  padding: 10rpx
}

实现增删改查功能

在index.js中，添加以下代码：

// index.js
Page({
  data: {
    listData: []
  },
  onShow: function () {
    // 页面显示时，从本地缓存中获取数据，并更新数据
    const listData = wx.getStorageSync('listData') || []
    this.setData({
      listData
    })
  },
  handleAdd: function () {
    // 点击新增按钮，跳转到编辑页面
    wx.navigateTo({
      url: '/pages/edit/edit'
    })
  },
  handleEdit: function (e) {
    // 点击列表项，跳转到编辑页面，并携带id参数
    const id = e.currentTarget.dataset.id
    wx.navigateTo({
      url: `/pages/edit/edit?id=${id}`
    })
  },
  handleDelete: function (e) {
    // 点击删除按钮，删除该项数据，并更新本地缓存
    const id = e.currentTarget.dataset.id
    const listData = wx.getStorageSync('listData') || []
    const index = listData.findIndex(item => item.id === Number(id))
    listData.splice(index, 1)
    wx.setStorageSync('listData', listData)
    this.setData({
      listData
    })
  }
})

在index.wxml中，修改以下代码：

<!-- index.wxml -->
<view class="container">
  <button class="add-btn" bindtap="handleAdd">新增</button>
  <view class="list">
    <block wx:for="{{listData}}" wx:key="id">
      <view class="list-item" bindtap="handleEdit" data-id="{{item.id}}">
        <text class="text">{{item.text}}</text>
        <text class="delete" bindtap="handleDelete" data-id="{{item.id}}">删除</text>
      </view>
    </block>
  </view>
</view>

至此，一个简单的小程序用户列表增删改查功能就完成了。

展示最终效果

使用微信开发者工具打开项目，点击编译运行按钮，即可看到最终效果。

总结

本文介绍了开发微信小程序所需的基本知识，包括微信小程序的目录结构、项目创建、编码等方面。并以一个简单的用户列表增删改查功能为例，演示了如何在小程序中实现常见的增删改查操作。

需要注意的是，本文只是一个入门级别的示例，实际的小程序开发中可能会涉及更多的技术和知识，例如网络请求、数据绑定、组件开发等等。如果想要深入了解微信小程序开发，建议多阅读官方文档和相关书籍，积累更多的实战经验。

希望本文对初学者有所帮助，如果有任何问题或建议，欢迎留言讨论。

写在最后

✨原创不易，希望各位大佬多多支持。

👍点赞，你的认可是我创作的动力。

⭐️收藏，感谢你对本文的喜欢。

✏️评论，你的反馈是我进步的财富。