uniapp中uni.chooseImage上传图片跳转其他页面
·
在 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.emit和uni.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) => {
// 处理图片
}
});
更多推荐
所有评论(0)