uni-app 微信小程序 webview 中 uni.chooseImage 在特定机型无法调起

uni-app 微信小程序 webview 中 uni.chooseImage 在特定机型无法调起

开发环境 版本号 项目创建方式
Windows win11家庭中文版 10.0.22000 版本 22000 CLI

操作步骤：

使用colorui写出前端页面

<form>  
    <view class="cu-form-group">  
        <view class="grid col-4 grid-square flex-sub">  
            <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">  
             <image :src="imgList[index]" mode="aspectFill"></image>  
                <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">  
                    <text class='cuIcon-close'></text>  
                </view>  
            </view>  
            <view class="solids" @tap="ChooseImage" v-if="imgList.length<4">  
                <text class='cuIcon-cameraadd'></text>  
            </view>  
        </view>  
    </view>  
</form>

使用js调用

export default {  
    data() {  
        return {  
            index: -1,  
            imgList: []  
        };  
    },  
    methods: {  
        ChooseImage() {  
            uni.chooseImage({  
                count: 4, //默认9  
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有  
                sourceType: ['album'], //从相册选择  
                success: (res) => {  
                    if (this.imgList.length != 0) {  
                        this.imgList = this.imgList.concat(res.tempFilePaths)  
                    } else {  
                        this.imgList = res.tempFilePaths  
                    }  
                }  
            });  
        },  
        ViewImage(e) {  
            uni.previewImage({  
                urls: this.imgList,  
                current: e.currentTarget.dataset.url  
            });  
        },  
        DelImg(e) {  
            uni.showModal({  
                title: '召唤师',  
                content: '确定要删除这段回忆吗？',  
                cancelText: '再看看',  
                confirmText: '再见',  
                success: res => {  
                    if (res.confirm) {  
                        this.imgList.splice(e.currentTarget.dataset.index, 1)  
                    }  
                }  
            })  
        }  
    }  
}

预期结果：

  • 苹果安卓机型都可以在webview中调起uni.chooseImage

实际结果：

  • 苹果可以，安卓不可以

### bug描述：

#### 环境：

- 微信小程序 使用webview内嵌H5网页  

#### 问题：

- 使用安卓机型在小程序下打开webview中的网页无法调起uni.chooseImage。苹果可以调起  

```javascript
uni.chooseImage({  
    count: 3,   
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有  
    sourceType: ['album'], //从相册选择  
    success: (res) => {  
        console.log('选择',res)  
    },fail(err){  
        uni.showToast({  
            title: err+'图片类型错误,请重新选择',  
            icon: 'none'  
        });  
    }  
});
  • 使用微信jssdk调用chooseImage无法使用
this.$wbjwx.chooseImage({  
    count: 1,  
    sizeType: ['original', 'compressed'],  
    sourceType: ['album', 'camera'],  
    success (res) {  
        // tempFilePath可以作为img标签的src属性显示图片  
        const tempFilePaths = res.tempFilePaths  
    }  
})

更多关于uni-app 微信小程序 webview 中 uni.chooseImage 在特定机型无法调起的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

就是网页,放到编译的小程序webview中 调用图片 拉不起来 ,然后这个 网页也是用uniapp写的,是这意思么

更多关于uni-app 微信小程序 webview 中 uni.chooseImage 在特定机型无法调起的实战教程也可以访问 https://www.itying.com/category-93-b0.html


网页也是用uniapp写的

同样我也遇到这个问题了，在百度上看到一个说安卓webview里面调不起来相机拍照，是安卓的webview 没有监听。 不知道怎么解决

我也看到过，试了没用

如果是webview没有监听的话，这个事只能用原生插件了 没有好的办法 但是我也不确定这个地方是不是 webview监听的问题

不是很清楚，它只是在特定机型会失效，而且这些特定机型之前是可以正常使用的

回复 1***@qq.com: 反正我换成jssdk了。

大神这个问题怎么解决啊？

请问解决了吗？

在 uni-app 中，uni.chooseImage 是一个常用的 API，用于从相册或相机中选择图片。然而，在某些特定机型上，尤其是在微信小程序的 webview 环境中，可能会遇到 uni.chooseImage 无法调起的问题。以下是一些可能的原因和解决方案：

1. 微信小程序版本问题

  • 原因：某些微信小程序版本可能存在兼容性问题，导致 uni.chooseImage 无法正常调起。
  • 解决方案：确保微信小程序基础库版本是最新的，或者尝试在开发者工具中切换不同的基础库版本进行测试。

2. 权限问题

  • 原因：微信小程序需要用户授权才能访问相册和相机，如果用户未授权或授权被拒绝，uni.chooseImage 将无法调起。

  • 解决方案：在调用 uni.chooseImage 之前，先检查并请求用户授权。可以使用 uni.authorize 来请求权限。

    uni.authorize({
  scope: 'scope.writePhotosAlbum',
  success() {
    uni.chooseImage({
      count: 1,
      success(res) {
        console.log(res.tempFilePaths);
      }
    });
  },
  fail() {
    uni.showToast({
      title: '请授权访问相册',
      icon: 'none'
    });
  }
});

3. webview 环境限制

  • 原因：在 webview 中，某些 API 可能受到限制，尤其是在某些特定机型上。
  • 解决方案：尝试在原生页面中调用 uni.chooseImage，而不是在 webview 中调用。如果必须在 webview 中使用，可以考虑通过 postMessage 与原生页面通信，让原生页面调用 uni.chooseImage。

4. 机型兼容性问题

  • 原因：某些特定机型可能存在兼容性问题，导致 uni.chooseImage 无法正常调起。
  • 解决方案：尝试在更多机型上进行测试，确认问题是否普遍存在。如果问题仅出现在特定机型上，可以考虑使用其他方式（如原生组件）来实现图片选择功能。

5. uni-app 版本问题

  • 原因：uni-app 的某些版本可能存在 bug，导致 uni.chooseImage 无法正常调起。
  • 解决方案：确保 uni-app 的版本是最新的，或者尝试回退到之前的稳定版本。

6. 调试与日志

  • 原因：如果以上方法都无法解决问题，可能需要进一步调试。

  • 解决方案：在 uni.chooseImage 的 fail 回调中打印错误信息，查看具体的错误原因。

    uni.chooseImage({
  count: 1,
  success(res) {
    console.log(res.tempFilePaths);
  },
  fail(err) {
    console.error('chooseImage failed:', err);
  }
});

7. 使用原生 API

  • 原因：如果 uni.chooseImage 在某些机型上无法调起，可以考虑使用微信小程序的原生 API wx.chooseImage。

  • 解决方案：直接使用 wx.chooseImage 来替代 uni.chooseImage。

    wx.chooseImage({
  count: 1,
  success(res) {
    console.log(res.tempFilePaths);
  },
  fail(err) {
    console.error('chooseImage failed:', err);
  }
});
回到顶部