uni-app 微信小程序在iphone12上选择图片时出现白屏问题

uni-app 微信小程序在iphone12上选择图片时出现白屏问题

开发环境 版本号 项目创建方式
Windows Windows 10 家庭中文版 版本号 20H2 安装日期 ‎2021/‎5/‎9 操作系统内部版本 19042.1415 体验 Windows Feature Experience Pack 120.2212.3920.0 HBuilderX 
产品分类：uniapp/小程序/微信

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.3.3

第三方开发者工具版本号：1.05.2112242

基础库版本号：2.21.2

项目创建方式：HBuilderX

### 示例代码：
```javascript
chooseImg() {  
    uni.chooseImage({  
        count: 1,  
        sizeType: ["compressed"],  
        sourceType: this.onlyCamera ? ["camera"]:["album"],  
        success: res => {  
            let img = res.tempFilePaths[0];  
            uni.showLoading({title:'正在提交...',mask:true});  
            this.countNum++;  
            let _photoName =  
                this.typeNameImg +  
                "_" +  
                this.typeNameImg +  
                "_" +  
                this.$functionPub.getSubLastYxWx(img) +  
                this.$functionPub.getSubLastYx(img);  
            this.$api.uploadeFilesFormal(img,'/uploadFile/ftpUploadFile','file',{photoName:_photoName,imageNum:uni.getStorageSync('customer_listdata').imageNum}).then(res => {  
                if(res.code === "200"){  
                    this.imgList.push({  
                        src: img,  
                        name: this.typeNameImg,  
                        type: this.$functionPub.getSubLastYx(img),  
                        typeName: this.$functionPub.getSubLastYxWx(img),  
                        photoName: _photoName  
                    });  
                    let that = this;  
                    setTimeout(function () {  
                        that.$emit('onSrc',{  
                            value:that.imgList,  
                            type:that.typeNameImg,  
                            index:that.Index,  
                        })  
                        uni.hideLoading();  
                    }, 1200);  
                    // this.$emit('onSrc',{value:this.imgList,type:this.typeNameImg,index:this.Index})  
                    // uni.hideLoading();  
                    // this.$emit('onSrc',{value:this.imgList,type:this.typeNameImg,index:this.Index})  
                }else{  
                    uni.hideLoading();  
                    uni.showToast({  
                        icon:'none',  
                        title:'上传失败，请重新检查重新上传!'  
                    })  
                }  
            });  
        },  
        fail: err => {  
            console.log(err);  
        }  
    });  
}

操作步骤：

使用iphone12，使用手机选择相册图片，快速重复选择

预期结果：

选择完成返回原页面，并显示

实际结果：

返回页面，绿屏，我们设置背景是绿色

bug描述：

在iphone12手机中，选择图片，快速多次选择，会出现页面白屏问题


更多关于uni-app 微信小程序在iphone12上选择图片时出现白屏问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

直接使用微信小程序（不使用 uni-app ）测试一下，如果仍然有问题，反馈到微信小程序社区

更多关于uni-app 微信小程序在iphone12上选择图片时出现白屏问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在特定iOS设备上，由uni.chooseImage快速重复调用触发的原生层渲染问题。核心原因在于：当快速、连续地调用uni.chooseImage API时，微信小程序原生图片选择器（特别是从相册选择）的频繁弹出和关闭，可能与当前页面的渲染周期（或Vue的更新周期）产生冲突，导致Webview渲染进程异常或挂起，从而出现白屏（或你设置的绿色背景全屏显示）。

问题根源分析：

  1. 异步操作与渲染冲突：uni.chooseImage是一个异步API，其成功回调（success）执行时，页面可能正处于一个不稳定的过渡状态。快速连续操作会叠加多个异步回调，极易干扰页面正常渲染。
  2. iOS系统资源管理：在iOS系统（尤其是较新版本和机型如iPhone 12）上，微信小程序底层Webview对频繁的“页面跳转-返回”操作（选择器本质上是一个原生覆盖层）更为敏感，容易触发渲染管线重置或卡顿，表现为白屏。
  3. 代码中的潜在风险点：你在success回调中立即执行了uni.showLoading，并紧接着进行网络上传。如果用户选择速度极快，多个showLoading弹窗、上传请求与图片选择器关闭动画可能堆叠，加剧了UI线程的阻塞。

直接解决方案：

1. 立即操作防抖（最有效） 在调用chooseImg方法时，立即添加一个标志位锁，防止在本次操作完成前再次触发。

data() {
  return {
    choosingImage: false
  }
},
methods: {
  chooseImg() {
    if (this.choosingImage) {
      return; // 如果正在选择中，直接退出，防止重复调用
    }
    this.choosingImage = true; // 加锁

    uni.chooseImage({
      // ... 你的参数
      success: (res) => {
        // ... 你的处理逻辑
      },
      fail: (err) => {
        console.log(err);
        this.choosingImage = false; // 失败时也解锁
      },
      complete: () => {
        // 无论成功失败，在API执行完毕时解锁
        // 建议放在complete中，比在success和fail里都写一遍更可靠
        this.choosingImage = false;
      }
    });
  }
}
回到顶部