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

2016-09-30 16:47:16  阅读 1309 次 评论 1 条
[html] view plain copy
  1. <!DOCTYPE html>  

  2. <html>  

  3.   

  4.     <head>  

  5.         <meta charset="utf-8">  

  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  

  7.         <title>HTML5网页如何调用浏览器APP的微信分享功能</title>  

  8.         <meta name="viewport" content="width=device-width, initial-scale=1" />  

  9.         <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />  

  10.         <link rel="stylesheet" type="text/css" href="css/test.css" />  

  11.         <style type="text/css">  

  12.             html,  

  13.             body {  

  14.                 margin: 0;  

  15.                 padding: 0;  

  16.             }  

  17.         </style>  

  18.   

  19.     </head>  

  20.   

  21.     <body>  

  22.         <span class="shareBtn" id="toshare">点击分享到</span>  

  23.         <div id="nativeShare"></div>  

  24.         <script type="text/javascript" src="js/vendor/jquery-1.11.3.min.js"></script>  

  25.         <script type="text/javascript" src="js/nativeShare.js"></script>  

  26.         <script type="text/javascript">  

  27.             $("#toshare").bind("click", function() {  

  28.                     var config = {  

  29.                         url: '', //分享url  

  30.                         title: '', //内容标题  

  31.                         desc: '', //描述  

  32.                         img: '', //分享的图片  

  33.                         img_title: '', //图片名称  

  34.                         from: '' //来源  

  35.                     };  

  36.                     var share_obj = new nativeShare('nativeShare', config);  

  37.                     $(".am-share").addClass("am-modal-active");  

  38.                     if ($(".sharebg").length > 0) {  

  39.                         $(".sharebg").addClass("sharebg-active");  

  40.                     } else {  

  41.                         $("body").append('<div class="sharebg"></div>');  

  42.                         $(".sharebg").addClass("sharebg-active");  

  43.                     }  

  44.                     $(".sharebg-active,.share_btn").click(function() {  

  45.                         $(".am-share").removeClass("am-modal-active");  

  46.                         setTimeout(function() {  

  47.                             $(".sharebg-active").removeClass("sharebg-active");  

  48.                             $(".sharebg").remove();  

  49.                         }, 300);  

  50.                     })  

  51.             });  

  52.         </script>  

  53.   

  54.     </body>  

  55.   

  56. </html>  

[javascript] view plain copy
  1. /** 

  2.  * Created by Jeffery Wang. 

  3.  * Create Time: 2015-06-16 19:52 

  4.  * Author Link: http://blog.wangjunfeng.com 

  5.  */  

  6. var nativeShare = function (elementNode, config) {  

  7.     if (!document.getElementById(elementNode)) {  

  8.         return false;  

  9.     }  

  10.   

  11.     var qApiSrc = {  

  12.         lower: "http://3gimg.qq.com/html5/js/qb.js",  

  13.         higher: "http://jsapi.qq.com/get?api=app.share"  

  14.     };  

  15.     var bLevel = {  

  16.         qq: {forbid: 0, lower: 1, higher: 2},  

  17.         uc: {forbid: 0, allow: 1}  

  18.     };  

  19.     var UA = navigator.appVersion;  

  20.     var isqqBrowser = (UA.split("MQQBrowser/").length > 1) ? bLevel.qq.higher : bLevel.qq.forbid;  

  21.     var isucBrowser = (UA.split("UCBrowser/").length > 1) ? bLevel.uc.allow : bLevel.uc.forbid;  

  22.     var version = {  

  23.         uc: "",  

  24.         qq: ""  

  25.     };  

  26.     var isWeixin = false;  

  27.   

  28.     config = config || {};  

  29.     this.elementNode = elementNode;  

  30.     this.url = config.url || document.location.href || '';  

  31.     this.title = config.title || document.title || '';  

  32.     this.desc = config.desc || document.title || '';  

  33.     this.img = config.img || document.getElementsByTagName('img').length > 0 && document.getElementsByTagName('img')[0].src || '';  

  34.     this.img_title = config.img_title || document.title || '';  

  35.     this.from = config.from || window.location.host || '';  

  36.     this.ucAppList = {  

  37.         sinaWeibo: ['kSinaWeibo', 'SinaWeibo', 11, '新浪微博'],  

  38.         weixin: ['kWeixin', 'WechatFriends', 1, '微信好友'],  

  39.         weixinFriend: ['kWeixinFriend', 'WechatTimeline', '8', '微信朋友圈'],  

  40.         QQ: ['kQQ', 'QQ', '4', 'QQ好友'],  

  41.         QZone: ['kQZone', 'QZone', '3', 'QQ空间']  

  42.     };  

  43.   

  44.     this.share = function (to_app) {  

  45.         var title = this.title, url = this.url, desc = this.desc, img = this.img, img_title = this.img_title, from = this.from;  

  46.         if (isucBrowser) {  

  47.             to_app = to_app == '' ? '' : (platform_os == 'iPhone' ? this.ucAppList[to_app][0] : this.ucAppList[to_app][1]);  

  48.             if (to_app == 'QZone') {  

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

  50.                 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 () {  

  51.                     k && k.parentNode && k.parentNode.removeChild(k)  

  52.                 }, 5E3);  

  53.             }  

  54.             if (typeof(ucweb) != "undefined") {  

  55.                 ucweb.startRequest("shell.page_share", [title, title, url, to_app, "", "@" + from, ""])  

  56.             } else {  

  57.                 if (typeof(ucbrowser) != "undefined") {  

  58.                     ucbrowser.web_share(title, title, url, to_app, "", "@" + from, '')  

  59.                 } else {  

  60.                 }  

  61.             }  

  62.         } else {  

  63.             if (isqqBrowser && !isWeixin) {  

  64.                 to_app = to_app == '' ? '' : this.ucAppList[to_app][2];  

  65.                 var ah = {  

  66.                     url: url,  

  67.                     title: title,  

  68.                     description: desc,  

  69.                     img_url: img,  

  70.                     img_title: img_title,  

  71.                     to_app: to_app,//微信好友1,腾讯微博2,QQ空间3,QQ好友4,生成二维码7,微信朋友圈8,啾啾分享9,复制网址10,分享到微博11,创意分享13  

  72.                     cus_txt: "请输入此时此刻想要分享的内容"  

  73.                 };  

  74.                 ah = to_app == '' ? '' : ah;  

  75.                 if (typeof(browser) != "undefined") {  

  76.                     if (typeof(browser.app) != "undefined" && isqqBrowser == bLevel.qq.higher) {  

  77.                         browser.app.share(ah)  

  78.                     }  

  79.                 } else {  

  80.                     if (typeof(window.qb) != "undefined" && isqqBrowser == bLevel.qq.lower) {  

  81.                         window.qb.share(ah)  

  82.                     } else {  

  83.                     }  

  84.                 }  

  85.             } else {  

  86.             }  

  87.         }  

  88.     };  

  89.   

  90.     this.html = function() {  

  91.         var position = document.getElementById(this.elementNode);  

  92.         var html = '<div class="am-share">'+  

  93.             '<div class="am-share-sns list clearfix">'+  

  94.             '<span data-app="weixin" class="nativeShare weixin"><i></i>微信好友</span>'+  

  95.             '<span data-app="weixinFriend" class="nativeShare weixin_timeline"><i></i>微信朋友圈</span>'+  

  96.             '<span data-app="sinaWeibo" class="nativeShare weibo"><i></i>新浪微博</span>'+  

  97.             '<span data-app="QQ" class="nativeShare qq"><i></i>QQ好友</span>'+  

  98.             '<span data-app="QZone" class="nativeShare qzone"><i></i>QQ空间</span>'+  

  99.             '<span data-app="" class="nativeShare more"><i></i>更多</span>'+  

  100.             '<div class="am-share-footer"><button class="share_btn">取消</button></div>'+  

  101.             '</div>'+  

  102.             '</div>';  

  103.         position.innerHTML = html;  

  104.     };  

  105.   

  106.     this.isloadqqApi = function () {  

  107.         if (isqqBrowser) {  

  108.             var b = (version.qq < 5.4) ? qApiSrc.lower : qApiSrc.higher;  

  109.             var d = document.createElement("script");  

  110.             var a = document.getElementsByTagName("body")[0];  

  111.             d.setAttribute("src", b);  

  112.             a.appendChild(d)  

  113.         }  

  114.     };  

  115.   

  116.     this.getPlantform = function () {  

  117.         ua = navigator.userAgent;  

  118.         if ((ua.indexOf("iPhone") > -1 || ua.indexOf("iPod") > -1)) {  

  119.             return "iPhone"  

  120.         }  

  121.         return "Android"  

  122.     };  

  123.   

  124.     this.is_weixin = function () {  

  125.         var a = UA.toLowerCase();  

  126.         if (a.match(/MicroMessenger/i) == "micromessenger") {  

  127.             return true  

  128.         } else {  

  129.             return false  

  130.         }  

  131.     };  

  132.   

  133.     this.getVersion = function (c) {  

  134.         var a = c.split("."), b = parseFloat(a[0] + "." + a[1]);  

  135.         return b  

  136.     };  

  137.   

  138.     this.init = function () {  

  139.         platform_os = this.getPlantform();  

  140.         version.qq = isqqBrowser ? this.getVersion(UA.split("MQQBrowser/")[1]) : 0;  

  141.         version.uc = isucBrowser ? this.getVersion(UA.split("UCBrowser/")[1]) : 0;  

  142.         isWeixin = this.is_weixin();  

  143.         if ((isqqBrowser && version.qq < 5.4 && platform_os == "iPhone") || (isqqBrowser && version.qq < 5.3 && platform_os == "Android")) {  

  144.             isqqBrowser = bLevel.qq.forbid  

  145.         } else {  

  146.             if (isqqBrowser && version.qq < 5.4 && platform_os == "Android") {  

  147.                 isqqBrowser = bLevel.qq.lower  

  148.             } else {  

  149.                 if (isucBrowser && ((version.uc < 10.2 && platform_os == "iPhone") || (version.uc < 9.7 && platform_os == "Android"))) {  

  150.                     isucBrowser = bLevel.uc.forbid  

  151.                 }  

  152.             }  

  153.         }  

  154.         this.isloadqqApi();  

  155.         if (isqqBrowser || isucBrowser) {  

  156.             this.html();  

  157.         } else {  

  158.             document.write('目前该分享插件仅支持手机UC浏览器和QQ浏览器');  

  159.         }  

  160.     };  

  161.   

  162.     this.init();  

  163.   

  164.     var share = this;  

  165.     var items = document.getElementsByClassName('nativeShare');  

  166.     for (var i=0;i<items.length;i++) {  

  167.         items[i].onclick = function(){  

  168.             share.share(this.getAttribute('data-app'));  

  169.         }  

  170.     }  

  171.   

  172.     return this;  

  173. };  


  1. .shareBtn {  

  2.     border: dotted 1px #ddd;  

  3.     display: block;  

  4.     width: 100px;  

  5.     text-align: center;  

  6.     margin: 20px auto 0 auto;  

  7.     cursor: pointer;  

  8.     height: 40px;  

  9.     line-height: 40px;  

  10. }  

  11.   

  12. .am-share {  

  13.     font-size: 14px;  

  14.     border-radius: 0;  

  15.     bottom: 0;  

  16.     left: 0;  

  17.     position: fixed;  

  18.     -webkit-transform: translateY(100%);  

  19.     -ms-transform: translateY(100%);  

  20.     transform: translateY(100%);  

  21.     -webkit-transition: -webkit-transform 300ms;  

  22.     transition: transform 300ms;  

  23.     width: 100%;  

  24.     z-index: 1110;  

  25. }  

  26.   

  27. .am-modal-active {  

  28.     transform: translateY(0px);  

  29.     -webkit-transform: translateY(0);  

  30.     -ms-transform: translateY(0);  

  31.     transform: translateY(0);  

  32. }  

  33.   

  34. .am-modal-out {  

  35.     z-index: 1109;  

  36.     -webkit-transform: translateY(100%);  

  37.     -ms-transform: translateY(100%);  

  38.     transform: translateY(100%)  

  39. }  

  40.   

  41. .am-share-footer .share_btn {  

  42.     color: #555;  

  43.     display: block;  

  44.     width: 100%;  

  45.     background-color: #fff;  

  46.     border: 1px solid #fff;  

  47.     border-radius: 0;  

  48.     cursor: pointer;  

  49.     font-size: 16px;  

  50.     font-weight: 400;  

  51.     line-height: 1.2;  

  52.     padding: 0.625em 0;  

  53.     text-align: center;  

  54.     transition: background-color 300ms ease-out 0s, border-color 300ms ease-out 0s;  

  55.     vertical-align: middle;  

  56.     white-space: nowrap;  

  57.     font-family: "微软雅黑";  

  58. }  

  59.   

  60. .am-share-sns {  

  61.     background-color: #fff;  

  62.     padding-top: 20px;  

  63.     height: auto;  

  64.     zoom: 1;  

  65.     overflow: auto;  

  66. }  

  67.   

  68. .am-share-sns a {  

  69.     color: #555;  

  70.     display: block;  

  71.     text-decoration: none;  

  72. }  

  73.   

  74. .am-share-sns span {  

  75.     display: block;  

  76. }  

  77.   

  78. .sharebg {  

  79.     background-color: rgba(0, 0, 0, 0.6);  

  80.     bottom: 0;  

  81.     height: 100%;  

  82.     left: 0;  

  83.     opacity: 0;  

  84.     position: fixed;  

  85.     right: 0;  

  86.     top: 0;  

  87.     width: 100%;  

  88.     z-index: 1100;  

  89.     display: none;  

  90. }  

  91.   

  92. .sharebg-active {  

  93.     opacity: 1;  

  94.     display: block;  

  95. }  

  96.   

  97.   

  98. /*插件*/  

  99.   

  100. #nativeShare .list {  

  101.     width: 100%;  

  102.     margin: 0 auto;  

  103. }  

  104.   

  105. #nativeShare .list span {  

  106.     width: 25%;  

  107.     display: inline-block;  

  108.     text-align: center;  

  109.     margin: 10px 0;  

  110. }  

  111.   

  112. #nativeShare .list span i {  

  113.     width: 40px;  

  114.     height: 40px;  

  115.     display: block;  

  116.     margin: 0 auto;  

  117.     margin-bottom: 5px;  

  118. }  

  119.   

  120. #nativeShare .weibo i {  

  121.     background-image: url(../icon/weibo.png);  

  122.     background-size: cover;  

  123. }  

  124.   

  125. #nativeShare .weixin i {  

  126.     background-image: url(../icon/weixin_friend.png);  

  127.     background-size: cover;  

  128. }  

  129.   

  130. #nativeShare .weixin_timeline i {  

  131.     background-image: url(../icon/weixin.png);  

  132.     background-size: cover;  

  133. }  

  134.   

  135. #nativeShare .qq i {  

  136.     background-image: url(../icon/qq.png);  

  137.     background-size: cover;  

  138. }  

  139.   

  140. #nativeShare .qzone i {  

  141.     background-image: url(../icon/qqzone.png);  

  142.     background-size: cover;  

  143. }  

  144.   

  145. #nativeShare .more i {  

  146.     background-image: url(../icon/more.png);  

  147.     background-size: cover;  

  148. }  


本文地址:http://blog.femyx.com/index.php/post/141.html
版权声明:本文为原创文章,版权归 风e梦 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

评论列表

  1. wenwenseo
    wenwenseo  @回复

    来自搜索引擎之外的搜外,QQ:115861111 寻求推广广告位