在 UniApp 中,调用 uni.chooseImage 或其他原生 API(如相机、相册选择)时,确实可能会触发 App.vue 的生命周期(如 onShow、onHide),这是因为:
原生组件(如相机、相册)会临时覆盖 WebView,导致当前页面进入后台(触发 onHide)。
当用户完成操作(选择图片或取消)后,页面重新显示(触发 onShow)。

如何避免 App.vue 生命周期被触发?
方法 1:使用(setStorageSync)存储条件变量控制逻辑
在 App.vue 的 onShow 中,通过标志变量判断是否因 uni.chooseImage 触发:

onShow: function () {
	  if(uni.getStorageSync('hasLogin') == 1){
	     const isChoosingImage = uni.getStorageSync("isChoosingImage");//获取
	     if (isChoosingImage) {
	        uni.setStorageSync("isChoosingImage", false);//重置值
	        return
	     }
	  	uni.navigateTo({
	  		url:'/pagesA/personalCenter/personalCenter'
	  	})
	  }
  },

在使用uni.chooseImage页面中

chooseImages(type) {
	uni.setStorageSync("isChoosingImage", true);//使用方法前修改变量
	const _this = this;
	uni.chooseImage({
		count: 1, // 默认选择一张图片
		sizeType: ["original", "compressed"],
		sourceType: [type],
		success: function(res) {}
	});					

方法 2:使用全局事件通信(该方法我没尝试过)
通过全局事件总线(如 uni.emit和uni.emit 和 uni.emituni.on)通知 App.vue 忽略本次生命周期:

// App.vue
export default {
  onShow() {
    uni.$once('ignore-on-show', () => {
      return; // 忽略本次 onShow
    });
    // 正常逻辑
    console.log("正常页面显示");
  }
};

在调用 uni.chooseImage 时触发事件:

uni.$emit('ignore-on-show');
uni.chooseImage({
  success: (res) => {
    // 处理图片
  }
});
Logo

中国智能体开发者社区,聚焦智能体与大模型开发,提供前沿资讯、实用工具链、开源项目及行业案例。通过技术沙龙、开发者大赛等活动,促进经验交流与协作,助力开发者快速构建创新智能应用。

更多推荐