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

点击分享到

/** * 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 = '', 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 = '
'+            '
'+            '微信好友'+            '微信朋友圈'+            '新浪微博'+            'QQ好友'+            'QQ空间'+            '更多'+            '
取消
'+            '
'+            '
';        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


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


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