收藏
回答

在安卓手机通过小程序Webview打开H5页面,H5页面的复制功能为什么失败了?

rt

复制操作代码:

navigator.clipboard.writeText(address).then(() => {
  Toast.show({ content: '复制成功', duration: 2000 });
});


经过尝试,在苹果手机iphone系列中可以正常复制,但是在安卓手机(小米华为OPPO)中复制失败,模拟器上无法复现这个问题,请问是什么原因导致的呢?在安卓手机的浏览器中打开H5页面时是可以复制成功的,但是小程序webview打开该H5页面时是复制失败的。

使用其他复制操作可以实现复制功能吗?比如下述代码:

  var ele = document.createElement('input'); //创建一个input标签
  ele.setAttribute('value', address); // 设置改input的value值
  document.body.appendChild(ele); // 将input添加到body
  ele.select(); // 获取input的文本内容
  document.execCommand('copy'); // 执行copy指令
  document.body.removeChild(ele); // 删除input标签



回答关注问题邀请回答
收藏

5 个回答

  • 社区技术运营专员--许涛
    社区技术运营专员--许涛
    2022-03-26

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2022-03-26
    有用
    回复 4
    • 拾舟
      拾舟
      2022-03-28
      https://developers.weixin.qq.com/s/2SGE15mU7Zy3 你好,这是相关的代码片段,具体机型为Redmi k30,微信版本号为8.0.20,经过测试该问题能在多部安卓机上复现,包括华为、OPPO等,苹果手机可以正常复制,麻烦帮忙排查下原因
      2022-03-28
      回复
    • 拾舟
      拾舟
      2022-03-28回复拾舟
      在微信开发者工具中也可以正常复制
      2022-03-28
      回复
    • 何锦余
      何锦余
      2022-06-24
      我也出现了,一开始用 copy-to-clipboard 这个库,安卓上可以正常复制(它源码用的是 execCommand 来实现的),然后 iOS 上不行。然后我就用更现代的 navigator.clipboard 来做,iOS 上终于正常了,然后安卓就不行了。但是安卓手机自带的 WebView 里面是正常的,那说明问题出在小程序的 webview 这边了。
      2022-06-24
      回复
    • 乄卝.l
      乄卝.l
      2023-04-17
      你好,请问这个问题有新的解决方案吗?
      2023-04-17
      回复
  • PhiliP Wu
    PhiliP Wu
    2023-11-21

    2023年11月,仍然有这个问题。

          navigator.clipboard.writeText("text").then(res => {
            console.log("Success " + JSON.stringify(res));
          }).catch(e => {
            console.log("Error " + e.message);
          });
    

    以上代码在安卓机型的微信上会返回:Error Write permission denied.

    微信版本:8.0.37

    安卓版本:13

    iOS的微信上没有问题。安卓自带的Chrome浏览器没有问题。


    2023-11-21
    有用
    回复
  • llnn
    llnn
    2023-06-09

    确实恶心,你用他们微信自带的api算了

    2023-06-09
    有用
    回复
  • 何锦余
    何锦余
    2022-06-24
    const copyToClipboard = (text) => {
      const isSafari = navigator.userAgent.match(/iPad|iPhone|iPod|Macintosh/i)
    
      return new Promise((resolve) => {
        // iOS 才用现代的方法复制,因为微信小程序安卓 webview 上用这个方法会报错
        if (navigator.clipboard && isSafari) {
          navigator.clipboard
            .writeText(text)
            .then(() => {
              resolve(true)
            })
            .catch(() => {
              resolve(false)
            })
        } else {
          import('copy-to-clipboard').then(({ default: copy }) => {
            resolve(
              copy(text, {
                format: 'text/plain',
                message: '请点击确定按钮复制链接',
              })
            )
          })
        }
      })
    }
    

    给一段代码供大家参考,总的思路就是,iOS 使用现代的 navigator.clipboard 来实现复制,安卓上面的还是走传统的方法来复制(传统的方法在 iOS 上已经不好使了,要不然就统一用了)。

    2022-06-24
    有用
    回复 2
    • aMan
      aMan
      2022-07-19
      这个兼容ios12版本的吗?比较旧的,目前不支持document api copy功能的
      2022-07-19
      回复
    • 何锦余
      何锦余
      2022-10-01回复aMan
      根据 caniuse 的数据,从 iOS 13.4 才支持,iOS 12 应该是不支持的。
      2022-10-01
      回复
  • 朱
    2022-05-30

    我也遇到了这个问题,请问这个问题解决了吗?

    2022-05-30
    有用
    回复
登录 后发表内容