微信小程序(五十九)使用鉴权组件时原页面js自动加载解决方法(24/3/14)

时间:2024-03-18 16:34:50

注释很详细,直接上代码

上一篇

新增内容:
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函数!')
 }
})

效果演示:

在这里插入图片描述
在这里插入图片描述