微信小程序入门 ——增删改查+页面跳转+传值取值+布局样式

**目标场景
**分类管理

技术点
读取分类列表

点击某分类进入编辑页，操作编辑与删除

点击列表页底部按钮，跳转添加，共用编辑页

效果

列表页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对半开