uni-app 小程序 webview 访问 uni 打包的 h5 页面中无法唤起图片选择

回复 小枫叶: 暂时还没发现什么规律，别人也是vivo手机，就可以打开相册，我的也是vivo，点击就没反应，所以不知道是不是个例

在 Uni-app 中，如果你在小程序的 webview 中加载了 Uni-app 打包的 H5 页面，并且在该 H5 页面中无法唤起图片选择功能，可能是由于以下几个原因：

1. 小程序 webview 的限制

小程序中的 webview 组件本身并不支持直接调用原生的图片选择功能。小程序和 H5 的运行环境不同，小程序有自己的 API 来调用图片选择（如 wx.chooseImage），而 H5 中通常使用 <input type="file"> 来实现图片选择。

如果你在 H5 页面中使用的是 <input type="file">，在小程序的 webview 中可能无法正常触发。

2. 解决方案

如果你需要在 webview 中实现图片选择功能，可以考虑以下解决方案：

• 方案一：使用小程序的图片选择 API 在 H5 页面中，可以通过 uni.postMessage 与小程序进行通信，调用小程序的图片选择 API（如 wx.chooseImage）。具体步骤如下：

  1. 在 H5 页面中，通过 uni.postMessage 发送消息给小程序，请求图片选择。
  2. 在小程序端监听 webview 的 message 事件，接收到消息后调用小程序的图片选择 API。
  3. 选择完图片后，将图片信息通过 webview 的 postMessage 方法传回给 H5 页面。

  示例代码：

  // H5 页面
  function chooseImage() {
      if (window.uni && uni.postMessage) {
          uni.postMessage({ action: 'chooseImage' });
      } else {
          // 非小程序环境下，直接使用 <input type="file">
          const input = document.createElement('input');
          input.type = 'file';
          input.accept = 'image/*';
          input.onchange = function (event) {
              const file = event.target.files[0];
              // 处理文件
          };
          input.click();
      }
  }
  
  // 监听小程序返回的图片信息
  window.addEventListener('message', function (event) {
      const data = event.data;
      if (data.action === 'imageSelected') {
          const imageUrl = data.imageUrl;
          // 处理图片
      }
  });
  

  // 小程序端
  Page({
      onLoad() {
          const webViewContext = uni.createWebViewContext('webview');
          this.webViewContext = webViewContext;
      },
      onMessage(event) {
          const data = event.detail.data;
          if (data.action === 'chooseImage') {
              wx.chooseImage({
                  count: 1,
                  success: (res) => {
                      const tempFilePaths = res.tempFilePaths;
                      this.webViewContext.postMessage({
                          action: 'imageSelected',
                          imageUrl: tempFilePaths[0]
                      });
                  }
              });
          }
      }
  });