2019-01-18
2019-01-18 本文已影响0人
liujiaorui
微信JSSDK自定义分享
这篇文章主要分为3部分：
第一部分：开发步骤
第二部分：本公司内部如何快速的引用方法
第三部分：程序中的功能点
第四部分：注意事项
开发步骤
参考：
https://blog.csdn.net/qq_33556185/article/details/79628987
微信JS-SDK说明文档
快速引入共用的分享方法
<script type="text/javascript">
var title = '分享测试';
var shareImg = 'http://img.jjlg.com.cn/group1/M00/00/1B/CgABAVw8T4aANEUnAAALzRUOvDk164.png'; //缩略图默认国内的
var desc = '测试瞅瞅瞅瞅瞅瞅';
var sharelink = 'http://m.shop.jjlg.com.cn/test.html';
var code = getUrlParam('code'); //这是 获取请求路径中带code字段参数的方法
$(function(){
if(code == null || code == undefined || code == ''){
window.location.href = "http://dm.jjlg.com.cn/auth/get-weixin-code.html?appid=wxc67e9116a939063c&scope=snsapi_base&redirect_uri=" + 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>分享测试页面</h2>
</body>
</html>
<script type="text/javascript">
var title = '分享测试';
var shareImg = 'http://img.jjlg.com.cn/group1/M00/00/1B/CgABAVw8T4aANEUnAAALzRUOvDk164.png'; //缩略图默认国内的
var desc = '测试瞅瞅瞅瞅瞅瞅';
var sharelink = 'http://m.shop.jjlg.com.cn/test.html';
var code = getUrlParam('code'); //这是 获取请求路径中带code字段参数的方法
$(function(){
if(code == null || code == undefined || code == ''){
window.location.href = "http://dm.jjlg.com.cn/auth/get-weixin-code.html?appid=wxc67e9116a939063c&scope=snsapi_base&redirect_uri=" + 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，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
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>
程序中的功能点
1.微信OAuth2.0网页授权只能设置一个回调域名的解决方法。
参考：（https://blog.csdn.net/wulex/article/details/73611503）
公司已授权域名：http://dm.jjlg.com.cn/auth/get-weixin-code.html
2.静默授权获取code。
3.自定义分享给朋友和朋友圈。
//通过get-weixin-code.html页面进行二次跳转
window.location.href = "http://dm.jjlg.com.cn/auth/get-weixin-code.html?appid=wxc67e9116a939063c&scope=snsapi_base&redirect_uri=" + encodeURIComponent(sharelink);
注意事项
1.重定向地址一定要用encodeURIComponent()进行编码，否则url中的=和+都会在编译的过程丢失。
2.页面头部记得引入js文件：
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
