上一章节我们讲了本地选择图片并上传到服务器。
这一章节我们讲解如何发布打卡,打卡之后我们应该如何处理跳转页面。
给按钮绑定点击事件
<view class="released-btn">
<button bindtap="submit">发布打卡</button>
</view>
发布打卡的标准是:
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种方法。
关闭当前页面,跳转到应用内某个页面。但是不允许跳到 tabbar 页面。
何为 tabbar 页面?
就是在 app.json
里面的 tabBar
属性定义了的页面。
参数:
let id = 1;
let type = "string"
wx.redirectTo({
url:'/pages/list/list?id='+id + '&type='+ type
})
//就是说我们在跳到衣品圈页面的时候,会关闭当前的发布打卡页
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
参数:
//app.json
"tabBar": {
"list": [{
"pagePath": "index",
"text": "首页"
}]
}
//xx.js
wx.switchTab({
url: '/index'
})
关闭所有页面,打开到应用内的某个页面。
参数:
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。「小程序中页面栈最多十层。」
参数:
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages
获取当前的页面栈,决定需要返回几层。
参数:
至此发布打卡页的知识点跟业务逻辑我们全部讲完了,下一章节我们讲解衣品圈列表页。