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

逃离我推掉我的手 2021-07-25 18:48 1347阅读 0赞

## 砍价功能剪切板 ##

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]

## 电商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页面内容存储到剪切板 ##

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]  
[clipboard操作系统粘贴板插件 https://ext.dcloud.net.cn/plugin?id=712 ][clipboard_ https_ext.dcloud.net.cn_plugin_id_712]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 5]  
此处可以用`clipboard.setText('')`将剪切板内容清空。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/0054e1986f76429ab0e2606b94d57b83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/10784c8934c94a33abca5166ce35deb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/ff91ae4e54174cf6b31b22b858e36ee3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/985d698c6f3e4a67b814e3c7ab55efcb.png
[clipboard_ https_ext.dcloud.net.cn_plugin_id_712]: https://ext.dcloud.net.cn/plugin?id=712
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/bacd45a624b5458f9366dca42f293cad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210725/79b6d27372584bfaa99a98680f458be1.png