本文章实现的通用分享组件包括以下社交平台：
- 微信
- 新浪微博
- QQ空间
- QQ好友
- 豆瓣分享
- 易信分享
- 人人分享
以上的分享功能按照实现方式可以分为两类，一类是是微信分享，一类是非微信分享。
一、非微信分享
非微信类的社交类平台实现分享的方式基本都是指定一个特定的链接url，然后在url后面加上特定的query参数新打开一个窗口跳到平台的分享页面。然后分享页面中的逻辑代码获取url后面的query参数的值，填充到input框中，待用户点击分享。
比如：
sina:http://service.weibo.com/share/share.php?url=&appkey=&pic=&ralateUid=&language=zh_cn&sudaref=
qZone:http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=&title=&pics=&summary=
其实除了不同的分享页面链接，所需的参数基本就是 分享标题、分享描述、分享图片、分享的链接，下面的代码是实现各种平台分享链接的拼接，使用面对对象的写法来实现。基础的构造函数是我导师写的，我在基础上添加一些方法以及基于这个构造函数实现通用的分享UI组件。
/**
* 专题分享功能
* 创建一个新的分享
* 传入参数object
* options : {
* title 新浪分享的标题
* pic 新浪分享图片
*
* mTitle 微信、易信分享的内容
* mDescription 微信、易信分享的文案：主要用于人人网 开心网
* mPic 微信、易信分享的图片
*
* url 分享的链接
* weixinQR 微信分享二维码
* }
*/
(function(jq,
/**
* 分享ui
* web和移动端均可用
*/
function ShareUI(){
return this.init.apply(this, arguments);
};
var shPro = ShareUI.prototype;
shPro.init = function(options){
//微博专用
this.__title = options.title || '';
this.__pic = options.pic || '';
//QQ、微信、易信
this.__mTitle = options.mTitle || '';
this.__mDescription = options.mDescription || '';
this.__mPic = options.mPic || '';
this.__url = options.url || g.location.href;
this.__mobileUrl = options.mobileUrl || this.__url; // 移动端分享的链接
this.__weixinQR = options.weixinQR || '';
this.configData();
this.initMobileShare();
}
shPro.configData = function(){
//set the shareID
this.__shareID = {};
this.__shareID.sina = {};
this.__shareID.sina.id = '3024282805'; //sina weibo appID
this.__shareID.sina.ralateUid = '';//sina weibo @userID
this.__shareID.renren = '';
//设置新开窗口的样式、定位
var _ustr=[];
_ustr[0] = 'height=505,width=615,top=' + (screen.height - 280) / 2 ;
_ustr[1] = 'left=' + (screen.width - 550) / 2 ;
_ustr[2] = 'toolbar=no, menubar=no, scrollbars=no,';
_ustr[2] += 'resizable=yes,location=no, status=no';
this.__window = _ustr.join(',');
}
// qzone分享
shPro.shareQzone = function(){
var _param = {
url: this.__url,
title: this.__mTitle,
pics: this.__mPic,
summary: this.__mDescription
}
var arr = [];
for( var tmp in _param ){
arr.push(tmp + '=' + encodeURIComponent( _param[tmp] || '' ) )
}
url = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?'
+ arr.join('&');
g.open(url, 'Qzone', this.__window);
}
//QQ好友分享
shPro.shareQQ = function(){
var _param = {
url: this.__url,
title: this.__mTitle,
pics: this.__mPic,
summary: this.__mDescription
}
var arr = [];
for( var tmp in _param ){
arr.push(tmp + '=' + encodeURIComponent( _param[tmp] || '' ) )
}
url = 'http://connect.qq.com/widget/shareqq/index.html?' + arr.join('&');
g.open(url, 'QQ', this.__window);
}
//豆瓣分享
shPro.shareDouban = function(){
var _param = {
href: this.__url,
name: this.__mTitle,
image: this.__mPic,
text: this.__mDescription
}
var arr = [];
for( var tmp in _param ){
arr.push(tmp + '=' + encodeURIComponent( _param[tmp] || '' ) )
}
url = 'https://www.douban.com/share/service?' + arr.join('&');
g.open(url, 'Douban', this.__window);
}
// 新浪分享
shPro.shareSina = function(){
var param = {
url:this.__url,
appkey:this.__shareID.sina.id, /**你申请的应用appkey,显示分享来源(可选)*/
title:this.__title, /**分享的文字内容(可选，默认为所在页面的title)*/
pic:this.__pic, /**分享图片的路径(可选)*/
/**关联用户的UID，分享微博会@该用户(可选)*/
ralateUid:this.__shareID.sina.ralateUid,
language:'zh_cn' /**设置语言，zh_cn|zh_tw(可选)*/
}
var arr = [];
for( var tmp in param ){
arr.push(tmp + '=' + encodeURIComponent( param[tmp] || '' ) )
}
url = 'http://service.weibo.com/share/share.php?' + arr.join('&');
g.open(url, "_blank", this.__window);
}
// 易信分享
shPro.shareYixin = function(){
var _param = {
appkey : '36405d2036cc81b6a',
type : 'webpage',
title : '网易云课堂',
desc : this.__title,
userdesc : '',
pic : this.__pic,
url : this.__url
}
var arr = [];
for(var tmp in _param){
arr.push(tmp + '=' + encodeURIComponent( _param[tmp] || '' ));
}
url = 'http://open.yixin.im/share?' + arr.join('&');
g.open(url, '_blank', this.__window);
}
// 分享人人
shPro.shareRenren = function(){
var rrShareParam = {
api_key:this.__shareID.renren,
resourceUrl : '', //分享的资源Url
//分享的资源来源Url,默认为header中的Referer
//如果分享失败可用resourceUrl试试
srcUrl : this.__url,
pic : this.__pic, //分享的主题图片Url
title : this.__title, //分享的标题
description : this.__mDescription //分享的详细描述
};
var hl = location.href.indexOf('#');
var resUrl = (hl == -1 ? location.href : location.href.substr(0, hl));
var shareImgs = "";
var getParam = function(param) {
param = param || {};
param.api_key = param.api_key || '';
param.resourceUrl = param.resourceUrl || resUrl;
param.title = param.title || '';
param.pic = param.pic || '';
param.description = param.description || '';
if (resUrl == param.resourceUrl) {
//一般就是当前页面的分享,因此取当前页面的img
param.images = param.images || shareImgs;
}
param.charset = param.charset || '';
return param;
}
var submitUrl = 'http://widget.renren.com/dialog/share';
var p = getParam(rrShareParam);
var prm = [];
for (var i in p) {
if (p[i])
prm.push(i + '=' + encodeURIComponent(p[i]));
}
var url = submitUrl + "?" + prm.join('&'),
//maxLgh = (eu._$isIE ? 2048 : 4100), //不知道干嘛用的
wa = 'width=700,height=650,left=0,top=0,resizable=yes,scrollbars=1';
g.open(url, 'renren', wa);
}
window.createShare = jq.createShare = function(options){
return new ShareUI(options);
};
})(jQuery, window);
以上的构造函数定义了多个平台的分享方式的函数，只要传入必要参数创建一个实例，就可以调用到各种平台分享的分享方法。用法:
//后面的组件会用到window.shareObj 对象
window.shareObj = jq.createShare({
mDescription: "上传夏日照片，赢Apple MacBook、航拍无人机、尼康单反...@网易云课堂 SHOW出真我大赛火爆进行ing"
mPic: "http://nos.netease.com/edu-image/B32E160BF0786743DC43AAE81C80B317.jpg"
mTitle: "上传1张美照换Apple MacBook、航拍无人机、尼康单反..."
mobileUrl: "http://study.163.com/topics/youliaoV2"
pic: "http://nos.netease.com/edu-image/B32E160BF0786743DC43AAE81C80B317.jpg"
title: "上传夏日照片，赢Apple MacBook、航拍无人机、尼康单反...@网易云课堂 SHOW出真我大赛火爆进行ing"
url: "http://study.163.com/topics/youliaoV2"
weixinQR: "http://nos.netease.com/edu-image/EF63B97D5D1FE412E0E2584ED4F619BA.png"
});
//点击分享到QQ空间
window.shareObj.shareQzone();
以上的js只是定义了各个社交平台的分享方式的方法，而我们日常活动的需求需要实现的分享方式样式只是样式与分享平台的个数的区别，所以我们要基于以上的基础构造函数写出一个可配置的通用UI。组件的基本样式如下，可以控制图标的大小以及显示的个数。
temp1.png
web端分享组件js
//web端分享组件
//可用方法：
//show() 显示分享组件
//hide() 隐藏分享组件
//sample
// var sHandler = jq.initWebShareUI({
// clazz: 'my-share',
// parent: $('#shareBox'),
// });
// var timer = null;
// $('#shareBox').on('mouseover', function(){
// clearTimeout(timer);
// sHandler.show();
// });
// $('#shareBox').on('mouseleave', function(){
// timer = setTimeout(function(){
// sHandler.hide();
// },500);
// });
(function(jq, g){
jq(document).ready(function(jq){
function WebShareUI(){
return this.init.apply(this, arguments);
}
var shareTpl = '<div class="m-share-plugin">\
<ul id="j-shareWrap" class="f-cb">\
<li class="weixin" data-for="weixin">\
<span class="weixinCode" id="j-weixinCode">\
<i class="angle" id="j-weixinAngle"></i>\
<img src="" class="shareImg" id="j-shareImg" alt="">\
</span>\
</li>\
<li class="sina j-share" data-for="sina"></li>\
<li class="qzone j-share" data-for="qzone"></li>\
<li class="yixin j-share" data-for="yixin"></li>\
<li class="qq j-share" data-for="qq"></li>\
<li class="renren j-share" data-for="renren"></li>\
<li class="douban j-share" data-for="douban"></li>\
</ul>\
</div>',
sPro = WebShareUI.prototype;
/**
* 分享组件参数
* @type {Object}
* @param {node object} parent 父节点
* @param {array} hideShareWays ['weixin','sina','qzone','yixin','qq','renren','douban']不需要显示的分享方式
* @param {string} clazz 分享框外层class
* @param {string} weixinCodeUrl 微信二维码链接、不传取公用的
* @param {string} originCodeUrl 作品id，传给后端返回二维码链接
* @param {string} logoWidth 每一个图标的大小
* @param {string} weixinCodeWidth 微信二维码的大小
*/
WebShareUI.settings = {
parent: document.body,
hideShareWays: [],
clazz: '',
weixinCodeUrl: '',
originCodeUrl: '',
logoWidth: 60,
weixinCodeWidth: 120
}
sPro.init = function(_option){
this.settings = $.extend({},WebShareUI.settings, _option);
this.tpl = $(shareTpl);
this.getNodes();
this.initTpl();
this.bindEvent();
this.appendToDoc();
}
sPro.initTpl = function(){
var tpl = this.tpl,
remvoeItem = this.settings.hideShareWays,
that = this,
len = remvoeItem.length;
/**
* 背景图片的原始positon
* 原始logo 120* 120 总大小 440*440 间隔20px
* @type {Object}
*/
var bgPos = {
'sina': {
x: -20,
y: -20
},
'qzone': {
x: -160,
y: -20
},
'weixin': {
x: -300,
y: -20
},
'yixin': {
x: -20,
y: -160
},
'douban': {
x: -160,
y: -160
},
'qq': {
x: -300,
y: -160
},
'renren': {
x: -160,
y: -300
}
};
var logoOriginWidth = 120;
var allLogoOriginWidth = 440;
var percent = (this.settings.logoWidth / logoOriginWidth).toFixed(2)-0.01;
//选择隐藏的分享方式
if( len > 0){
for (var i = 0; i < len; i++) {
tpl.find('.' + remvoeItem[i]).remove();
};
}
this.tpl.addClass(this.settings.clazz);
if(this.settings.weixinCodeUrl){
$(this.shareImgNode).attr('src', this.settings.weixinCodeUrl);
}else{
$(this.shareImgNode).attr('src', g.shareObj.__weixinQR);
}
//调整分享方式的背景定位
tpl.find('li').each(function(i){
var className = $(this).data('for');
$(this).css({
'width': that.settings.logoWidth + 'px',
'height': that.settings.logoWidth + 'px',
'background-size': allLogoOriginWidth * percent + 'px ' + allLogoOriginWidth * percent + 'px',
'background-position': bgPos[className].x * percent + 'px ' + bgPos[className].y * percent + 'px'
});
});
//调整微信二维码的大小及定位
this.weixinCodeNode.css({
'width': that.settings.weixinCodeWidth + 'px',
'height': that.settings.weixinCodeWidth + 'px',
'top': that.settings.logoWidth + 'px',
'left': ((that.settings.logoWidth - that.settings.weixinCodeWidth) / 2).toFixed(2) + 'px'
});
this.weixinAngleNode.css({
'left': ((that.settings.weixinCodeWidth - 10) / 2).toFixed(2) + 'px'
});
}
sPro.getNodes = function(){
this.shareWrapNode = this.tpl.find('#j-shareWrap');
this.shareImgNode = this.tpl.find('#j-shareImg');
this.weixinCodeNode = this.tpl.find('#j-weixinCode');
this.weixinAngleNode = this.tpl.find('#j-weixinAngle');
}
sPro.bindEvent = function(){
// 绑定分享按钮
$(this.shareWrapNode).on('click', '.j-share', function(){
var className = $(this).data('for');
switch(className){
case 'qzone' :
shareObj.shareQzone();
break;
case 'sina' :
shareObj.shareSina();
break;
case 'yixin' :
shareObj.shareYixin();
break;
case 'qq' :
shareObj.shareQQ();
break;
case 'renren' :
shareObj.shareRenren();
break;
case 'douban' :
shareObj.shareDouban();
break;
default :
console.log('class name no match');
}
});
}
sPro.appendToDoc = function(){
$(this.settings.parent).append(this.tpl);
}
sPro.show = function(){
$(this.tpl).css({'display':'block'});
}
sPro.hide = function(){
$(this.tpl).css({'display':'none'});
}
jq.initWebShareUI = function(option){
return (new WebShareUI(option));
}
})
})(jQuery, window);
UI组件里面的逻辑会根据传入的参数设置每个icon的大小并自动计算微信二维码的定位。然后调用show()方法就会把分享组件append到你指定的parent节点中,并且每个icon都具备了分享功能。
使用：
$.initWebShareUI({
parent:document.body,
logoWidth: 80,
weixinCodeWidth : 120,
clazz:' myShare'})
.show();
结果：
Paste_Image.png
当然，你可能并不需要那么多的分享方式，你可以选择隐藏不需要的分享方式
$.initWebShareUI({
parent:document.body,
logoWidth: 100,
hideShareWays:['yixin','qq','renren','douban']
weixinCodeWidth : 150,
clazz:' myShare'})
.show();
结果：
Paste_Image.png
分享组件的样式我只是写了基本的，如果需要样式覆盖，请在传进去的clazz类中写样式覆盖。
web端分享css样式。
.m-share-plugin{
display: none;
span{
float: left;
font-size: 18px;
}
ul{
float: left;
li{
float: left;
margin-left: 10px;
cursor: pointer;
background: url(http://nos.netease.com/edu-image/12C15D2DBEB627E70D4EAD2035B862CB.png) 0 0 no-repeat;
}
.weixin:hover{
.weixinCode{
display: block;
}
}
.weixinCode{
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 2;
.angle{
position: absolute;
top: -10px;
border: 5px solid transparent;
border-bottom-color: #fff;
left: 59px;
}
.shareImg{
display: block;
width: 100%;
vertical-align: top;
}
}
.weixin{
position: relative;
background-position: -74px -4px;
}
.qzone{
background-position: -40px -4px;
}
.sina{
background-position: -4px -4px;
}
.yixin{
background-position: -126px 0;
}
.renren{
background-position: -40px -74px;
}
}
}
.my-share{
position: absolute;
padding: 4px 20px;
background-color: #e6e6e6;
top: -42px;
left: 0;
width: auto;
border-radius: 7px;
ul{
li{
width: 32px;
height: 32px;
margin-left: 18px;
}
.weixinCode{
width: 120px;
height: 120px;
left: -44px;
.shareImg{
width: 120px;
height: 120px;
}
.angle{
top: -10px;
left: 54px;
}
}
}
}
移动端的分享组件要判断是否是微信，因为微信不支持webview页面中直接调用分享功能，所以只能弹出蒙层提示用户右上角分享。其他非微信分享社交平台，经过测试，只有新浪微博、QQ空间、易信提供了分享适配页面，所以我也只提供了这三个，要是有需求，可以自己去拓展。我还实现了app中调起app中原生分享控件的方法，如果有需求，可以找客户端开发人员配合实现。
效果图：
移动端浏览器：
Paste_Image.png
在微信中点分享的时候提示右上角分享（不知道现在使用sdk能不能点击按钮直接跳去分享）：
Paste_Image.png
app中点击分享调起app分享控件并把分享数据传给app
Paste_Image.png
移动端分享组件js
/**
* 移动端通用分享组件方法
* QQ好友、豆瓣、人人的登录弹框暂时不可以适配、暂时不能用
* 移动端的分享只需要调用$.showMobileShareDialog()方法，会根据微信、app、手机浏览器调用相对应的方法
*
* 移动端分享参数
* @type {Object}
* @param {string} mContent 移动端浏览器分享顶部自定义文案
* @param {string} wxDiyText [微信cover 自定义文案]
* @param {string} wxTipsText 微信分享右上角分享提示文案
* author @lbl
*/
(function(jq, g){
function MobileShareDialog(){
return this.init.apply(this, arguments);
}
MobileShareDialog.setting = {
mContent : '',
wxDiyText : '',
afterShowWX : null,
wxTipsText : '<p class="tipText">请点击右上角<br>发送给好友或分享到朋友圈</p>',
};
var msdPro = MobileShareDialog.prototype;
var maskObj = $.showComMask();
msdPro.init = function(options){
this.setting = $.extend({}, MobileShareDialog.setting, options);
if($.isWeixin()){
this.initWeixinTpl();
}else{
this.initMobileTpl();
}
}
//微信分享，提示右上角分享
msdPro.initWeixinTpl = function(){
this.getWXNodes();
this.updateWXTpl();
this.bindWXEvent();
this.show();
}
msdPro.getWXNodes = function(){
var wxTpl = '<div class="m-weixin-cover-box">\
<p class="guide-arrow">\
\
</p>\
<div id="j-shareTipsText" class="share-tips-text">\
</div>\
<div id="j-diyText" class="diy-text">\
</div>\
<div class="close-cover">\
<a id="j-closeCover">知道了</a>\
</div>\
</div>';
var tpl = this.tpl = $(wxTpl);
this.shareTipsTextNode = tpl.find('#j-shareTipsText');
this.diyTextNode = tpl.find('#j-diyText');
this.closeCoverNode = tpl.find('#j-closeCover');
}
msdPro.updateWXTpl = function(){
this.shareTipsTextNode.html(this.setting.wxTipsText);
this.diyTextNode.html(this.setting.wxDiyText);
}
msdPro.bindWXEvent = function(){
var that = this;
$(this.closeCoverNode).click(function(){
that.destroy();
})
}
//app内分享，直接调用app分享控件
msdPro.initAppTpl = function(){
var appTpl = ''
}
//移动端浏览器分享
msdPro.initMobileTpl = function(){
this.getMBNodes();
this.updateMBTpl();
this.bindMBEvent();
this.show();
}
msdPro.getMBNodes = function(){
var mTpl = '<div class="m-share-ways">\
<div class="m-diyText" id="j-diyText">\
</div>\
<div class="share-ways">\
<ul class="ways-list" id="j-waysList">\
<li class="s-weibo">\
<i class="i-sina"></i>\
<em>新浪微博</em>\
</li>\
<li class="s-qzone">\
<i class="i-qzone"></i>\
<em>QQ空间</em>\
</li>\
<li class="s-yixin">\
<i class="i-yixin"></i>\
<em>易信</em>\
</li>\
<li class="s-qq f-dn">\
<i class="i-qq"></i>\
<em>QQ好友</em>\
</li>\
<li class="s-douban f-dn">\
<i class="i-douban"></i>\
<em>豆瓣</em>\
</li>\
<li class="s-renren f-dn">\
<i class="i-renren"></i>\
<em>人人</em>\
</li>\
</ul>\
</div>\
<a class="cancel-btn" id="j-cancelBtn">取消</a>\
</div>';
var tpl = this.tpl = $(mTpl);
this.waysListNode = tpl.find('#j-waysList');
this.diyTextNode = tpl.find('#j-diyText');
this.cancelBtnNode = tpl.find('#j-cancelBtn');
}
msdPro.updateMBTpl = function(){
this.diyTextNode.html(this.setting.mContent);
}
msdPro.bindMBEvent = function(){
var that = this;
$(this.cancelBtnNode).click(function(){
that.destroy();
});
$(this.waysListNode).on('click', 'li', function(){
var clazz = $(this).attr('class');
var shareObj = window.shareObj;
shareObj.__window = "";
if(clazz && shareObj){
switch(clazz){
case 's-weibo':
shareObj.shareSina();
break;
case 's-qzone' :
shareObj.shareQzone();
break;
case 's-yixin' :
shareObj.shareYixin();
break;
case 's-qq' :
shareObj.shareQQ();
break;
case 's-renren' :
shareObj.shareRenren();
break;
case 's-douban' :
shareObj.shareDouban();
break;
}
}else{
return false;
}
})
}
//生成cover提示or 弹出分享组件
msdPro.show = function(){
maskObj.showMask();
$(document.body).append(this.tpl);
}
//销毁分享弹框
msdPro.destroy = function(){
maskObj.removeMask();
$(this.tpl).remove();
}
jq.showMobileShareDialog = function(options){
if($.isApp()){
if(window.YixinJSBridge){
var obj = {
'mTitle': window.shareObj.__mTitle,
'mDescription': window.shareObj.__mDescription,
'pic': window.shareObj.__pic,
'url': window.shareObj.__url,
'mDescription': window.shareObj.__mDescription,
'type': 1,
'courseId': ''
}
$.extend(obj, options);
$.callAppShare(obj);
}else{
this.show();
}
}else{
return (new MobileShareDialog(options).show());
}
}
})(jQuery, window);
移动端的组件跟web端组件实现的方式差不多，只是多了微信的判断。移动端还依赖于一个半透明蒙层的组件$.showComMask();，这个组件会比较通用，所以也单独提取出来成一个组件了，只是实现了showMask(), removeMask()方法来控制蒙层的显示与隐藏。代码可以自己写，我就不贴出来了。
移动端的css样式是使用rem适配来适配的，并且分享的icon使用了雪碧图移动端定位来实现背景图定位。经实践可以适配大多数的机型，详细请参考我写的文章。如果你的项目不打算使用rem来适配，那么只能重新写一份样式了。
移动端分享css
.m-weixin-cover-box{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
padding: 0.6rem;
color: #fff;
z-index: 4005;
.guide-arrow{
position: relative;
text-align: right;
}
.share-tips-text{
margin-top: 0.5rem;
.tipText{
text-align: center;
font-size: 0.36rem;
line-height: 0.72rem;
}
}
.diy-text{
font-size: 0.32rem;
}
.close-cover{
margin-top: 0.9rem;
a{
border:0.02rem solid #ffffff;
border-radius:0.12rem;
width:2.69rem;
height:0.86rem;
margin: 0 auto;
display: block;
line-height: 0.86rem;
font-size:0.4rem;
color:#ffffff;
text-align:center;
}
}
}
.m-share-ways{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
z-index: 4005;
.share-ways{
padding: 0.3rem 0.6rem 0;
ul{
display: -webkit-flex;
-webkit-flex-wrap: wrap;
list-style: none;
}
li{
margin-bottom: 0.35rem;
margin-right: 20%;
width: 1.02rem;
i{
padding-top: 100%;
width: 100%;
display: block;
background: url(http://nos.netease.com/edu-image/12C15D2DBEB627E70D4EAD2035B862CB.png) 0 0 no-repeat;
background-size: 3.7rem 3.7rem;
}
.i-sina{
background-position: 6% 6%;
}
.i-qzone{
background-position: 50% 6%;
}
.i-qq{
background-position: 94% 50%;
}
.i-douban{
background-position: 62.3% 0;
}
.i-yixin{
background-position: 6% 50%;
}
.i-renren{
background-position: 50% 94%;
}
em{
display: block;
font-size: 0.2rem;
line-height: 0.2rem;
margin-top: 0.1rem;
text-align: center;
}
}
li:nth-child(3n){
margin-right: 0;
}
}
.m-diyText{
font-size: 0.32rem;
}
.cancel-btn{
height: 1rem;
border-top: 1px solid #e7e3e3;
text-align: center;
font-size: 0.32rem;
line-height: 1rem;
display: block;
}
}
二、微信分享
以前的微信分享使用jsBridege也很简单，完全可以自己写，在全局存window.weixinShareData={title: xxx, pic:xxx},然后点击微信的分享到朋友圈的时候，会自动读取weixinShareData的相应字段的。但是在某一个版本中，微信把这个非官方的功能给禁掉了，只能用官方的js sdk来实现了，好像必须有微信服务号才能用分享功能 微信开发者文档
基本的实现流程如下：
- 注册微信服务号，拿到基本的配置信息
- 在微信中打开页面，加载之后向后端发请求
- 后端接收到请求后使用配置信息给微信服务器发送注册请求，并把微信服务器返回的基本配置信息返回给前端
- 前端拿到后端返回的基本信息之后，调用微信提供的wx.config()方法注册事件方法，注册成功之后，就会调用wx.ready()方法并初始化其中定义的功能，然后就可以使用相对应的功能了。
以下是我实现微信分享功能的基本代码，详细的还请参考微信开发文档
/**
* 微信JS API初始化
* @return {void}
* 详细参数说明 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E6.A6.82.E8.BF.B0
*/
__proCommonUtil.__initWXJSShare = function(_data){
if(!!_data){
_data = JSON.parse(_data);
wx.config({
debug: false, /* 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。*/
appId: 'wxxxxxxx05', /* 必填，公众号的唯一标识*/
timestamp: _data.timestamp, /* 必填，生成签名的时间戳*/
nonceStr: _data.nonceStr, /* 必填，生成签名的随机串*/
signature: _data.signature,/* 必填，签名，见附录1*/
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage',
'onMenuShareQQ', 'onMenuShareQZone', 'chooseImage', 'previewImage',
'hideOptionMenu', 'showOptionMenu', 'hideMenuItems', 'closeWindow', 'scanQRCode'] /* 必填，需要使用的JS接口列表，所有JS接口列表见附录2*/
});
}
};
微信分享功能初始化
wx.ready(function(){
/*分享到朋友圈*/
wx.onMenuShareTimeline({
title: "${sharetitle?default('')}", /* 分享标题*/
link: window.m_shareUrl || document.location.href, /* 分享链接*/
imgUrl: "${shareimg?default('')}"||"http://img2.ph.126.net/rqkJ8avE5_3Dn1l4TtnYDw==/6630541099630412039.png", /* 分享图标*/
success: function () {
/* 用户确认分享后执行的回调函数*/
},
cancel: function () {
/* 用户取消分享后执行的回调函数*/
}
});
/*发送给朋友*/
wx.onMenuShareAppMessage({
title: "${sharetitle?default('')}", /* 分享标题*/
desc: "${sharedesc?default('')}", /* 分享描述*/
link: window.m_shareUrl || document.location.href, /* 分享链接*/
imgUrl: "${shareimg?default('')}"||"http://img2.ph.126.net/rqkJ8avE5_3Dn1l4TtnYDw==/6630541099630412039.png", /* 分享图标*/
type: '', /* 分享类型,music、video或link，不填默认为link*/
dataUrl: '', /* 如果type是music或video，则要提供数据链接，默认为空*/
success: function () {
/* 用户确认分享后执行的回调函数*/
},
cancel: function () {
/* 用户取消分享后执行的回调函数*/
}
});
});
因为微信的分享功能的文案是在一开始的时候在wx.ready()方法中就定义好了的。但是可能会有点击分享的时候动态的去修改分享文案的需求。如果需要修改文案，只需要重新调用分享的方法就好了，我也是写了个通用的方法。
微信修改分享参数方法
/**
* 动态更新分享文案
* @input object
* @ 属性要加双下划线
* {__mTitle:'修改标题'}
*/
jq.updateShareText = function(data){
if(!window.shareObj){
return;
}
var defaultMethod = {
trigger: function(res){},
success: function(res){},
cancel: function(res){},
fail: function(res){}
};
var obj = window.shareObj = jq.extend({}, window.shareObj, data, defaultMethod);
if(jq.isWeixin && jq.isWeixin()){
//分享给朋友
wx.onMenuShareAppMessage({
title: obj.__mTitle,
desc: obj.__mDescription,
link: obj.__mobileUrl,
imgUrl: obj.__mPic,
trigger: obj.trigger,
success: obj.success,
cancel: obj.cancel,
fail: obj.fail
});
//分享到朋友圈
wx.onMenuShareAppMessage({
title: obj.__mTitle,
link: obj.__mobileUrl,
imgUrl: obj.__mPic,
trigger: obj.trigger,
success: obj.success,
cancel: obj.cancel,
fail: obj.fail
});
}
};
以上有什么问题，欢迎随时交流。
网友评论