H5手机移动端调起浏览器（qq浏览器，uc浏览器）自带分享功能实例
（转载：https://blog.csdn.net/weixin\_38787928/article/details/86741227）
html：
1<span class="viewshare wx" data-mshare="2"></span> 2<span class="viewshare wxline" data-mshare="1"></span> 3<span class="viewshare QQ" data-mshare="3"></span> 4<span class="viewshare wb" data-mshare="4"></span>
js：
1// 引入JS文件 2<script src="js/mshare.js"></script> 3var u = navigator.appVersion; 4var uc = u.split('UCBrowser/').length > 1 ? 1 : 0; 5var qq = u.split('MQQBrowser/').length > 1 ? 2 : 0; 6var wx = ((u.match(/MicroMessenger/i)) && (u.match(/MicroMessenger/i).toString().toLowerCase() == 'micromessenger')); 7 8// 绑定单击事件 9$('.wx,.wxline,.QQ,.wb').on("click", function () { 10 if(uc||(qq && !wx)){ 11 mshare.init(+$(this).data('mshare')); 12 } 13}
mshare.js
1/** 2 * mshare.js 3 * 此插件主要作用是在UC和QQ两个主流浏览器 4 * 上面触发微信分享到朋友圈或发送给朋友的功能 5 * 代码编写过程中 参考: 6 * http://mjs.sinaimg.cn/wap/module/share/201501261608/js/addShare.js 7 * 此外，JefferyWang的项目对我也有一定启示： 8 * https://github.com/JefferyWang/nativeShare.js 9 * 10 */ 11 12!(function(global) { 13 'use strict'; 14 15 var UA, uc, qq, wx, tc, qqVs, ucVs, os,qqBridgeDone; 16 17 UA = navigator.appVersion; 18 19 // 是否是 UC 浏览器 20 uc = UA.split('UCBrowser/').length > 1 ? 1 : 0; 21 22 // 判断 qq 浏览器 23 // 然而qq浏览器分高低版本 2代表高版本 1代表低版本 24 qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0; 25 26 // 是否是微信 27 wx = ((UA.match(/MicroMessenger/i)) && (UA.match(/MicroMessenger/i).toString().toLowerCase() == 'micromessenger')); 28 29 // 浏览器版本 30 qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0; 31 ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0; 32 33 //获取操作系统信息 iPhone(1) Android(2) 34 os = (function () { 35 var ua = navigator.userAgent; 36 37 if (/iphone|ipod/i.test(ua)) { 38 return 1; 39 } else if(/android/i.test(ua)){ 40 return 2; 41 } else { 42 return 0; 43 } 44 }()); 45 46 // qq浏览器下面 是否加载好了相应的api文件 47 qqBridgeDone = false; 48 49 // 进一步细化版本和平台判断 50 // 参考: https://github.com/JefferyWang/nativeShare.js 51 // http://mjs.sinaimg.cn/wap/module/share/201501261608/js/addShare.js 52 if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) { 53 qq = 0; 54 } else { 55 if (qq && qqVs < 5.4 && os == 2) { 56 qq = 1; 57 } else { 58 if (uc && ( (ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2) )) { 59 uc = 0; 60 } 61 } 62 } 63 64 /** 65 * qq浏览器下面 根据不同版本 加载对应的bridge 66 * @method loadqqApi 67 * @param {Function} cb 回调函数 68 */ 69 function loadqqApi(cb) { 70 if (!qq) { // qq == 0 71 return cb && cb(); 72 } 73 74 var qqApiScript = document.createElement('script'); 75 //需要等加载过qq的接口文档之后，再去初始化分享组件 76 qqApiScript.onload = function () {cb && cb();}; 77 qqApiScript.onerror = function () {}; 78 // qq == 1 低版本 79 // qq == 2 高版本 80 qqApiScript.src = (qq == 1 ) ? 'http://3gimg.qq.com/html5/js/qb.js' : 'http://jsapi.qq.com/get?api=app.share'; 81 82 document.body.appendChild(qqApiScript); 83 } 84 85 86 /** 87 * UC浏览器分享 88 * @method ucShare 89 */ 90 function ucShare(config) { 91 // ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID'] 92 // 关于platform 93 // ios: kWeixin || kWeixinFriend; 94 // android: WechatFriends || WechatTimeline 95 // uc 分享会直接使用截图 96 97 var platform = '', shareInfo; 98 99 // 指定了分享类型 100 if (config.type) { 101 if (os == 2) { 102 if(config.type==1){ 103 platform = 'WechatTimeline'; 104 }else if(config.type==2){ 105 platform = 'WechatFriends'; 106 }else if(config.type==3){ 107 platform = 'QQ'; 108 }else if(config.type==4){ 109 platform = 'SinaWeibo'; 110 }else if(config.type==0){ 111 platform = 'undefined'; 112 } 113 } else if (os == 1) { 114 if(config.type==1){ 115 platform = 'kWeixinFriend'; 116 }else if(config.type==2){ 117 platform = 'kWeixin'; 118 }else if(config.type==3){ 119 platform = 'kQQ'; 120 }else if(config.type==4){ 121 platform = 'kSinaWeibo'; 122 }else if(config.type==0){ 123 platform = 'undefined'; 124 } 125 } 126 } 127 128 shareInfo = [ config.title, config.desc, config.url, platform, '', '', '' ]; 129 130 // android 131 if (window.ucweb) { 132 ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo); 133 } 134 // ios 135 else if (window.ucbrowser) { 136 ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo); 137 } 138 139 }; 140 141 142 /** 143 * qq浏览器分享函数 144 * @method qqShare 145 */ 146 function qqShare(config) { 147 var type = ''; 148 149 //微信好友1, 微信朋友圈8,QQ 4 150 if(config.type==1){ 151 type = 8; 152 }else if(config.type==2){ 153 type = 1; 154 }else if(config.type==3){ 155 type = 4; 156 }else if(config.type==4){ 157 type = 11; 158 }else if(config.type==0){ 159 type = 'undefined'; 160 } 161 162 var share = function () { 163 var shareInfo = { 164 'url': config.url, 165 'title': config.title, 166 'description': config.desc, 167 'img_url': config.img, 168 'img_title': config.title, 169 'to_app': type, 170 'cus_txt': '' 171 }; 172 if (window.browser) { 173 browser.app && browser.app.share(shareInfo); 174 } else if (window.qb) { 175 qb.share && qb.share(shareInfo); 176 } 177 }; 178 179 if (qqBridgeDone) { 180 share(); 181 } else { 182 loadqqApi(share); 183 } 184 }; 185 186 /** 187 * 对外暴露的接口函数 188 * @method mShare 189 * @param {Object} config 配置对象 参数见示例 190 * var config = { 191 * title : 'Lorem ipsum dolor sit.' 192 * , url : 'http://m.ly.com' 193 * , desc : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.' 194 * , img : 'http://img1.40017.cn/cn/s/c/2015/loading.gif' 195 * , type : type // 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接弹出原生 3==>QQ 196 * } 197 */ 198 function mShare(config) { 199 this.check = function (succssFn, wxFn, failFn) { 200 if (uc) { 201 succssFn(); 202 } else if (qq && !wx) { 203 succssFn(); 204 } else if (wx) { 205 wxFn(); 206 } else { 207 failFn(); 208 } 209 } 210 this.config = config; 211 this.init = function (type) { 212 if (typeof type != 'undefined') this.config.type = type; 213 try { 214 if (uc) { 215 ucShare(this.config); 216 } else if (qq && !wx) { 217 qqShare(this.config); 218 } 219 } catch (e) {} 220 } 221 } 222 223 // 预加载 qq bridge 224 loadqqApi(function () { 225 qqBridgeDone = true; 226 }); 227 228 // 方法暴露给全局变量 229 global.mShare = mShare; 230 231})(this);