**目标场景
**分类管理
技术点
读取分类列表
点击某分类进入编辑页，操作编辑与删除
点击列表页底部按钮，跳转添加，共用编辑页
效果
列表页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="">
class="title" url="../add/add?objectId={{item.objectId}}" open-type="navigate" hover-class="none">{{item.title}}
class="add-category" bindtap="add">
src="/images/add.png" class="icon" />
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代表用户点击了确认按钮而非取消按钮。
编辑页面布局
onsubmit="add">
class="item">
class="title">分类名称
class="subtitle">
type="text" name="title" value="{{category.title}}" placeholder="请填写分类名称" />
class="buttons">
wx:if="{{isEdit}}" class="delete" bindtap="delete">删除
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对半开
