黄秀杰小程序入门佳品——增删改查+页面跳转+传值取值+布局样式 .

技术点：读取分类列表点击某分类进入编辑页，操作编辑与删除点击列表页底部按钮，跳转添加，共用编辑页

目标场景 分类管理 技术点 读取分类列表 点击某分类进入编辑页，操作编辑与删除 点击列表页底部按钮，跳转添加，共用编辑页 效果 列表页js var Bmob = require('../../utils/bmob.js');var that; Page({ onLoad: function () { that = this; }, onShow: function () { that.loadCategories(); }, loadCategories: function () { var query = new Bmob.Query('Category'); query.limit(Number.Max_VALUE); query.find().then(function (categories) { console.log(categories); that.setData({ categories: categories }); }); }, add: function () { // 跳转添加页面 wx.navigateTo({ url: '../add/add' }); }, }) 可以看到，上面使用了onShow代替了onLoad作为加载请求loadCategories，这是因为考虑到添加完毕后会有返回上页，能和自刷新最新数据。 相应的布局页面 class="item" wx:for="{{categories}}" wx:key=""> <navigator< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="title" url="../add/add?objectId={{item.objectId}}" open-type="navigate" hover-class="none">{{item.title}} <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="add-category" bindtap="add"> <image< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> src="/images/add.png" class="icon" /> <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="caption">新增分类 列表页跳转可以使用代替的bindtap，这样更简洁一些；而底部的添加按钮使用position: fixed固定底部；wx:for循环提供objectId作为参数，以传递给编辑页面。 编辑页面 var Bmob = require('../../utils/bmob.js');var that; Page({ onLoad: function (options) { that = this; if (options.objectId) { // 缓存数据 that.setData({ isEdit: true, objectId: options.objectId }); // 请求待编辑的分类对象 var query = new Bmob.Query('Category'); query.get(that.data.objectId).then(function (category) { that.setData({ category: category }); }); } }, add: function (e) { var form = e.detail.value; if (form.title == '') { wx.showModal({ title: '请填写分类名称', showCancel: false }); return; } // 添加或者修改分类 var category = new Bmob.Object('Category'); // 修改模式 if (that.data.isEdit) { category = that.data.category; } category.set('title', form.title); category.save().then(function (updatedCategory) { // that.setData({ // category: updatedCategory // }); // 操作成功提示并返回上一页 wx.showModal({ title: that.data.isEdit ? '修改成功' : '添加成功', showCancel: false, success: function () { wx.navigateBack(); } }); }); }, delete: function () { // 确认删除对话框 wx.showModal({ title: '确认删除', success: function (res) { if (res.confirm) { var category = that.data.category; category.destroy().then(function (result) { wx.showModal({ title: '删除成功', showCancel: false, success: function () { wx.navigateBack(); } }); }); } } }); } }) 通过onLoad事件的options回调接受objectId参数，如果存在代表是编辑状态，反之添加 添加页面，通过form取值，bindtap事件中，通用e.detail.value拿到form对象 wx.showModal，带参showCancel决定取消按钮是不是显示，点击确认或取消按钮支持回调，而showToast虽然能回调，但在wx.navigateBack()同时并发，导致会看不清Toast上的文本就返回到上一页了，所以基本都改用showModal了。res.confirm代表用户点击了确认按钮而非取消按钮。 编辑页面布局 <form< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> onsubmit="add"> <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="item"> <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="title">分类名称 <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="subtitle"> <input< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> type="text" name="title" value="{{category.title}}" placeholder="请填写分类名称" /> <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="buttons"> <button< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> wx:if="{{isEdit}}" class="delete" bindtap="delete">删除 <button< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> form-type="submit" class="confirm">{{isEdit ? '修改' : '添加'}} 判断是不是编辑状态isEdit，分别显示修改或添加样式，相应的事件也有不同，分别对应onsubmit方法与delete方法。  编辑页样式 /*每行*/ .item { align-items: center; border-bottom: 1px solid #eee; background: white; margin-left: 0; } /*确认按钮*/ .confirm { background: #4cd964; color: white; margin: 10px; flex: 1; } /*删除按钮*/ .delete { background: #da634f; color: white; margin: 10px; flex: 1; } /*标题与文本框1/3开*/ .title { flex: 1; } .subtitle { flex: 3; } /*编辑与添加按钮*/ .buttons { display: flex; flex-direction: row; } 文本标签与input标记，使用flex，1: 3比例对开，编辑与删除则1: 1对半开