h5 页面复制内容到剪切板，然后登陆app获取剪切板内容 h5+uniapp电商app

砍价功能剪切板

最近公司在做电商中的砍价活动，如果在电商app中分享砍价商品信息到微信好友，展示的是一个h5链接的形式。

下图分别是从 电商app分享砍价商品 分享到微信好友 砍价需要下载的电商app页面

电商app 分享功能（分享到微信好友）

share(item) {
  // 分享图文到微信聊天界面
  uni.share({
    provider: "weixin", // 服务商
    scene: "WXSceneSession", // 场景 微信好友WXSceneSession  朋友圈WXSceneTimeLine
    type: 0, // 图文0 文字1 图片2
    href: this.pathUrl+"h5/bargain.html?inviteCode="+this.userInfo.inviteCode+"&id="+item.id, // 分享h5地址
    title: "帮我砍一刀",
    summary: "全场商品包邮到家，一起来挑选吧。", // 描述
    imageUrl: item.itemImage,
    success: function (res) {
        console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
        console.log("fail:" + JSON.stringify(err));
    }
  });
}

注意事项：

1. uni.share是分享的功能
2. provider:可以是微信 QQ 微博等
3. scene:可以是为微信好友或者朋友圈
4. type:可以是图文 文字 图片
5. href:分享的链接：pathUrl是基本链接 + 邀请码 + 砍价商品ID，此处的邀请码是用于分销，也就是拉新的一种方式
6. title:分享出去的链接标题
7. summary:分享出去的链接副标题
8. imageUrl:分享出去的链接缩略图
9. 其他的不重要了……

h5页面内容存储到剪切板

此处需要将邀请码和商品ID存储到剪切板中，然后下载电商app后，从剪切板中读取内容，然后登陆app后就可以将登录人与邀请者绑定在一起，然后根据商品ID，直接弹窗提示砍价商品。

h5复制内容到剪切板功能（js版）

 const copyText = (text) => {
     // 数字没有 .length 不能执行selectText 需要转化成字符串
     const textString = text.toString();
     let input = document.querySelector('#copy-input');
     if (!input) {
         input = document.createElement('input');
         input.id = "copy-input";
         input.readOnly = "readOnly";        // 防止ios聚焦触发键盘事件
         input.style.position = "absolute";
         input.style.left = "-1000px";
         input.style.zIndex = "-1000";
         document.body.appendChild(input)
     }

     input.value = textString;
     // ios必须先选中文字且不支持 input.select();
     selectText(input, 0, textString.length);
     if (document.execCommand('copy')) {
         document.execCommand('copy');
         // alert('已复制到粘贴板');
     }else {
         console.log('不兼容');
     }
     input.blur();

     // input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
     // 选择文本。createTextRange(setSelectionRange)是input方法
     function selectText(textbox, startIndex, stopIndex) {
         if (textbox.createTextRange) {//ie
             const range = textbox.createTextRange();
             range.collapse(true);
             range.moveStart('character', startIndex);//起始光标
             range.moveEnd('character', stopIndex - startIndex);//结束光标
             range.select();//不兼容苹果
         } else {//firefox/chrome
             textbox.setSelectionRange(startIndex, stopIndex);
             textbox.focus();
         }
     }
 }

h5复制内容到剪切板功能的使用方法

将邀请码和商品ID保存到剪切板中……

let copyMsg = "inviteCode="+ inviteCode + "&bargainOrderId=" +id;
copyText(copyMsg);
setTimeout(function () {
   window.location.href = "./download.html";
},200)

电商app获取剪切板内容

uniapp 官网中有个获取剪切板内容的方法：

uni.getClipboardData({
	success: function (res) {
		console.log(res.data);
		if(res.data){
			let arrTem = res.data.split("&");
			for (var i = 0; i < arrTem.length; i++) {
			  var arrTemp = arrTem[i].split("=");
			  if (arrTemp[0]== "id"){
				  _this.autoLogin(arrTemp[1]);
			  } else if(arrTemp[0]== "inviteCode"){
				  uni.setStorageSync("inviteCodeShare",arrTemp[1]);
			  }else if(arrTemp[0]== "inviteId"){
				  uni.setStorageSync("inviteId",arrTemp[1]);
			  }else if(arrTemp[0]== "bargainOrderId"){
				  // let bargainOrderId = uni.getStorageSync("bargainOrderId");
				  console.log(arrTemp[1])
				  _this.$refs.hbargain.getDetail(arrTemp[1]);
			  }
			}
		}
	}
});

我们公司的要求是在app首页onShow方法中调用这个获取剪切板内容的方法。
如果有砍价商品ID，则直接调用hbargain组件中的getDetail()的方法，调用砍价商品详情页面。

电商app复制内容到剪切板

uniapp官网中有个复制内容到剪切板的方法，但是这个方法使用的时候会有弹窗提示，这样很影响用户体验，因此可以使用第三方的组件来复制内容到剪切板。

clipboard操作系统粘贴板插件 https://ext.dcloud.net.cn/plugin?id=712

此处可以用clipboard.setText('')将剪切板内容清空。