微信小程序 webview 中实现 copy 功能
管理后台使用了富文本编辑器，所以修改思路：
-
管理后台使用了富文本编辑器 quill ，其中附件上传后生成的链接添加 class
extendLink -
展示富文本的页面 detail 页面中通过 JavaScript：document.querySelectorAll('#noticeDetail .extendLink') 选择 extendLink 链接添加点击事件
-
点击事件触发 copy 事件
复制的 copy 功能代码：
const copyToClipboard = (text) => {
// alert(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 {
copy(text, {
format: 'text/plain',
message: '请点击确定按钮复制链接',
})
resolve(true)
}
})
}
调用该函数
btn.addEventListener('click', function (e) {
e.preventDefault()
const link = btn.getAttribute('href')
copyToClipboard(link).then((res) => {
console.log('copyToClipboard then')
toast.success('附件链接地址复制成功，请到浏览器中粘贴下载')
})
})
Refer
-
在安卓手机通过小程序 Webview 打开 H5 页面，H5 页面的复制功能为什么失败了？ | 微信开放社区 可以试下
在安卓手机通过小程序 Webview 打开 H5 页面，H5 页面的复制功能为什么失败了？? 何锦余 的回答 - 微信开放社区 developers.weixin.qq.com/community/d…
这个回答改了下，使用的 package copy-to-clipboard - npm
-
React 复制到粘贴板 兼容各种浏览器 copy-to-clipboard、原生 js、clipboard 方案-CSDN 博客
