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

目标场景

分类管理

技术点

• 读取分类列表

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

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

效果

列表页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，这是因为考虑到添加完毕后会有返回上页，能和自刷新最新数据。

相应的布局页面

    
    {{item.title}}



    
    新增分类

列表页跳转可以使用代替的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代表用户点击了确认按钮而非取消按钮。

编辑页面布局

    
        分类名称
        
            
        
    
    
        删除
        {{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对半开

很多朋友好奇我是做什么的，事实上我目前全职做开源，有心者可以赞赏，方便的话，请留下大名。

cash.jpg

源码下载：关注公众号【黄秀杰】，回复112。本文代码涉及代码位于admin-dev分支下的category文件夹。