项目中分享功能的实现-----------一个小的记录

最新推荐文章于 2022-05-18 21:38:32 发布

古语静水流深

最新推荐文章于 2022-05-18 21:38:32 发布

阅读量1k

点赞数

文章标签：分享

本文链接：https://blog.csdn.net/zhanghuiqi205/article/details/72587200

版权

最近在做一些关于电脑端和手机端的分享功能的实现。所以我就把项目中遇到的问题，在这里写一下，算是个记录吧。

先说电脑端的，一是可以使用百度分享的功能：具体的实现可也参考百度分享上面的，很简单而且可以定制。可以到百度分享的官网上去看，地址：

点击打开链接。

我给大家看看我从百度分享定制的代码：

<body>
		<div class="bdsharebuttonbox">
			<a href="#" class="bds_more" data-cmd="more"></a>
			<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
			<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
			<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
			<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
			<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
			<a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
		</div>
</body>

script的部分：

<script>
			window._bd_share_config = {
				"common": {
					"bdSnsKey": {},
					"bdText": "",
					"bdMini": "2",
					"bdMiniList": false,
					"bdPic": "",
					"bdStyle": "0",
					"bdSize": "16"
				},
				"share": {},
				"image": {
					"viewList": ["qzone", "tsina", "tqq", "renren", "weixin", "sqq"],
					"viewText": "分享到：",
					"viewSize": "16"
				},
				"selectShare": {
					"bdContainerClass": null,
					"bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin", "sqq"]
				}
			};
			with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
</script>

结果如图：

二是自己创建一个方法，获取当前网站的网址，然后通过的无非和百度一样，只是我们这种只是把地址复制起来，然后去别的地方粘贴。

我的方法式在页面建立一个input标签，让他的value值等于当前网站的地址，然后完成。

	<body>
       <input type="text" name="copy" id="copy" value="" />
       <button class="box" style="background:darkgray;font-size:16px;border-radius: 5px;" >
       	  复制当前的网址
       </button>
	</body>

script标签：

<script type="text/javascript">
     	$(function(){
     		var url = window.location.href;
     		$('#copy').val(url);
     		$('.box').click(function(){
     			$("#copy").select();
               document.execCommand("Copy"); 
                 alert("复制成功")
     		})
     	})
     </script>

结果如图：这样就可以去别的之间粘贴了。

现在说说手机端的就比较复杂了，原因找了很多，有的是因为手机没有flash所以很多粘贴复制的功能受限，二是浏览器版本居多，各种浏览器有自己的规定，所以手机端的很多思路是复制，然后让自己拷贝的内容复制到剪贴板上，这样利用剪贴板来进行粘贴。不过我没有做到太好。其实我手机端还是没有做复制粘贴这一项，因为很多人不太习惯去手机上复制和粘贴，很多都有api接口。有的说可以使用

有待考察，因为就算管用，也是部分浏览器支持，所以没有做到很完美的程度，所以我也只能做到这一步。至于关于clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。大家可以去试着demo一下。

clipboard.jscli

古语静水流深

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
项目中分享功能的实现-----------一个小的记录

最近在做一些关于电脑端和手机端的分享功能的实现。所以我就把项目中遇到的问题，在这里写一下，算是个记录吧。先说电脑端的，一是可以使用百度分享的功能：具体的实现可也参考百度分享上面的，很简单而且可以定制。可以到百度分享的官网上去看，地址：点击打开链接。我给大家看看我从百度分享定制的代码： script的部分：
复制链接

扫一扫