博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信朋友圈分享之自定义网页按钮分享
阅读量:5939 次
发布时间:2019-06-19

本文共 3643 字,大约阅读时间需要 12 分钟。

最近要做一个视频分享的web 页面,查询到的每条视频都有一个分享按钮,计划实现,点击按钮实现微信分享到朋友圈 / 朋友的功能。

看过微信JSSDK开发文档的人都知道,调用微信的分享功能必须要具备以下几个条件:

  1. 必须在你的服务号上绑定开发页面的域名
  2. 必须要引入微信的JS文件
  3. 必须要有appId,timestamp,nonceStr,signature
  4. 如果要分享当前页面,必须要拿到当前页面的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) {                    }    });})

 

转载地址:http://oivtx.baihongyu.com/

你可能感兴趣的文章
基于bootstrap的datatable控件
查看>>
shell脚本入门
查看>>
Tomcat系统架构分析
查看>>
nyoj 1238 最少换乘 (河南省第八届acm程序设计大赛)
查看>>
leetcode Valid Palindrome C++&python 题解
查看>>
45个很实用的 Oracle 查询语句小结
查看>>
送给队友的汉堡包
查看>>
sybase用户管理(创建、授权、删除)
查看>>
修复/lib/ld-linux.so.2: bad ELF interpreter: No such file or directory问题
查看>>
前端面试题汇总
查看>>
脚本语言
查看>>
poj 1011 :Sticks (dfs+剪枝)
查看>>
【广告】广告笔记
查看>>
CHIL-SQL-VIEW(视图)
查看>>
node之path
查看>>
我的25年嵌入式生涯-周立功(转)
查看>>
Unity3D使用经验总结 优点篇
查看>>
jQuery属性
查看>>
数组去重复元素-(不改变其元素的先后顺序)-中兴笔试程序设计
查看>>
项目开发--------地图与定位功能
查看>>