uniapp H5 页面的复制功能 三种方式 建议使用第三种

使用场景：小城跳转到H5页面，由于uniapp官网提供的uni.setClipboardData 不支持H5，但是在微信开发者工具上面是好用的，而打包在手机上无效。

1.尝试方式一：

尝试在网上搜索找了很多种方案，但都是无效的。如下方案看上去很丝滑的解决了问题，但是在手机上回一直走 不支持复制那里，果断放弃。可能是有的用户好用吧，可能是场景不同，这个方法没有解决我的问题，于是继续探索。

2.尝试方法二：

解决 报错      [system] APIsetClipboardDatais not yet implemented

复制以下代码 新建文件命名为 clipboard.js

//#ifdef H5/** clipboard.js v2.0.4**/!function(t,e){try{window.ClipboardJS=e();}catch(e){};"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return function(n){var o={};function r(t){if(o[t])return o[t].exports;var e=o[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports} return r.m=n,r.c=o,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,n){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i=function(){function o(t,e){for(var n=0;ndata}) cb.on('success',function(res){ window.__clipboard__=data; success&&Types.isFunction(success)&&success({data:res.text}) complete&&Types.isFunction(complete)&&complete() cb.off('error') cb.off('success') cb.destroy()}) cb.on('error',function(err){fail&&Types.isFunction(fail)&&fail(err) complete&&Types.isFunction(complete)&&complete() cb.off('error') cb.off('success') cb.destroy()}) cb.onClick(e)};uni.getClipboardData=function(options){let emptyFun=function(){} let config={data:null,event:null,success:emptyFun,fail:emptyFun,complete:emptyFun} if(options&&Types.isObject(options)){config=Object.assign({},config,options)} let success=config.success||emptyFun let fail=config.fail||emptyFun let complete=config.complete||emptyFun if(window.__clipboard__!==undefined){success&&Types.isFunction(success)&&success({data:window.__clipboard__})}else{fail&&Types.isFunction(fail)&&fail({data:null})} complete&&Types.isFunction(complete)&&complete()};function fileDownLoad(data){var linkElement=document.createElement('a') linkElement.setAttribute('href',data.blob) linkElement.setAttribute('downLoad',data.name) linkElement.click()}uni.saveImageToPhotosAlbum=uni.saveVideoToPhotosAlbum=function(options){let emptyFun=function(){} let config={filePath:null,success:emptyFun,fail:emptyFun,complete:emptyFun} if(options&&Types.isObject(options)){config=Object.assign({},config,options)} if(options&&Types.isString(options)){config=Object.assign({},config,{filePath:options})} let filePath=config.filePath let success=config.success||emptyFun let fail=config.fail||emptyFun let complete=config.complete||emptyFun if(!filePath){fail&&Types.isFunction(fail)&&fail({msg:'no File'}) complete&&Types.isFunction(complete)&&complete() return} let names=filePath.split('/') let name=names[names.length-1] uni.downloadFile({url:filePath,success:function(res){let tempFilePath=res.tempFilePath fileDownLoad({name:name,blob:tempFilePath}) success&&Types.isFunction(success)&&success({filePath:filePath})},fail:function(err){fail&&Types.isFunction(fail)&&fail({msg:err})},complete:function(){complete&&Types.isFunction(complete)&&complete()}})}//#endif

然后 引用过来

import clipboardfrom "./xx/clipboard.js"

就可以直接使用了，使用的时候 会走如上的js方法，最后还是无效。可能对于某些场景会有效，不然网上不会有这么多贴出这个方案的。

3.尝试方式三（最终解决）

npm install clipboard --save  //项目中安装clipboard

import Clipboard from 'clipboard';

然后页面当中引用
import { handleClipboard  } from "../components/clipboard.js";

然后使用

// #ifdef H5 handleClipboard(re.data, () => { uni.showToast({ title: '已复制', duration: 2000, icon: 'none' }); this.$u.route({ url: 'pages/video/pages/downWay?images=' + this.images }) }, () => { uni.showToast({ title: ' 暂不支持 ', duration: 2000, icon: 'none' }); }) // #endif

最终反复测试好用！！！！  要根据自己的实际情况来使用，不能一味地照搬，我开始是用这种方式的时候 也是无效，经过无数次的改进最终国通过。