黃秀傑小程式入門佳品——增刪改查+頁面跳轉+傳值取值+佈局樣式 .

分類管理

列表頁js

1. var Bmob = require('../../utils/bmob.js');var that;
2. Page({
3. onLoad: function () {
4. that = this;
5. },
6. onShow: function () {
7. that.loadCategories();
8. },
9. loadCategories: function () {
10. var query = new Bmob.Query('Category');
11. query.limit(Number.Max_VALUE);
12. query.find().then(function (categories) {
13. console.log(categories);
14. that.setData({
15. categories: categories
16. });
17. });
18. },
19. add: function () {
20. // 跳轉新增頁面
21. wx.navigateTo({
22. url: '../add/add'
23. });
24. },
25. })

可以看到，上面使用了onShow代替了onLoad作為載入請求loadCategories，這是因為考慮到新增完畢後會有返回上頁，能和自重新整理最新資料。

相應的佈局頁面

2. class="item" wx:for="{{categories}}" wx:key="">
3. <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}}
6. <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="add-category" bindtap="add">
7. <image< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> src="/images/add.png" class="icon" />
8. <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="caption">新增分類

列表頁跳轉可以使用代替的bindtap，這樣更簡潔一些；而底部的新增按鈕使用position: fixed固定底部；wx:for迴圈提供objectId作為引數，以傳遞給編輯頁面。

編輯頁面

1. var Bmob = require('../../utils/bmob.js');var that;
2. Page({
3. onLoad: function (options) {
4. that = this;
5. if (options.objectId) {
6. // 快取資料
7. that.setData({
8. isEdit: true,
9. objectId: options.objectId
10. });
11. // 請求待編輯的分類物件
12. var query = new Bmob.Query('Category');
13. query.get(that.data.objectId).then(function (category) {
14. that.setData({
15. category: category
16. });
17. });
18. }
19. },
20. add: function (e) {
21. var form = e.detail.value;
22. if (form.title == '') {
23. wx.showModal({
24. title: '請填寫分類名稱',
25. showCancel: false
26. });
27. return;
28. }
29. // 新增或者修改分類
30. var category = new Bmob.Object('Category');
31. // 修改模式
32. if (that.data.isEdit) {
33. category = that.data.category;
34. }
35. category.set('title', form.title);
36. category.save().then(function (updatedCategory) {
37. // that.setData({
38. // category: updatedCategory
39. // });
40. // 操作成功提示並返回上一頁
41. wx.showModal({
42. title: that.data.isEdit ? '修改成功' : '新增成功',
43. showCancel: false,
44. success: function () {
45. wx.navigateBack();
46. }
47. });
48. });
49. },
50. delete: function () {
51. // 確認刪除對話方塊
52. wx.showModal({
53. title: '確認刪除',
54. success: function (res) {
55. if (res.confirm) {
56. var category = that.data.category;
57. category.destroy().then(function (result) {
58. wx.showModal({
59. title: '刪除成功',
60. showCancel: false,
61. success: function () {
62. wx.navigateBack();
63. }
64. });
65. });
66. }
67. }
68. });
69. }
70. })

通過onLoad事件的options回撥接受objectId引數，如果存在代表是編輯狀態，反之新增

新增頁面，通過form取值，bindtap事件中，通用e.detail.value拿到form物件

wx.showModal，帶參showCancel決定取消按鈕是不是顯示，點選確認或取消按鈕支援回撥，而showToast雖然能回撥，但在wx.navigateBack()同時併發，導致會看不清Toast上的文字就返回到上一頁了，所以基本都改用showModal了。res.confirm代表使用者點選了確認按鈕而非取消按鈕。

編輯頁面佈局

2. <form< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> onsubmit="add">
3. <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="item">
4. <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="title">分類名稱
5. <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="subtitle">
6. <input< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> type="text" name="title" value="{{category.title}}" placeholder="請填寫分類名稱" />
9. <view< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> class="buttons">
10. <button< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> wx:if="{{isEdit}}" class="delete" bindtap="delete">刪除
11. <button< span="" style="word-wrap: break-word; margin: 0px; padding: 0px;"> form-type="submit" class="confirm">{{isEdit ? '修改' : '新增'}}

判斷是不是編輯狀態isEdit，分別顯示修改或新增樣式，相應的事件也有不同，分別對應onsubmit方法與delete方法。 
編輯頁樣式

1. /*每行*/
2. .item {
3. align-items: center;
4. border-bottom: 1px solid #eee;
5. background: white;
6. margin-left: 0;
7. }
8. /*確認按鈕*/
9. .confirm {
10. background: #4cd964;
11. color: white;
12. margin: 10px;
13. flex: 1;
14. }
15. /*刪除按鈕*/
16. .delete {
17. background: #da634f;
18. color: white;
19. margin: 10px;
20. flex: 1;
21. }
22. /*標題與文字框1/3開*/
23. .title {
24. flex: 1;
25. }
26. .subtitle {
27. flex: 3;
28. }
29. /*編輯與新增按鈕*/
30. .buttons {
31. display: flex;
32. flex-direction: row;
33. }

文字標籤與input標記，使用flex，1: 3比例對開，編輯與刪除則1: 1對半開