/**
* mshare.js
* 此插件主要作用是在UC和QQ两个主流浏览器
* 上面触发微信分享到朋友圈或发送给朋友的功能
* 代码编写过程中 参考:
* http://mjs.sinaimg.cn/wap/module/share/201501261608/js/addShare.js
* 此外，JefferyWang的项目对我也有一定启示：
* https://github.com/JefferyWang/nativeShare.js
*
* @revisor angusfu1126@qq.com
* @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.com/JefferyWang/nativeShare.js
// http://mjs.sinaimg.cn/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.com/html5/js/qb.js' : 'http://jsapi.qq.com/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) {
platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends';
} else if (os == 1) {
platform = config.type == 1 ? 'kWeixinFriend' : 'kWeixin';
}
}
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 = config.type;
//微信好友1, 微信朋友圈8
type = type ? ((type == 1) ? 8 : 1) : '';
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.com'
* , desc : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.'
* , img : 'http://img1.40017.cn/cn/s/c/2015/loading.gif'
* , type : type // 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接弹出原生
* }
*/
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);
<div class="sharePage">
<div class="sharePage_background"></div>
<div class="sharePage_bottom">
<div class="share_mode">
<div class="share_mode_header">分享至</div>
<div class="share_mode_content">
<ul class="clearfix">
<li class="WeChat mshare" mshare="2">
<span></span>
<i>微信</i>
</li>
<li class="moments mshare" mshare="1">
<span></span>
<i>朋友圈</i>
</li>
</ul>
</div>
</div>
<div class="share_cancel">
取消
</div>
</div>
<div class="sharePage_arrow">
<span></span>
<p>点击微信右上角按钮进行分享</p>
</div>
</div>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/mobile/js/lib/jquery-2.0.3.min.js"></script>
<script src="/mobile/js/lib/mshare.js"></script>
<script>
var mshare = new mShare({
title : '{{shareTitle}}',
url : '{{shareUrl}}',
desc : '{{shareDesc}}',
img : '{{sharePic}}'
});
mshare.check(
function () {//支持原生分享
browserShow ();
$('.mshare').click(function () {
// 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接弹出原生
mshare.init(+$(this).attr('mshare'));
});
},
function () {//微信中支持微信分享
WeChatShow ();
wx.config({
debug: false,
appId: "{{options['appid']}}",
timestamp: "{{options['timestamp']}}",
nonceStr: "{{options['nonceStr']}}",
signature: "{{options['signature']}}",
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
});
wx.ready(function(){
wx.checkJsApi({
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function(res) {
//alert("检测结果" + res.errMsg);
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
wx.onMenuShareTimeline({
title: '{{shareTitle}}', // 分享标题
link: '{{shareUrl}}', // 分享链接
imgUrl: '{{sharePic}}', // 分享图标
success: function () {
//alert("分享到微信朋友圈成功");
// 用户确认分享后执行的回调函数
},
cancel: function () {
//alert("取消分享");
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareAppMessage({
title: '{{shareTitle}}', // 分享标题
link: '{{shareUrl}}', // 分享链接
imgUrl: '{{sharePic}}', // 分享图标
desc: "{{shareDesc}}", // 分享描述
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
//alert("分享到微信好友成功");
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
//alert("取消分享")
}
});
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
wx.error(function(res){
//alert('error');
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
},
function () {//不支持分享
shareHide();
}
);
//在浏览器中打开
function browserShow () {
//点击分享按钮
$('.share_button').show();
$('.share_button').click(function () {
$('.sharePage').addClass('sharePage_active');
$('.sharePage_bottom').animate({
bottom:0
},300);
});
//点击取消按钮
$('.share_cancel').click(function () {
$('.sharePage_bottom').animate({
bottom:-$('.sharePage_bottom').height()+'px'
},300,function () {
$('.sharePage').removeClass('sharePage_active');
});
});
//点击黑色背景，整个分享页面消失
$('.sharePage_background').click(function () {
$('.sharePage_bottom').animate({
bottom:-$('.sharePage_bottom').height()+'px'
},300,function () {
$('.sharePage').removeClass('sharePage_active');
});
});
}
//在微信中打开
function WeChatShow () {
//点击分享按钮
$('.share_button').show();
$('.share_button').click(function () {
$('.sharePage').addClass('sharePage_active');
$('.sharePage_arrow').addClass('sharePage_arrow_active');
});
//点击黑色背景整个分享页面消失
$('.sharePage_arrow').click(function () {
$('.sharePage').removeClass('sharePage_active');
$('.sharePage_arrow').removeClass('sharePage_arrow_active');
});
}
function shareHide() {
$('.share_button').hide();
}
</script>
网友评论