微信JS-SDK实现自定义分享功能，分享给朋友，分享到朋友圈

时间：2021-11-19 17:03:02

微信JS-SDK实现自定义分享功能，分享给朋友，分享到朋友圈

导语：

微信分享在手机右上角的三个点一键分享就ok了，那么对于分享到朋友圈，分享给朋友是怎么实现的呢？对于那种活动分享送流量是怎么定位分享者的呢？而想要将文章发送给朋友又是怎么获取到的朋友列表的呢？ 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

JSSDK使用步骤

1、绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

设置js 安全域名在 设置–>公众号设置–>功能设置里边 appid appSercret 在开发–>基本配置里

2、引入js文件

在需要调用JS接口的页面引入如下JS文件http://res.wx.qq.com/open/js/jweixin-1.0.0.js

3、通过config接口注入权限验证配置

在微信公众平台JSSDK说明文档是这样注释的：

wx.config({
debug: true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
timestamp: , //必填，生成签名的时间戳 
nonceStr: '', //必填，生成签名的随机串 
jsApiList: [] //必填，需要使用的JS接口列表，所有JS接口列表见附录2 
});

4、通过ready接口处理成功验证

wx.ready(function(){  
    //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。  
});

5、通过error接口处理失败验证

wx.error(function(res){    
    //config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。    
});

分享接口：

1、获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({    
title: '', // 分享标题 
link: '', // 分享链接 
imgUrl: '', // 分享图标 
success: function () {     
// 用户确认分享后执行的回调函数 
    },    
cancel: function () {     
// 用户取消分享后执行的回调函数 
    }    
});

2、获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({    
title: '', // 分享标题 
desc: '', // 分享描述 
link: '', // 分享链接 
imgUrl: '', // 分享图标 
type: '', // 分享类型,music、video或link，不填默认为link 
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 
success: function () {     
// 用户确认分享后执行的回调函数 
    },    
cancel: function () {     
// 用户取消分享后执行的回调函数 
    }    
});

页面源码

<script >
 $(function(){
 ajaxConfig();
 }); 
function ajaxConfig(){
var url=window.location.href.split('#')[0]; 
 url = url.replace(/&/g, '%26'); 
 $.ajax({
type:"post",
dataType: "json",
data:{
url:url
 },
url: "getconfig.html",
success: function(obj){
//微信注入权限接口
 wx.config({
debug: false,
appId: obj.appId,
timestamp: obj.timestamp,
nonceStr: obj.nonceStr,
signature: obj.signature,
jsApiList: [
'onMenuShareAppMessage','onMenuShareTimeline' 
 ]
 });
 wx.ready(function(){
 wx.onMenuShareAppMessage({
title: '${pro.wxtitle}', // 分享标题
 desc: "${pro.wxdesc}", // 分享描述
 imgUrl: 'http://www.yaoshihang.cn/${pro.imgurl}', 
link: window.location.href.split('#')[0],
type: 'link' // 分享类型,music、video或link，不填默认为link
 });

 wx.onMenuShareTimeline({
title: '${pro.wxtitle}', // 分享标题
 link: window.location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
 }); 

 wx.checkJsApi({ 
jsApiList: [ 
'onMenuShareAppMessage','onMenuShareTimeline' 
 ], 
success: function (res) { 
//alert(res.errMsg); 
 } 
 }); 
 }); 
 wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
// alert("errorMSG:"+res);
 });
 },
error:function(){
//alert("系统请求异常！");
 }
 });
 }
</script>

<script type="text/javascript">
// 微信分享
 $.ajax({
async: false,
cache: false,
url:url,//获取微信appid等的接口，如果可以直接获取到，则不需要此操作
type:'GET',
success:function(data){
 data = JSON.parse(data);
//console.log(data)
if(data.status != 1){
console.log(data.message);
 }else{
var sign = data.data;
//alert(sign);
 wx.config({
"debug": false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
"appId": sign.appId, // 必填，公众号的唯一标识
"timestamp": sign.timestamp, // 必填，生成签名的时间戳
"nonceStr": sign.nonceStr, // 必填，生成签名的随机串
"signature": sign.signature, // 必填，签名，见附录1
"jsApiList": ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ','hideMenuItems']
 });
 }
 }
 });
 $(function(){
// 分享
var title = '啊啊啊啊！';//分享的标题
var getlink = location.href;
var desc = '啦啦啦啦！';//分享的简介
var imgUrl='fenxiang.png';//分享图片地址
//var link = 'http://10.100.0.108:8020/guoer/src/main/webapp/static/promo/doubleEleven.html?device=';
 wx.ready(function(){================
// 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
 wx.onMenuShareAppMessage({
title: title,
desc: desc,
link: getlink,
imgUrl: imgUrl,
success: function () { 
//alert('分享成功')
 }
 }); 

// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
 wx.onMenuShareTimeline({
title: title,
//desc: desc,
 link: getlink,
imgUrl: imgUrl,
success: function () { 
//alert('分享成功')
 }
 });

 wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
//alert("errorMSG:"+res);
 });
 })
 })
</script>
标签：

相关文章