最近要做一个视频分享的web 页面,查询到的每条视频都有一个分享按钮,计划实现,点击按钮实现微信分享到朋友圈 / 朋友的功能。
看过微信JSSDK开发文档的人都知道,调用微信的分享功能必须要具备以下几个条件:
- 必须在你的服务号上绑定开发页面的域名
- 必须要引入微信的JS文件
- 必须要有appId,timestamp,nonceStr,signature
- 如果要分享当前页面,必须要拿到当前页面的url
我们的视频分享是这样写的:
appId,timestamp,nonceStr,signature的值是通过后台接口查询的,要拿到这些值,要通过一个post请求,把要推荐的每个视频的 id 、 推荐模式(朋友圈 / 朋友)、要分享的当前页面的 url 返回给后台,才可以拿到这些值。
下面是一个按钮的点击事件,看代码就能明白:
$('.js_container').on('click','.weui-jiaj-video',function(){ //从绑定的属性中获取值 var item = $(this).attr('share-data'); if(item) item = JSON.parse(item); // "1" 朋友圈 "2"朋友 var getVideoId = item.videoId; // 当前页面url var curUrl = location.href.split('#')[0]; // 分享模式 var getRecommendMode = "1"; var shareData = { videoId:getVideoId, url:curUrl, recommendMode:getRecommendMode }; var getVideoName = item.videoName; var getCoverUrl = item.coverUrl; var getForwardUrl = item.forwardUrl; data = JSON.stringify(shareData); $.ajax({ type:"post", url:shareVideo().replace("{userId}", userId), data:data, dataType:'json', contentType: 'application/json; charset=utf-8', success: function(data) { //拿到返回的id var getAppId = data.appId; var getTimestamp = data.timestamp; var getNonceStr = data.nonceStr; var getSignature = data.signature; wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: getAppId, // 必填,公众号的唯一标识 timestamp: getTimestamp, // 必填,生成签名的时间戳 nonceStr: getNonceStr, // 必填,生成签名的随机串 signature: getSignature,// 必填,签名,见附录1 jsApiList: [ // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 'onMenuShareTimeline', 'onMenuShareAppMessage' ] }); wx.ready(function(){ //分享到朋友圈 wx.onMenuShareTimeline({ title: getVideoName, // 分享标题 link: getForwardUrl, // 分享链接 imgUrl: getCoverUrl, // 分享图标 success: function () { // 用户确认分享后执行的回调函数 weui.toast('分享成功'); }, cancel: function () { // 用户取消分享后执行的回调函数 weui.toast('取消分享'); } }); //分享到朋友 wx.onMenuShareAppMessage({ title: getVideoName, // 分享标题 desc: getVideoName, // 分享描述 link: getForwardUrl, // 分享链接 imgUrl: getCoverUrl, // 分享图标 type: 'video', // 分享类型,music、video或link,不填默认为link dataUrl: getForwardUrl, // 如果type是music或video,则要提供数据链接,默认为空 success: function () { // 用户确认分享后执行的回调函数 weui.toast('分享成功'); }, cancel: function () { // 用户取消分享后执行的回调函数 weui.toast('取消分享'); } }); //检查微信接口是否调用成功 wx.checkJsApi({ jsApiList: ['onMenuShareTimeline'], // 需要检测的JS接口列表,所有JS接口列表见附录2, success: function(res) { // 以键值对的形式返回,可用的api值true,不可用为false // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} } }); }); }, error: function(data) { } });})