微信JSSDK自定義分享
這篇文章主要分為3部分：
第一部分：開發(fā)步驟
第二部分：本公司內(nèi)部如何快速的引用方法
第三部分：程序中的功能點(diǎn)
第四部分：注意事項(xiàng)
開發(fā)步驟
參考：
https://blog.csdn.net/qq_33556185/article/details/79628987
微信JS-SDK說明文檔
快速引入共用的分享方法
<script type="text/javascript">
var title = '分享測(cè)試';
var shareImg = 'http://img.jjlg.com.cn/group1/M00/00/1B/CgABAVw8T4aANEUnAAALzRUOvDk164.png'; //縮略圖默認(rèn)國(guó)內(nèi)的
var desc = '測(cè)試瞅瞅瞅瞅瞅瞅';
var sharelink = 'http://m.shop.jjlg.com.cn/test.html';
var code = getUrlParam('code'); //這是 獲取請(qǐng)求路徑中帶code字段參數(shù)的方法
$(function(){
if(code == null || code == undefined || code == ''){
window.location. + encodeURIComponent(sharelink);
}
commonWxShare(title,shareImg,desc,sharelink);
});
</script>
全部代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title>分享</title>
<script src="common/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h2>分享測(cè)試頁面</h2>
</body>
</html>
<script type="text/javascript">
var title = '分享測(cè)試';
var shareImg = 'http://img.jjlg.com.cn/group1/M00/00/1B/CgABAVw8T4aANEUnAAALzRUOvDk164.png'; //縮略圖默認(rèn)國(guó)內(nèi)的
var desc = '測(cè)試瞅瞅瞅瞅瞅瞅';
var sharelink = 'http://m.shop.jjlg.com.cn/test.html';
var code = getUrlParam('code'); //這是 獲取請(qǐng)求路徑中帶code字段參數(shù)的方法
$(function(){
if(code == null || code == undefined || code == ''){
window.location. + encodeURIComponent(sharelink);
}
commonWxShare(title,shareImg,desc,sharelink);
});
//微信分享
function commonWxShare(title,shareImg,desc,sharelink) {
var locationHref = window.location.href;
var index = locationHref.indexOf('#');
if(index !== -1) {
locationHref = locationHref.slice(0, index);
}
locationHref = encodeURIComponent(locationHref);
$.ajax({
type: 'get',
crossDomain: true,
url:'http://m.shop.jjlg.com.cn/api/v1/ld/cdm/wechatShare?subjectUrl=' + locationHref,
dataType: 'json',
xhrFields: {
withCredentials: true
},
beforeSend:function(){
//
},
success: function(data) {
console.log(data);
if(data.code == 2000) {
wx.config({
// debug: true,
appId: data.data.appId,
timestamp: data.data.timestamp,
nonceStr: data.data.nonceStr,
signature: data.data.signature,
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
});
wx.ready(function() {
wx.onMenuShareTimeline({
title:title,
link: sharelink,
imgUrl: shareImg,
success: function(){
},
cancel: function(){
}
});
wx.onMenuShareAppMessage({
title: title,
desc: desc,
link: sharelink,
imgUrl: shareImg,
type: '', // 分享類型,music、video或link，不填默認(rèn)為link
dataUrl: '', // 如果type是music或video陕靠，則要提供數(shù)據(jù)鏈接纺且，默認(rèn)為空
success: function(){
},
cancel: function(){
}
});
});
} else {
//
}
},
error: function() {
//
},
complete:function(){
//
}
});
}
//獲取微信url中 的code
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null)
return unescape(r[2]);
return null;
};
</script>
程序中的功能點(diǎn)
1.微信OAuth2.0網(wǎng)頁授權(quán)只能設(shè)置一個(gè)回調(diào)域名的解決方法。
參考：（https://blog.csdn.net/wulex/article/details/73611503）
公司已授權(quán)域名：http://dm.jjlg.com.cn/auth/get-weixin-code.html
2.靜默授權(quán)獲取code讥蔽。
3.自定義分享給朋友和朋友圈奇徒。
//通過get-weixin-code.html頁面進(jìn)行二次跳轉(zhuǎn)
window.location. + encodeURIComponent(sharelink);
注意事項(xiàng)
1.重定向地址一定要用encodeURIComponent()進(jìn)行編碼捷沸，否則url中的=和+都會(huì)在編譯的過程丟失巍膘。
2.頁面頭部記得引入js文件：
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
