H5手机页面调起浏览器自带分享功能实例（QQ、UC浏览器微博、微信分享）
HTML：
<span class="viewshare wx" data-mshare="2"></span><span class="viewshare wxline" data-mshare="1"></span><span class="viewshare QQ" data-mshare="3"></span><span class="viewshare wb" data-mshare="4"></span>
JS：
// 引入JS文件<script src="js/mshare.js"></script>var u = navigator.appVersion;var uc = u.split('UCBrowser/').length > 1 ? 1 : 0;var qq = u.split('MQQBrowser/').length > 1 ? 2 : 0;var wx = ((u.match(/MicroMessenger/i)) && (u.match(/MicroMessenger/i).toString().toLowerCase() == 'micromessenger'));// 绑定单击事件$('.wx,.wxline,.QQ,.wb').on("click", function () {if(uc||(qq && !wx)){mshare.init(+$(this).data('mshare'));}}
mshare.js
/*** mshare.js* 此插件主要作用是在UC和QQ两个主流浏览器* 上面触发微信分享到朋友圈或发送给朋友的功能* 代码编写过程中 参考:* /wap/module/share/01261608/js/addShare.js* 此外，JefferyWang的项目对我也有一定启示：* /JefferyWang/nativeShare.js** @revisor angusfu1126@* @date-07-22*/!(function(global) {'use strict';var UA, uc, qq, wx, tc, qqVs, ucVs, os,qqBridgeDone;UA = navigator.appVersion;// 是否是 UC 浏览器uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;// 判断 qq 浏览器// 然而qq浏览器分高低版本 2代表高版本 1代表低版本qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;// 是否是微信wx = ((UA.match(/MicroMessenger/i)) && (UA.match(/MicroMessenger/i).toString().toLowerCase() == 'micromessenger'));// 浏览器版本qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;//获取操作系统信息 iPhone(1) Android(2)os = (function () {var ua = navigator.userAgent;if (/iphone|ipod/i.test(ua)) {return 1;} else if(/android/i.test(ua)){return 2;} else {return 0;}}());// qq浏览器下面 是否加载好了相应的api文件qqBridgeDone = false;// 进一步细化版本和平台判断// 参考: /JefferyWang/nativeShare.js// /wap/module/share/01261608/js/addShare.jsif ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {qq = 0;} else {if (qq && qqVs < 5.4 && os == 2) {qq = 1;} else {if (uc && ( (ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2) )) {uc = 0;}}}/*** qq浏览器下面 根据不同版本 加载对应的bridge* @method loadqqApi* @param {Function} cb 回调函数*/function loadqqApi(cb) {if (!qq) { // qq == 0return cb && cb();}var qqApiScript = document.createElement('script');//需要等加载过qq的接口文档之后，再去初始化分享组件qqApiScript.onload = function () {cb && cb();};qqApiScript.onerror = function () {};// qq == 1 低版本// qq == 2 高版本qqApiScript.src = (qq == 1 ) ? '/html5/js/qb.js' : '/get?api=app.share';document.body.appendChild(qqApiScript);}/*** UC浏览器分享* @method ucShare*/function ucShare(config) {// ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']// 关于platform// ios: kWeixin || kWeixinFriend;// android: WechatFriends || WechatTimeline// uc 分享会直接使用截图var platform = '', shareInfo;// 指定了分享类型if (config.type) {if (os == 2) {if(config.type==1){platform = 'WechatTimeline';}else if(config.type==2){platform = 'WechatFriends';}else if(config.type==3){platform = 'QQ';}else if(config.type==4){platform = 'SinaWeibo';}else if(config.type==0){platform = 'undefined';}} else if (os == 1) {if(config.type==1){platform = 'kWeixinFriend';}else if(config.type==2){platform = 'kWeixin';}else if(config.type==3){platform = 'kQQ';}else if(config.type==4){platform = 'kSinaWeibo';}else if(config.type==0){platform = 'undefined';}}}shareInfo = [ config.title, config.desc, config.url, platform, '', '', '' ];// androidif (window.ucweb) {ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);}// ioselse if (window.ucbrowser) {ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);}};/*** qq浏览器分享函数* @method qqShare*/function qqShare(config) {var type = '';//微信好友1, 微信朋友圈8,QQ 4if(config.type==1){type = 8;}else if(config.type==2){type = 1;}else if(config.type==3){type = 4;}else if(config.type==4){type = 11;}else if(config.type==0){type = 'undefined';}var share = function () {var shareInfo = {'url': config.url,'title': config.title,'description': config.desc,'img_url': config.img,'img_title': config.title,'to_app': type,'cus_txt': ''};if (window.browser) {browser.app && browser.app.share(shareInfo);} else if (window.qb) {qb.share && qb.share(shareInfo);}};if (qqBridgeDone) {share();} else {loadqqApi(share);}};/*** 对外暴露的接口函数* @method mShare* @param {Object} config 配置对象 参数见示例*var config = {*title : 'Lorem ipsum dolor sit.'* , url : ''* , desc : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.'* , img : '/cn/s/c//loading.gif'* , type : type // 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接弹出原生 3==>QQ*}*/function mShare(config) {this.check = function (succssFn, wxFn, failFn) {if (uc) {succssFn();} else if (qq && !wx) {succssFn();} else if (wx) {wxFn();} else {failFn();}}this.config = config;this.init = function (type) {if (typeof type != 'undefined') this.config.type = type;try {if (uc) {ucShare(this.config);} else if (qq && !wx) {qqShare(this.config);}} catch (e) {}}}// 预加载 qq bridgeloadqqApi(function () {qqBridgeDone = true;});// 方法暴露给全局变量global.mShare = mShare;})(this);
如果觉得《H5手机页面调起浏览器自带分享功能实例（QQ UC浏览器微博 微信分享）》对你有帮助，请点赞、收藏，并留下你的观点哦！
