【轻松开发微信小程序】实现用户增删改查功能 |
您所在的位置：网站首页 › 微信小程序云开发模板页面要删除吗 › 【轻松开发微信小程序】实现用户增删改查功能 |
【轻松开发微信小程序】实现用户增删改查功能
文章目录
人工智能福利文章前言创建微信小程序项目创建项目目录结构编写首页页面编写编辑页面实现增删改查功能展示最终效果总结脑筋急转弯小程序抢先体验程序员专属工具箱
✍创作者：全栈弄潮儿 🏡 个人主页： 全栈弄潮儿的个人主页 🏙️ 个人社区，欢迎你的加入：全栈弄潮儿的个人社区 📙 专栏地址：小程序从入门到精通 人工智能福利文章 【分享几个国内免费可用的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.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中，编写以下代码： 添加 |
【本文地址】
今日新闻 |
推荐新闻 |