注释很详细，直接上代码
新增内容：
1.使用覆盖函数的方法阻止原页面的自动执行方法
2.使用判断实现只有当未登录时才进行方法覆盖
源码：
app.json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Weixin",
"navigationBarBackgroundColor": "#ffffff"
},
"usingComponents": {
"auth":"/Components/auth/auth"
},
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
auth组件
auth.wxml
<slot wx:if="{{isLoad}}"></slot>
auth.json
{
"component": true,
"usingComponents": {}
}
auth.js
// Components/auth/auth.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {//这里的设置模拟页面内容不出现的情况
isLoad:true
},
//覆盖使用的方法
attached(){
if(this.data.isLoad==false){//当鉴权组件检测到未登录时覆盖
//获取当前页面栈数组
const pages=getCurrentPages()
//获取当前页面实例
const page=pages[pages.length-1]
//箭头写法要注意
page.onLoad=()=>{
console.log("1.已覆盖onLoad方法")
},
page.onShow=()=>{
console.log("2.已覆盖onShow方法")
},
page.onReady=()=>{
console.log("3.已覆盖onReady方法")
}
}
},
/**
* 组件的方法列表
*/
methods: {
}
})
index.wxml
<auth>当登入状态为false时才会显示</auth>
index.js
Page({
onLoad(){
console.log('🎁1. 使用了onLoad函数！')
},
onShow(){
console.log('🎁2. 使用了onShow函数！')
},
onReady(){
console.log('🎁3. 使用了onReady函数！')
}
})
效果演示：
