【轻松开发微信小程序】实现用户增删改查功能

news2024/11/16 5:24:20

文章目录

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

在这里插入图片描述

前言

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

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

在这里插入图片描述

创建微信小程序项目

首先，在微信开发者工具中，选择新建小程序项目，填写小程序名称、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>

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

展示最终效果

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

总结

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

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

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

写在最后

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

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/438870.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【UE】UE5 学习笔记

【UE】UE5 学习笔记

UE5 学习笔记&#xff08;持续更新中&#xff09; 界面 快捷键 快捷键描述F定位关一卡对象:双击游戏对象名字或选游戏对象名字鼠标中键移动视野alt鼠标左键移旋转视野滑动鼠标滚轮缩放视野alt鼠标右键拖动鼠标缩放视野鼠标左键移动鼠标前后漫游WASD鼠标右键自由漫游漫游时滑…
阅读更多...
【vue】插件集合

【vue】插件集合

一、复制粘贴vue-clipboard2 1、安装vue-clipboard2 npm install ue-clipboard2 2、main.js引入插件 // 复制 import VueClipboard from vue-clipboard2 Vue.use(VueClipboard) 3、页面使用 <el-buttonsize"mini"type"text"ref"copyButton&q…
阅读更多...
JAVAWeb06-动态WEB开发核心Servlet-02-ServletConfig/Context

JAVAWeb06-动态WEB开发核心Servlet-02-ServletConfig/Context

1. ServletConfig 1.1 ServletConfig 基本介绍 ServletConfig 类是为 Servlet 程序的配置信息的类Servlet 程序和 ServletConfig 对象都是由 Tomcat 负责创建Servlet 程序默认是第 1 次访问的时候创建&#xff0c;ServletConfig 在 Servlet 程序创建时&#xff0c;就创建一个…
阅读更多...
thinkphp5 线上部署后view-source:可以看到源码，但是http显示空白页面的原因及解决方法汇总

thinkphp5 线上部署后view-source:可以看到源码，但是http显示空白页面的原因及解决方法汇总

本篇文章主要讲解：thinkphp5 项目线上部署后view-source:可以看到源码，但是http显示空白页面的原因及解决方法教程 作者：任聪聪 日期：2023年4月17日 thinkphp版本5.1 现象说明： 线下测试环境，显示可以看到界面 部署到线上配置完毕后发现页面空白 在php中写入echo 1232…
阅读更多...
pytorch进阶学习（七）：神经网络模型验证过程中混淆矩阵、召回率、精准率、ROC曲线等指标的绘制与代码

pytorch进阶学习（七）：神经网络模型验证过程中混淆矩阵、召回率、精准率、ROC曲线等指标的绘制与代码

参考笔记 【机器学习】五分钟搞懂如何评价二分类模型&#xff01;混淆矩阵、召回率、精确率、准确率超简单解释&#xff0c;入门必看&#xff01;_哔哩哔哩_bilibili 混淆矩阵的概念_GIS_JH的博客-CSDN博客 机器学习中的混淆矩阵&#xff0c;准确率&#xff0c;精确率&#…
阅读更多...
[java]String类

[java]String类

String表示字符串类型。 注意c中没有表示字符串的类型。 String内部包含如下两个变量。 java中String结尾没有/0&#xff0c;java不需要/0标注结束位置。 str2代表指向的对象内容为空&#xff0c;str3代表不指向任何对象。 str1和str2指向对象不一样&#xff0c;所以不相等 可…
阅读更多...
在Linux中进行Jenkins-2.190的安装及使用

在Linux中进行Jenkins-2.190的安装及使用

Jenkins-2.190安装在公网IP为x.x.x.x的服务器上 环境准备 第一步&#xff0c;下载server-jre-8u202-linux-x64.tar.gz安装包。 登录地址&#xff1a;https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html下载server-jre-8u202-linux-x64.tar.gz…
阅读更多...
黑马程序员---微服务笔记【实用篇】

黑马程序员---微服务笔记【实用篇】

微服务技术栈导学 微服务实现流程&#xff1a; 所有要学的技术&#xff1a; 分层次教学&#xff1a; 具体分层&#xff1a; 实用篇---第一天 一、认识微服务 单体架构 将业务所有功能集中在一个项目中开发&#xff0c;打成一个包部署 优点&#xff1a;架构简单、部署成本低 …
阅读更多...
Linux系统编程（三）—— 文件编程（2）系统数据文件和信息

Linux系统编程（三）—— 文件编程（2）系统数据文件和信息

一、文件&#xff1a;/etc/passwd 这是 /etc/passswd 文件下的内容&#xff1a; &#xff08;1&#xff09;标准库函数&#xff1a;getpwuid( ) 和 getpwname( ) getpwuid( )函数是根据 uid 来找到系统用户的信息&#xff1b;getpwname( )函数是根据 name 来找到用户的信息&…
阅读更多...
机器学习 day04（梯度下降算法，学习率，偏导数，执行过程示意图）

机器学习 day04（梯度下降算法，学习率，偏导数，执行过程示意图）

1. 梯度下降 我们可以用一种更系统的方法&#xff0c;来找到一组w&#xff0c;b&#xff0c;使成本函数的值最小。这个方法叫梯度下降算法&#xff0c;它可用于最小化任何函数&#xff0c;不仅仅包括线性回归的成本函数&#xff0c;也包括两个以上参数的其他成本函数在线性回…
阅读更多...
C#：在datagridview中每行添加图片，点击图片删除整行

C#：在datagridview中每行添加图片，点击图片删除整行

今天要讲的是关于datagridview中的操作。 首先现在winform界面中拉取一个datagridview控件&#xff0c;如下图所示&#xff1a; 然后需要在控件中添加如下图所示的三列数据&#xff1a; 其中第一列的数据类型选择如下图所示的DataGridViewImageColumn&#xff0c;另外两列的数…
阅读更多...
基于matlab使用 CSI-RS 的 NR 下行链路发射端波束细化

基于matlab使用 CSI-RS 的 NR 下行链路发射端波束细化

一、前言 此示例演示了使用 5G 工具箱中的信道状态信息参考信号 &#xff08;CSI-RS&#xff09; 的下行链路发射端波束细化过程。该示例展示了如何在散射环境中向不同方向传输多个CSI-RS资源&#xff0c;以及如何根据参考信号接收功率&#xff08;RSRP&#xff09;测量结果选择…
阅读更多...
PHP调用api接口，电商平台商品详情API接口（封装可高并发）

PHP调用api接口，电商平台商品详情API接口（封装可高并发）

PHP传递参数 1、通过GET方式接收调用api接口传递的参数。 2、使用switch语句&#xff0c;当GET接收到不同的值时&#xff0c;调用不同的函数。 3、分别创建one(&#xff09;&#xff0c;two()&#xff0c;three()三个函数用于返回api接口调用后返回的数据。 4、在浏览器打开…
阅读更多...
反弹shell原理与实现

反弹shell原理与实现

一、什么是反弹shell&#xff1f; 反弹shell&#xff08;Reverse Shell&#xff09;是一种常用于网络攻击中的技术&#xff0c;其目的是让攻击者通过远程控制程序获取被攻击计算机的权限。反弹shell技术通常是通过在受害者计算机上运行一个程序&#xff08;称为“后门”&#…
阅读更多...
CF55D-Beautiful numbers （数位dp）

CF55D-Beautiful numbers （数位dp）

l c m ( 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ) 2520 lcm(1,2,3,4,5,6,7,8,9)2520 lcm(1,2,3,4,5,6,7,8,9)2520 若 x x x 能被它自己的所有非零位的数字整除&#xff0c;即能被它们的最小公倍数整除&#xff0c; x ≡ 0 ( m o d l c m ( { d i g i t [ i ] } ) ) x \equiv 0…
阅读更多...
十大常见行业 BI 可视化应用

十大常见行业 BI 可视化应用

智能商业指的是利用互联网、物联网、自动化、人工智能等新一代信息技术&#xff0c;在一定程度上对市场判断、发展决策、业务复盘、业务预测等商业行为实现智能化、自动化&#xff0c;整个过程基本不需要人类参与。 很多企业部署了商业智能BI系统&#xff0c;这是一种包含了数…
阅读更多...
Node 02-fs模块

Node 02-fs模块

fs 模块 fs 全称为 file system &#xff0c;称之为 文件系统 &#xff0c;是 Node.js 中的 内置模块 &#xff0c;可以对计算机中的磁盘进行操作。 本章节会介绍如下几个操作&#xff1a; 文件写入文件读取文件移动与重命名文件删除文件夹操作查看资源状态 文件写入 文件写入…
阅读更多...
ubuntu常用命令

ubuntu常用命令

查询进程&#xff1a; ps -ef 杀死进程 kill -9 killall -9 chrome killall chromedriver 杀死所有chrome ps ef 查看运行的任务 ps -ef | grep python top 查看运行任务详情 后台启动Python脚本 可以使用下面的命令来启动上面的脚本&#xff0c;让Python在后台运行。 nohup…
阅读更多...
Matlab论文插图绘制模板第87期—模值赋色的三维箭头图

Matlab论文插图绘制模板第87期—模值赋色的三维箭头图

在之前的文章中&#xff0c;分享了Matlab三维箭头图的绘制模板&#xff1a; 进一步&#xff0c;如果我们想对每一个箭头赋上颜色&#xff0c;以更加直观地表示其模值的大小&#xff0c;该怎么操作呢&#xff1f; 那么&#xff0c;来看一下模值赋色的三维箭头图的绘制模板。 先…
阅读更多...
设计模式 -- 多例模式

设计模式 -- 多例模式

前言 月是一轮明镜,晶莹剔透,代表着一张白纸(啥也不懂) 央是一片海洋,海乃百川,代表着一块海绵(吸纳万物) 泽是一柄利剑,千锤百炼,代表着千百锤炼(输入输出) 月央泽,学习的一种过程,从白纸->吸收各种知识->不断输入输出变成自己的内容 希望大家一起坚持这个过程,也同…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023