注释很详细,直接上代码
上一篇
新增内容:
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函数!')}
})
效果演示: