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两个主流浏览器
* 上面触发微信分享到朋友圈或发送给朋友的功能
* 代码编写过程中 参考:
* http://mjs.sinaimg/wap/module/share/201501261608/js/addShare.js
* 此外，JefferyWang的项目对我也有一定启示：
* https://github/JefferyWang/nativeShare.js
*
* @revisor angusfu1126@qq
* @date 2015-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;
// 进一步细化版本和平台判断
// 参考: https://github/JefferyWang/nativeShare.js
// http://mjs.sinaimg/wap/module/share/201501261608/js/addShare.js
if ((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 == 0
return cb && cb();
}
var qqApiScript = document.createElement('script');
//需要等加载过qq的接口文档之后，再去初始化分享组件
qqApiScript.onload = function () {cb && cb();};
qqApiScript.onerror = function () {};
// qq == 1 低版本
// qq == 2 高版本
qqApiScript.src = (qq == 1 ) ? 'http://3gimg.qq/html5/js/qb.js' : 'http://jsapi.qq/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, '', '', '' ];
// android
if (window.ucweb) {
ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
}
// ios
else if (window.ucbrowser) {
ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
}
};
/**
* qq浏览器分享函数
* @method qqShare
*/
function qqShare(config) {
var type = '';
//微信好友1, 微信朋友圈8,QQ 4
if(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 : 'http://m.ly'
* , desc : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.'
* , img : 'http://img1.40017/cn/s/c/2015/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 bridge
loadqqApi(function () {
qqBridgeDone = true;
});
// 方法暴露给全局变量
global.mShare = mShare;
})(this);
更多推荐
H5手机移动端调起浏览器自带分享功能实例（QQ、UC浏览器微博、微信分享）
发布评论