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

本文主要是介绍微信小程序（四十八）登入页面跳转与回跳，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

注释很详细，直接上代码

新增内容：

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

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

源码：

app.js

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

app.json

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

/components/auth/auth.wxml

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

/components/auth/auth.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

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

start.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

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

begin.wxss

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

begin.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

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

index.js

Page({data:{isLoad:false,redirectUrl:''},onLoad({redirectUrl}){//接收并解构重定向参数// console.log(redirectUrl)this.setData({//存储跳转之前的页面redirectUrl:redirectUrl})},//登入inLoad(){//修改全局变量为trueconst app=getApp()app.globalData.isLoad=true//console.log(app.globalData.isLoad)this.setData({//修改页面数据isLoad:app.globalData.isLoad})//登入以后跳转到之前的页面wx.redirectTo({url: this.data.redirectUrl})}
})