人工智能福利文章

【分享几个国内免费可用的ChatGPT镜像】
【10几个类ChatGPT国内AI大模型】
【用《文心一言》1分钟写一篇博客简直yyds】
【用讯飞星火大模型1分钟写一个精美的PPT】

前言

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

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

在这里插入图片描述

创建微信小程序项目

首先，在微信开发者工具中，选择新建小程序项目，填写小程序名称、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.idwx.navigateTo({url: `/pages/edit/edit?id=${id}`,})},deleteData: function (e) {// 删除数据const id = e.currentTarget.dataset.idconst 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.dataif (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 : 1listData.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.idwx.navigateTo({url: `/pages/edit/edit?id=${id}`})},handleDelete: function (e) {// 点击删除按钮，删除该项数据，并更新本地缓存const id = e.currentTarget.dataset.idconst 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>