微信小程序实现增删改查功能代码

以下是一个简单的微信小程序实现增删改查功能的示例代码：

1. 在 `pages` 文件夹下新建一个名为 `index` 的页面，并在 `index` 文件夹下新建 `index.js`、`index.wxml`、`index.wxss` 三个文件。

2. 在 `index.js` 文件中实现增删改查功能的代码：

Page({
  data: {
    list: [], // 列表数据
    inputVal: '', // 输入框的值
    curIndex: -1, // 当前编辑的下标，默认为-1，表示未编辑
  },

  // 页面加载时，从本地存储中读取列表数据
  onLoad: function () {
    let list = wx.getStorageSync('list') || [];
    this.setData({
      list: list
    })
  },

  // 输入框值改变时，更新data中的inputVal
  inputChange: function (e) {
    this.setData({
      inputVal: e.detail.value
    })
  },

  // 添加数据
  addData: function () {
    let inputVal = this.data.inputVal.trim();
    if (inputVal === '') {
      wx.showToast({
        title: '请输入内容',
        icon: 'none'
      })
      return;
    }
    let list = this.data.list;
    let obj = {
      content: inputVal,
      isEdit: false
    }
    list.push(obj);
    this.setData({
      list: list,
      inputVal: ''
    })
    wx.setStorageSync('list', list);
  },

  // 删除数据
  delData: function (e) {
    let index = e.currentTarget.dataset.index;
    let list = this.data.list;
    list.splice(index, 1);
    this.setData({
      list: list
    })
    wx.setStorageSync('list', list);
  },

  // 编辑数据
  editData: function (e) {
    let index = e.currentTarget.dataset.index;
    let list = this.data.list;
    for (let i = 0; i < list.length; i++) {
      if (i === index) {
        list[i].isEdit = true;
      } else {
        list[i].isEdit = false;
      }
    }
    this.setData({
      list: list,
      inputVal: list[index].content,
      curIndex: index
    })
  },

  // 确认编辑数据
  confirmEdit: function () {
    let inputVal = this.data.inputVal.trim();
    if (inputVal === '') {
      wx.showToast({
        title: '请输入内容',
        icon: 'none'
      })
      return;
    }
    let index = this.data.curIndex;
    let list = this.data.list;
    list[index].content = inputVal;
    list[index].isEdit = false;
    this.setData({
      list: list,
      inputVal: '',
      curIndex: -1
    })
    wx.setStorageSync('list', list);
  },

  // 取消编辑数据
  cancelEdit: function () {
    let index = this.data.curIndex;
    let list = this.data.list;
    list[index].isEdit = false;
    this.setData({
      list: list,
      inputVal: '',
      curIndex: -1
    })
  }
})

3. 在 `index.wxml` 文件中实现页面布局：

<view class="container">
  <view class="input-wrapper">
    <input type="text" placeholder="请输入内容" value="{{inputVal}}" bindinput="inputChange" />
    <button class="btn-add" bindtap="addData">添加</button>
  </view>
  <view class="list-wrapper">
    <view wx:for="{{list}}" wx:key="index" class="list-item">
      <view class="content" wx:if="{{!item.isEdit}}">{{item.content}}</view>
      <input class="edit-input" wx:if="{{item.isEdit}}" type="text" value="{{inputVal}}" bindinput="inputChange" />
      <view class="btn-wrapper">
        <button class="btn-edit" wx:if="{{!item.isEdit}}" bindtap="editData" data-index="{{index}}">编辑</button>
        <button class="btn-confirm" wx:if="{{item.isEdit}}" bindtap="confirmEdit">确认</button>
        <button class="btn-cancel" wx:if="{{item.isEdit}}" bindtap="cancelEdit">取消</button>
        <button class="btn-del" bindtap="delData" data-index="{{index}}">删除</button>
      </view>
    </view>
  </view>
</view>

4. 在 `index.wxss` 文件中实现页面样式：

.container {
  padding: 20rpx;
}

.input-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

input {
  flex: 1;
  height: 40rpx;
  padding: 0 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 4rpx;
}

.btn-add {
  width: 80rpx;
  height: 40rpx;
  margin-left: 10rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4rpx;
}

.list-wrapper {
  display: flex;
  flex-direction: column;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 4rpx;
  margin-bottom: 10rpx;
}

.content {
  flex: 1;
}

.edit-input {
  flex: 1;
  height: 40rpx;
  padding: 0 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 4rpx;
}

.btn-wrapper {
  display: flex;
  align-items: center;
}

.btn-edit,
.btn-confirm,
.btn-cancel,
.btn-del {
  width: 60rpx;
  height: 30rpx;
  margin-left: 10rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4rpx;
}

以上就是一个简单的微信小程序实现增删改查功能的示例代码，你可以根据自己的需求进行修改和扩展。