HTML5网页如何调用浏览器APP的微信分享功能

web_qdkf

于 2015-12-31 17:29:03 发布

28757

分类专栏： jquery

本文链接：https://blog.csdn.net/web_qdkf/article/details/50442938

版权

jquery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

提示:目前仅仅支持uc浏览器和QQ浏览器查看功能

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>HTML5网页如何调用浏览器APP的微信分享功能</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
		<link rel="stylesheet" type="text/css" href="css/test.css" />
		<style type="text/css">
			html,
			body {
				margin: 0;
				padding: 0;
			}
		</style>

	</head>

	<body>
		<span class="shareBtn" id="toshare">点击分享到</span>
		<div id="nativeShare"></div>
		<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">
			$("#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>

	</body>

</html>

/**
 * Created by Jeffery Wang.
 * Create Time: 2015-06-16 19:52
 * Author Link: http://blog.wangjunfeng.com
 */
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)
                }, 5E3);
            }
            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 {
            if (isqqBrowser && !isWeixin) {
                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;
                if (typeof(browser) != "undefined") {
                    if (typeof(browser.app) != "undefined" && isqqBrowser == bLevel.qq.higher) {
                        browser.app.share(ah)
                    }
                } else {
                    if (typeof(window.qb) != "undefined" && isqqBrowser == bLevel.qq.lower) {
                        window.qb.share(ah)
                    } else {
                    }
                }
            } else {
            }
        }
    };

    this.html = function() {
        var position = document.getElementById(this.elementNode);
        var html = '<div class="am-share">'+
            '<div class="am-share-sns list clearfix">'+
            '<span data-app="weixin" class="nativeShare weixin"><i></i>微信好友</span>'+
            '<span data-app="weixinFriend" class="nativeShare weixin_timeline"><i></i>微信朋友圈</span>'+
            '<span data-app="sinaWeibo" class="nativeShare weibo"><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 class="am-share-footer"><button class="share_btn">取消</button></div>'+
            '</div>'+
            '</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;
        isWeixin = this.is_weixin();
        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('目前该分享插件仅支持手机UC浏览器和QQ浏览器');
        }
    };

    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;
};

.shareBtn {
	border: dotted 1px #ddd;
	display: block;
	width: 100px;
	text-align: center;
	margin: 20px auto 0 auto;
	cursor: pointer;
	height: 40px;
	line-height: 40px;
}

.am-share {
	font-size: 14px;
	border-radius: 0;
	bottom: 0;
	left: 0;
	position: fixed;
	-webkit-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: -webkit-transform 300ms;
	transition: transform 300ms;
	width: 100%;
	z-index: 1110;
}

.am-modal-active {
	transform: translateY(0px);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}

.am-modal-out {
	z-index: 1109;
	-webkit-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%)
}

.am-share-footer .share_btn {
	color: #555;
	display: block;
	width: 100%;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 0;
	cursor: pointer;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	padding: 0.625em 0;
	text-align: center;
	transition: background-color 300ms ease-out 0s, border-color 300ms ease-out 0s;
	vertical-align: middle;
	white-space: nowrap;
	font-family: "微软雅黑";
}

.am-share-sns {
	background-color: #fff;
	padding-top: 20px;
	height: auto;
	zoom: 1;
	overflow: auto;
}

.am-share-sns a {
	color: #555;
	display: block;
	text-decoration: none;
}

.am-share-sns span {
	display: block;
}

.sharebg {
	background-color: rgba(0, 0, 0, 0.6);
	bottom: 0;
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 1100;
	display: none;
}

.sharebg-active {
	opacity: 1;
	display: block;
}


/*插件*/

#nativeShare .list {
	width: 100%;
	margin: 0 auto;
}

#nativeShare .list span {
	width: 25%;
	display: inline-block;
	text-align: center;
	margin: 10px 0;
}

#nativeShare .list span i {
	width: 40px;
	height: 40px;
	display: block;
	margin: 0 auto;
	margin-bottom: 5px;
}

#nativeShare .weibo i {
	background-image: url(../icon/weibo.png);
	background-size: cover;
}

#nativeShare .weixin i {
	background-image: url(../icon/weixin_friend.png);
	background-size: cover;
}

#nativeShare .weixin_timeline i {
	background-image: url(../icon/weixin.png);
	background-size: cover;
}

#nativeShare .qq i {
	background-image: url(../icon/qq.png);
	background-size: cover;
}

#nativeShare .qzone i {
	background-image: url(../icon/qqzone.png);
	background-size: cover;
}

#nativeShare .more i {
	background-image: url(../icon/more.png);
	background-size: cover;
}

web_qdkf

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
7
评论
HTML5网页如何调用浏览器APP的微信分享功能

提示:目前仅仅支持uc浏览器和QQ浏览器查看功能<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>HTM...
复制链接

扫一扫