上一章节我们讲了本地选择图片并上传到服务器。

这一章节我们讲解如何发布打卡，打卡之后我们应该如何处理跳转页面。

发布打卡请求

给按钮绑定点击事件

<view class="released-btn">
    <button bindtap="submit">发布打卡</button>
</view>

发布打卡的标准是：

• 必须填写 “新鲜事...”，且文字不能多于50字。
• 必须上传照片

submit(){
        let description = this.data.describe;
        let img_list = this.data.imgList;
        let message = '';
        if (!description) {
            message = "请填写描述文字";
        } else if(description.length > 50){
            message = "请填写少于50字"
        } else if (!img_list.length) {
            message = "请至少上传一张图片"
        }
        if(message){
            wx.showModal({
                content: message,
                showCancel: false
            })
        } else {
            //请求
            this.postpunchCard(description,img_list)
        }

    },
    //发送打卡请求
    postpunchCard(description,imgList){
        wx.showLoading({
            title: "正在发布",
            mask: true
        });
        let token = wx.getStorageSync('user_token');
        sandBox.post({
            api:'api/sir/punch/card',
            data:{
                description:description,
                img_list:imgList,
                type:0
            },
            header:{
                Authorization: token
        }

        }).then(res=>{
           res = res.data;
           if(res.status){
               wx.showModal({
                   content: '打卡成功',
                   showCancel: false,
                   success: res => {
                       if (res.confirm || (!res.cancel && !res.confirm)) {

                       }
                   }
               })
           } else {
               wx.showModal({
                   content: res.message || "打卡失败，请重试",
                   showCancel: false,
               })
           }
           wx.hideLoading()
        }).catch(rej=>{
            wx.showModal({
                content: rej.message || "内部错误，请重试",
                showCancel: false,
            })
            wx.hideLoading()
        })
    }

从函数可以看出，我们在完成发布打卡接口请求成功之后，我们只弹出了一个模态框，点击模态框的确认之后我们没有做任何的处理，那我们应该要干嘛呢？

看设计稿，是发布打卡之后我们应该跳到衣品圈这个页面。

我们先新建这个页面，路径为 pages/list/list,然后我们需要跳转到这个页面。

代码如下所示：

wx.redirectTo({
url:'/pages/list/list'
})

路由

小程序跳转页面有5种方法。

wx.redirectTo

关闭当前页面，跳转到应用内某个页面。但是不允许跳到 tabbar 页面。

何为 tabbar 页面?

就是在 app.json里面的 tabBar 属性定义了的页面。

参数：

• url：需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。

let id = 1;
let type = "string"
wx.redirectTo({
url:'/pages/list/list?id='+id + '&type='+ type
})

//就是说我们在跳到衣品圈页面的时候，会关闭当前的发布打卡页

• success：接口调用成功的回调函数
• fail：接口调用失败的回调函数

wx.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

参数：

• url：需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。

//app.json
"tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    }]
    }
    
//xx.js
wx.switchTab({
  url: '/index'
})

• success：接口调用成功的回调函数
• fail：接口调用失败的回调函数

wx.reLaunch

关闭所有页面，打开到应用内的某个页面。

参数：

• url：需要跳转的应用内页面路径
• success：接口调用成功的回调函数
• fail：接口调用失败的回调函数

wx.navigateTo

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。「小程序中页面栈最多十层。」

参数：

• url：需要跳转的应用内非 tabBar 的页面的路径
• events：页面间通信接口，用于监听被打开页面发送到当前页面的数据
• success：接口调用成功的回调函数
• fail：接口调用失败的回调函数

wx.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

参数：

• delta：返回的页面数，如果 delta 大于现有页面数，则返回到首页。
• success：接口调用成功的回调函数
• fail：接口调用失败的回调函数

总结

• 发布打卡
• 小程序路由

至此发布打卡页的知识点跟业务逻辑我们全部讲完了，下一章节我们讲解衣品圈列表页。