微信小程序（四十八）登入页面跳转与回跳

注释很详细，直接上代码

新增内容：

1.在组件中获取当前页面的路由并通过参数传递给登入页面

2.提取传递的参数并在登入成功以后从登入页面回跳到原页面

源码：

app.js

js 复制代码

App({
  globalData:{//定义全局变量
     isLoad:false
  }
 })

app.json

json 复制代码

{
  "usingComponents": {
    "auth":"/components/auth/auth"
  },
  "pages": [
    "pages/index/index",
    "pages/begin/begin",
    "pages/start/start"
  ]
}

/components/auth/auth.wxml

xml 复制代码

<!-- 使用properties参数（是否登入） -->
<slot wx:if="{{isLoad}}"></slot>

/components/auth/auth.js

js 复制代码

Component({
  behaviors: [],
  properties: {
    isLoad: {//接收参数（是否登入）
      type: Boolean,
      value: false
    }
  },
  lifetimes: {
    created() {//因为功能限制太多了，所以一般都不用这个
      
    },
    attached() {//这个比较常用
      const app=getApp()

      //如果没有登入
      if(!app.globalData.isLoad){
        const nowPages=getCurrentPages()
        const {route}=nowPages.pop()

        wx.redirectTo({//带参重定向
          url: '/pages/index/index?redirectUrl=/'+route,
        })

        //不延时弹窗提示会卡没
        setTimeout(()=>{
          wx.showToast({
            title: '未登入，已跳转到登入页面，请先登入！',
            icon:'none'
          })
        },1000)
        
      }
    },
    moved() {

    },
    detached() {

    },
  methods: {
    
  }
}
})

start.wxml

xml 复制代码

<button bind:tap="onTap" type="primary">进入需要登入才能看的页面</button>

start.js

js 复制代码

// pages/start/start.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  onTap(){
    wx.redirectTo({//跳转到登入页面
      url: '/pages/begin/begin',
    })
  }
})

begin.wxml

xml 复制代码

<auth isLoad="{{isLoad}}"><!-- 传输参数（是否登入） -->
  <view class="tip">
  登入以后可以查看的内容
  </view>
</auth>

begin.wxss

css 复制代码

.tip{
  font-size: 60rpx;
  color:palegreen; 
  margin-top: 200rpx;
  padding: 0rpx 30rpx;
  background-color: bisque;
}

begin.js

js 复制代码

// pages/begin/begin.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //参数：是否登入
    isLoad:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   //进入这个页面同步登入状态
   const app=getApp()

   this.setData({
     isLoad:app.globalData.isLoad
   })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

index.wxml

xml 复制代码

<button type="primary" bind:tap="inLoad">登入</button>

index.js

js 复制代码

Page({
  data:{
    isLoad:false,
    redirectUrl:''
  },
  onLoad({redirectUrl}){//接收并解构重定向参数
    // console.log(redirectUrl)

    this.setData({//存储跳转之前的页面
      redirectUrl:redirectUrl
    })
  },

  //登入
  inLoad(){
    //修改全局变量为true
    const app=getApp()
    app.globalData.isLoad=true
    //console.log(app.globalData.isLoad)
    
    this.setData({//修改页面数据
      isLoad:app.globalData.isLoad
    })

    //登入以后跳转到之前的页面
    wx.redirectTo({
      url: this.data.redirectUrl
     })
  }
})

效果演示：