发布打卡与小程序路由—小程序入门与实战【十九】

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

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

发布打卡请求

给按钮绑定点击事件

<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()
       })
   }

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

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

image

我们先新建这个页面,路径为 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:接口调用失败的回调函数

总结

  • 发布打卡
  • 小程序路由

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