如何记录uni-app的tabbar历史记录

	onTabItemTap(e) {
		let isLogin = uni.getStorageSync('isLogin')
		if (!isLogin) {
			let cMenu = '/pages/task/task'
			let tabBarRecords = uni.getStorageSync('tabBarRecords')&&uni.getStorageSync('tabBarRecords').slice(-5)
			if (!tabBarRecords) {
				tabBarRecords = []
			}
			tabBarRecords.push(cMenu)
			uni.setStorageSync('tabBarRecords', tabBarRecords)
			let length = tabBarRecords.length
			this.needBack = tabBarRecords[length - 2]
			uni.navigateTo({
				url: '/pages/login/login?needBack=' + this.needBack
			});
		}
	},

uni-app下方的tab项都触发这个一级钩子,把这个保持在数组中。截取最后的5位。可以返回。

另外登录页面是这样的。

<script>
import { postLoginWxMinAPI } from '../../api/api.js'
export default {
  data() {
    return {
      tips: '',
      value: '',
      needBack: '', //是否需要返回原理的页面
      checkList: [],
      checked: false,
      disabled: false,
      code: "",
      taskId: "",
      form: {
        mobile: '',
        code: ''
      },
    }
  },
  components: {
  },
  onLoad(options) {
    this.needBack = options.needBack ? options.needBack : ''
    this.taskId = options.taskId ? options.taskId : ''
  },
  methods: {
    checkboxChange(n) {
      console.log('change', n);
    },
    clickWay() {
      if (this.checkList.length == 0) {
        this.$toast('请先阅读并同意协议');
        return
      }
    },
    async onGetphonenumber(ev) {
      const { code } = ev.detail
      const params = {
        code: code,
        platform: 'wx',
        client_id: "myjszl",
        client_secret: '123',
        grant_type: "wx_code"
      }
      await postLoginWxMinAPI(params, { header: { 'content-type': 'application/x-www-form-urlencoded' }, custom: { auth: false } }).then((res) => {
        uni.setStorageSync('accessToken', res.accessToken);
        uni.setStorageSync('personalId', res.userInfo.userId);
        uni.setStorageSync('isLogin', true);
        uni.setStorageSync('hostoryArr', undefined)
      }).catch(() => {
      })
      if (this.needBack) {
        let tabList = ['/pages/mine/mine', '/pages/index/index']
        if (tabList.includes(this.needBack)) {
          uni.switchTab({
            url: this.needBack
          });
        } else if (this.needBack == '/pages/task/task') {
          // 获取当前页面的路由信息
          uni.switchTab({
            url: this.needBack
          });
        } else {
          uni.navigateTo({
            url: this.needBack + '?taskId=' + this.taskId
          })
        }
      } else {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }


    },
    goPage(url) {
      uni.navigateTo({ url: '/pages/' + url })
    },
    phoneLogin() {
      if (this.checkList.length == 0) {
        this.$toast('请先阅读并同意协议');
        return
      }
      uni.navigateTo({
        url: '/pages/login/loginMa?needBack=' + this.needBack + '&taskId=' + this.taskId
      })
    }
  },
  onUnload() {
    if (this.needBack) {
      let tabList = ['/pages/mine/mine', '/pages/index/index']
      if (tabList.includes(this.needBack)) {
        uni.switchTab({
          url: this.needBack
        });
      } else if (this.needBack == '/pages/task/task') {
        uni.navigateBack({
          delta: 1
        })
      } else {
        uni.navigateTo({
          url: this.needBack + '?taskId=' + this.taskId
        })
      }
    } else {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  }

}
</script>

<template>
  <view class="login-page dstyle">
    <view class="bc-box col-center">
      <image class="logo" src="../../static/logo.png" mode="scaleToFill" />
      <image class="kouhao" src="../../static/kouhao.png" mode="scaleToFill" />
    </view>
    <view class="tips row-center">
      <u-checkbox-group v-model="checkList" size="18px" @change="checkboxChange">
        <u-checkbox></u-checkbox>
      </u-checkbox-group>
      <view style="font-size: 22rpx;" class="row-center">
        我已阅读并同意 <view class="link" @click="goPage('privacyPolicy/privacyPolicy')">《隐私政策》</view><view class="link"
          @click="goPage('userAgreement/userAgreement')">《用户服务协议》</view>
      </view>
    </view>
    <view class="login">
      <!-- 小程序端授权登录 -->
      <!-- #ifdef MP-WEIXIN  -->
      <view class="btn-key" v-if="checkList.length == 0" @click="clickWay">
        <button class="button row-center">
          <view class="iconfont icon-weixin wxchat"></view>
          <text class="wenzi">微信一键登录</text>
        </button>
      </view>
      <view class="btn-key" v-if="checkList.length > 0">
        <button class="button row-center" open-type="getPhoneNumber" @getphonenumber="onGetphonenumber">
          <view class="iconfont icon-weixin wxchat"></view>
          <text class="wenzi">微信一键登录</text>
        </button>
      </view>

      <!-- #endif -->
    </view>
    <view class="phone-login row-center" @click="phoneLogin()">
      <view class="iconfont icon-shoujihao phone"></view>
      <text class="wenzi">手机号登录</text>
    </view>
  </view>
</template>


<style lang="scss">
page {
  height: 100%;
}

.login-page {
  box-sizing: border-box;
  // border: solid 1px rebeccapurple;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 750rpx;
  height: 100vh;

  .bc-box {
    // border: brown solid 1px;
    height: 800rpx;
    width: 750rpx;
    // background:  url('../../static/logo.png');
    background-image: url('https://xdr-applet.oss-cn-beijing.aliyuncs.com/pao.png');
    background-size: 100% 100%;

    .logo {
      margin-top: 204rpx;
      width: 296rpx;
      height: 95rpx;
    }

    .kouhao {
      margin-top: 88rpx;
      width: 346rpx;
      height: 65rpx;

    }

  }

  .tips {
    margin-top: 115rpx;
  }

  .login {
    margin-top: 43rpx;

    .button {
      width: 600rpx;
      height: 100rpx;
      background: #009944;
      border-radius: 50rpx;
      justify-content: center;
      // border: saddlebrown 1px solid;

      .wxchat {
        // border: saddlebrown 1px solid;
        // width: 38rpx;
        // height: 38rpx;
        color: #FFFFFF;
        font-size: 36rpx;
      }

      .wenzi {
        margin-left: 10rpx;
        font-size: 36rpx;
        font-family: PingFang TC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }

  .phone-login {
    margin-top: 20rpx;
    width: 600rpx;
    height: 100rpx;
    line-height: 100rpx;
    // text-align: center;
    justify-content: center;
    background: #3C89FE;
    border-radius: 50rpx;
    font-size: 36rpx;
    font-family: PingFang TC;
    font-weight: 400;
    color: #FFFFFF;
  }
}
</style>
  • 12
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值