css:
#nativeShare {
font-size: 13px;
border-top: 1px solid #fff;
margin-top: 5px;
}
#nativeShare .list {
width: 95%;
margin: 0 auto;
text-align: center;
}
#nativeShare .list span {
cursor:pointer;
width: auto;
display: inline-block;
text-align: center;
margin: 10px 10px 0 0;
}
#nativeShare .list span i {
width: 40px;
height: 40px;
display: block;
margin: 0 auto;
margin-bottom: 5px;
}
#nativeShare .weibo i {
background-image: url('../image/weibo.png');
background-size: cover;
}
#nativeShare .weixin i {
background-image: url('../image/weixin_friend.png');
background-size: cover;
}
#nativeShare .weixin_timeline i {
background-image: url('../image/weixin.png');
background-size: cover;
}
#nativeShare .qq i {
background-image: url('../image/qq.png');
background-size: cover;
}
#nativeShare .qzone i {
background-image: url('../image/qqzone.png');
background-size: cover;
}
#nativeShare .more i {
background-image: url('../image/more.png');
background-size: cover;
}
js:
var nativeShare = function (elementNode, config) {
if (!document.getElementById(elementNode)) {
return false;
}
var qApiSrc = {
lower: "http://3gimg.qq.com/html5/js/qb.js",
higher: "http://jsapi.qq.com/get?api=app.share"
};
var bLevel = {
qq: {forbid: 0, lower: 1, higher: 2},
uc: {forbid: 0, allow: 1}
};
var UA = navigator.appVersion;
var isqqBrowser = (UA.split("MQQBrowser/").length > 1) ? bLevel.qq.higher : bLevel.qq.forbid;
var isucBrowser = (UA.split("UCBrowser/").length > 1) ? bLevel.uc.allow : bLevel.uc.forbid;
var version = {
uc: "",
qq: ""
};
var isWeixin = false;
config = config || {};
this.elementNode = elementNode;
this.url = config.url || document.location.href || '';
this.title = config.title || document.title || '';
this.desc = config.desc || document.title || '';
this.img = config.img || document.getElementsByTagName('img').length > 0 && document.getElementsByTagName('img')[0].src || '';
this.img_title = config.img_title || document.title || '';
this.from = config.from || window.location.host || '';
this.ucAppList = {
sinaWeibo: ['kSinaWeibo', 'SinaWeibo', 11, '新浪微博'],
weixin: ['kWeixin', 'WechatFriends', 1, '微信好友'],
weixinFriend: ['kWeixinFriend', 'WechatTimeline', '8', '微信朋友圈'],
QQ: ['kQQ', 'QQ', '4', 'QQ好友'],
QZone: ['kQZone', 'QZone', '3', 'QQ空间']
};
this.share = function (to_app) {
var title = this.title, url = this.url, desc = this.desc, img = this.img, img_title = this.img_title, from = this.from;
if (isucBrowser) {
to_app = to_app == '' ? '' : (platform_os == 'iPhone' ? this.ucAppList[to_app][0] : this.ucAppList[to_app][1]);
if (to_app == 'QZone') {
B = "mqqapi://share/to_qzone?src_type=web&version=1&file_type=news&req_type=1&image_url="+img+"&title="+title+"&description="+desc+"&url="+url+"&app_name="+from;
k = document.createElement("div"), k.style.visibility = "hidden", k.innerHTML = '<iframe src="' + B + '" scrolling="no" width="1" height="1"></iframe>', document.body.appendChild(k), setTimeout(function () {
k && k.parentNode && k.parentNode.removeChild(k)
}, 500);
}
if (typeof(ucweb) != "undefined") {
ucweb.startRequest("shell.page_share", [title, title, url, to_app, "", "@" + from, ""])
} else {
if (typeof(ucbrowser) != "undefined") {
ucbrowser.web_share(title, title, url, to_app, "", "@" + from, '')
} else {
}
}
} else {
to_app = to_app == '' ? '' : this.ucAppList[to_app][2];
var ah = {
url: url,
title: title,
description: desc,
img_url: img,
img_title: img_title,
to_app: to_app,//微信好友1,腾讯微博2,QQ空间3,QQ好友4,生成二维码7,微信朋友圈8,啾啾分享9,复制网址10,分享到微博11,创意分享13
cus_txt: "请输入此时此刻想要分享的内容"
};
ah = to_app == '' ? '' : ah;
browser.app.share(ah)
}
};
this.html = function() {
var position = document.getElementById(this.elementNode);
var html = '<div class="label"></div>'+
'<div class="list clearfix">'+
'<span data-app="sinaWeibo" class="nativeShare weibo"><i></i>新浪</span>'+
'<span data-app="weixin" class="nativeShare weixin"><i></i>微信</span>'+
'<span data-app="weixinFriend" class="nativeShare weixin_timeline"><i></i>朋友圈</span>'+
'<span data-app="QQ" class="nativeShare qq"><i></i>QQ</span>'+
'<span data-app="QZone" class="nativeShare qzone"><i></i>QQ空间</span>'+
'<span data-app="" class="nativeShare more"><i></i>更多</span>'+
'</div>';
position.innerHTML = html;
};
this.isloadqqApi = function () {
if (isqqBrowser) {
var b = (version.qq < 5.4) ? qApiSrc.lower : qApiSrc.higher;
var d = document.createElement("script");
var a = document.getElementsByTagName("body")[0];
d.setAttribute("src", b);
a.appendChild(d)
}
};
this.getPlantform = function () {
ua = navigator.userAgent;
if ((ua.indexOf("iPhone") > -1 || ua.indexOf("iPod") > -1)) {
return "iPhone"
}
return "Android"
};
this.is_weixin = function () {
var a = UA.toLowerCase();
if (a.match(/MicroMessenger/i) == "micromessenger") {
return true
} else {
return false
}
};
this.getVersion = function (c) {
var a = c.split("."), b = parseFloat(a[0] + "." + a[1]);
return b
};
this.init = function () {
platform_os = this.getPlantform();
version.qq = isqqBrowser ? this.getVersion(UA.split("MQQBrowser/")[1]) : 0;
version.uc = isucBrowser ? this.getVersion(UA.split("UCBrowser/")[1]) : 0;
if ((isqqBrowser && version.qq < 5.4 && platform_os == "iPhone") || (isqqBrowser && version.qq < 5.3 && platform_os == "Android")) {
isqqBrowser = bLevel.qq.forbid
} else {
if (isqqBrowser && version.qq < 5.4 && platform_os == "Android") {
isqqBrowser = bLevel.qq.lower
} else {
if (isucBrowser && ((version.uc < 10.2 && platform_os == "iPhone") || (version.uc < 9.7 && platform_os == "Android"))) {
isucBrowser = bLevel.uc.forbid
}
}
}
this.isloadqqApi();
if (isqqBrowser || isucBrowser) {
this.html();
} else {
document.write('');
// this.html();
}
};
this.init();
var share = this;
var items = document.getElementsByClassName('nativeShare');
for (var i=0;i<items.length;i++) {
items[i].onclick = function(){
share.share(this.getAttribute('data-app'));
}
}
return this;
};
html:
<div id="nativeShare"></div>
<script>
var config = {
url:window.location.href,
title:document.title,
desc: ' ',
img:' ',
img_title:' ',
from:' '
};
var share_obj = new nativeShare('nativeShare',config);
</script>