注释很详细，直接上代码
上一篇
新增内容：
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(){
//修改全局变量为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
})
}
})
效果演示：
