uni-app微信浏览器微信授权登录回调不执行组件生命周期

uni-app微信浏览器微信授权登录回调不执行组件生命周期

代码示例

app.vue

onLaunch() {  
  const appid = 'wxd360f3c12fef34f6'  
  if (this.isWechat()) {  
    // 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId  
    let code = this.getUrlCode('code')  
    if (!code) {  
      let backUrl = encodeURIComponent(window.location.href);  
      const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid +'&redirect_uri=' + backUrl +'&response_type=code&scope=snsapi_userinfo#wechat_redirect';  
      window.location.href = url;  

    } else {  
      this.getOpenidAndUserinfo(code)  
    }  
  }  
}

onshow() {  
  // 执行获取子组件图片资源。。
}

预览地址

https://app.baomahuojia.com/share/pages/productdetail/productdetail?id=18016 （ios测试结果，安卓无问题）

最后结果

在微信登录过后回调，组件不会继续执行里面的生命周期，导致结果组件很多接口资源在 ios无法显示


更多关于uni-app微信浏览器微信授权登录回调不执行组件生命周期的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app微信浏览器微信授权登录回调不执行组件生命周期的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在微信浏览器中进行OAuth授权登录后，iOS设备确实存在页面生命周期不执行的问题。这是因为微信授权回调会重新加载页面，但iOS的页面缓存机制可能导致Vue组件生命周期未被正确触发。

建议的解决方案：

  1. 在app.vue的onShow生命周期中处理授权回调逻辑：
onShow() {
  if(this.isWechat()) {
    let code = this.getUrlCode('code')
    if(code) {
      this.getOpenidAndUserinfo(code)
    }
  }
  // 其他初始化逻辑
}
  1. 在页面组件中使用onShow替代onLoad来确保回调后能执行：
onShow() {
  this.loadData() // 重新加载数据
}
  1. 添加页面状态管理，在回调后强制更新数据：
methods: {
  forceRefresh() {
    // 清除相关状态，重新初始化
  }
}
回到顶部