这个主要在项目中要实现的功能，现在的手机浏览器基本也都含有分享功能，但有的手机浏览器就没有分享微信好友，朋友圈等选项，虽然微信内置X5含有此功能，但不同的手机终端分享选项又不一样，因本人还是比较喜欢老罗的，这几年一直在用锤子，但其微信内置浏览器中就是没有分享到QQ好友啊，空间啊等选项，而华为的确有。老罗啊，还是比较专一😑。所以为了弥补相互间的缺陷，就都加上了。废话不多说了，直接上效果图吧：
因为微信APP本身自带分享好友及朋友圈，在微信内就屏蔽了
代码整理：
CSS代码：
<link rel="stylesheet" type="text/css" href="css/demo.css" />
主要引入jQuery库及nativeShare.js
<script type="text/javascript" src="js/vendor/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/nativeShare.js"></script>
<script type="text/javascript" src="js/nativeShare.js"></script>
调用方式：
<span class="shareBtn" id="toshare">分享到</span>
<div id="nativeShare"></div><script type="text/javascript">
("#toshare").bind("click", function() {
var config = {
url: '', //分享url
title: '', //内容标题
desc: '', //描述
img: '', //分享的图片
img_title: '', //图片名称
from: '' //来源
};
var share_obj = new nativeShare('nativeShare', config);//效果遮罩层(".am-share").addClass("am-modal-active");
if ((".sharebg").length>0) {(".sharebg").addClass("sharebg-active");
} else {
("body").append('<div class="sharebg"></div>');(".sharebg").addClass("sharebg-active");
}
(".sharebg-active,.share_btn").click(function() {(".am-share").removeClass("am-modal-active");
setTimeout(function() {
(".sharebg-active").removeClass("sharebg-active");(".sharebg").remove();
}, 300);
})
});
</script>
<div id="nativeShare"></div><script type="text/javascript">
("#toshare").bind("click", function() {
var config = {
url: '', //分享url
title: '', //内容标题
desc: '', //描述
img: '', //分享的图片
img_title: '', //图片名称
from: '' //来源
};
var share_obj = new nativeShare('nativeShare', config);//效果遮罩层(".am-share").addClass("am-modal-active");
if ((".sharebg").length>0) {(".sharebg").addClass("sharebg-active");
} else {
("body").append('<div class="sharebg"></div>');(".sharebg").addClass("sharebg-active");
}
(".sharebg-active,.share_btn").click(function() {(".am-share").removeClass("am-modal-active");
setTimeout(function() {
(".sharebg-active").removeClass("sharebg-active");(".sharebg").remove();
}, 300);
})
});
</script>
在相关调用位置引用上述文件就ok了。注意：此分享功能目前仅支持手机UC浏览器及QQ浏览器环境！！分享下楼主用此插件遇到了几个问题：在微信内置浏览器中无法使用此功能，楼主解决办法是去直接去为它填上分享路径
首先确定它是微信内置浏览器环境，判断header请求中有没有mincromessager字段，
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
ok，如果是在微信内置浏览器中打开，直接赋予分享链接地址：
var url2 = url.replace('&from=singlemessage',''); //此处去掉链接中自带的APP信息
var url = {
sinaWeibo:'https://service.weibo.com/share/share.php?url='+url2+'&title='+title+'&desc='+desc+'&img_url='+ img, //分享到新浪微博
qq: 'https://connect.qq.com/widget/shareqq/index.html?url='+url2+'&title='+title+'&desc='+desc+'&img_url='+ img, //分享到QQ好友
qzone : 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+url2+'&title='+title+'&desc='+desc+'&img_url='+ img // 分享到QQ空间
};
(".weibo a").attr("href",url.sinaWeibo); //直接附上分享链接(".qq a").attr("href",url.qq);
(".qzone a").attr("href",url.qzone);
function wx(msg){alert(msg);}(".weixin").on('click',function(){
wx("抱歉，暂不支持分享好友，请撮微信右上角选择分享^_^");
if(isConfirm){ //加上FALSE返回值中断函数
return false;
}
});
(".weixin_timeline").click(function(){
wx("抱歉，暂不支持分享到朋友圈，请撮微信右上角选择分享^_^");
if(isConfirm){
return false;
}
});(".more").click(function(){
wx("此页面不支持更多分享^_^");
if(isConfirm){
return false;
}
});
var url = {
sinaWeibo:'https://service.weibo.com/share/share.php?url='+url2+'&title='+title+'&desc='+desc+'&img_url='+ img, //分享到新浪微博
qq: 'https://connect.qq.com/widget/shareqq/index.html?url='+url2+'&title='+title+'&desc='+desc+'&img_url='+ img, //分享到QQ好友
qzone : 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+url2+'&title='+title+'&desc='+desc+'&img_url='+ img // 分享到QQ空间
};
(".weibo a").attr("href",url.sinaWeibo); //直接附上分享链接(".qq a").attr("href",url.qq);
(".qzone a").attr("href",url.qzone);
function wx(msg){alert(msg);}(".weixin").on('click',function(){
wx("抱歉，暂不支持分享好友，请撮微信右上角选择分享^_^");
if(isConfirm){ //加上FALSE返回值中断函数
return false;
}
});
(".weixin_timeline").click(function(){
wx("抱歉，暂不支持分享到朋友圈，请撮微信右上角选择分享^_^");
if(isConfirm){
return false;
}
});(".more").click(function(){
wx("此页面不支持更多分享^_^");
if(isConfirm){
return false;
}
});
而在手机UC和QQ浏览器中测试良好，ok了，用的效果还不错，特分享出来。如果想用pc端的分享功能，share.js还是个不错的选择的。
ok，分享下源码：点击白山羊demo下载
