js微信分享接口调用详解


Posted in Javascript onJuly 23, 2019

本文实例为大家分享了js微信分享接口调用的具体代码,供大家参考,具体内容如下

微信api直通车,仔细阅读官方文档问题都可以解决的

好吧,最近用到了,整理下发出来,就这个效果吧

js微信分享接口调用详解

1.设置js接口安全域名

这需要使用微信的jssdk,先需要在微信公众号后台进行设置:公众号设置-->功能设置-->JS接口安全域名。打开这个页面之后你会看到下面的提示。需要先下载这个文件并上传到指定域名的根目录。

js微信分享接口调用详解

这个文件里面是一个字符串,从名称看是用来校验用的。先上传了这个文件,你才能保存成功。这样你就可以使用jssdk了。

2.页面,要从后台获取签名

页面核心代码,用的是jweixin-1.4.0.js,最新版的说是将之前的四个接口合并成两个,不知道为什么没起作用,所以还是用之前的四个吧

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
 var currurl = decodeURIComponent(location.href.split('#')[0]);
 
 var res = ${(jsApi)!};
 wx.config({
 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
 appId: res.appId, // 必填,公众号的唯一标识
 timestamp: res.timestamp, // 必填,生成签名的时间戳
 nonceStr: res.nonceStr, // 必填,生成签名的随机串
 signature: res.signature,// 必填,签名
 jsApiList: ["checkJsApi","updateAppMessageShareData","updateTimelineShareData", "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareQZone"] // 必填,需要使用的JS接口列表
 });
 wx.ready(function () {
 // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
 wx.checkJsApi({
 jsApiList : ["checkJsApi", "updateAppMessageShareData","updateTimelineShareData","onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareQZone"], // 需要检测的JS接口列表,所有JS接口列表见附录2,
 success : function(res) {
 // 以键值对的形式返回,可用的api值true,不可用为false
 // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
 // alert(res.checkResult);
 // alert(res.errMsg);
 }
 });
 //自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
 wx.updateAppMessageShareData({
 title:"饿了么红包", // 分享标题
 desc: "饿了么红包描述", // 分享描述
 link: currurl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
 imgUrl: ${(pic)!}, // 分享图标
 success: function () {
 // 设置成功
 }
 })
 //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
 wx.updateTimelineShareData({
 title:"饿了么红包", // 分享标题
 link: currurl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
 imgUrl: ${(pic)!},
 success: function () {
 // 设置成功
 }
 });
 //朋友圈
 wx.onMenuShareTimeline({
 title:"饿了么红包", // 分享标题
 link: currurl, // 分享链接
 imgUrl: "图片地址",
 success: function (res) {
 },
 cancel: function (res) {
 },
 fail: function (res) {
 alert(JSON.stringify(res));
 }
 });
 //朋友
 wx.onMenuShareAppMessage({
 title:"饿了么红包", // 分享标题
 desc: "饿了么红包描述", // 分享描述
 link: currurl, // 分享链接
 imgUrl: "图片地址",
 type: '', // 分享类型,music、video或link,不填默认为link
 dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
 success: function () {
 // 用户确认分享后执行的回调函数
 },
 cancel: function () {
 // 用户取消分享后执行的回调函数
 }
 });
 //QQ
 wx.onMenuShareQQ({
 title:"饿了么红包", // 分享标题
 desc: "饿了么红包描述", // 分享描述
 link: currurl, // 分享链接
 imgUrl: "图片地址", // 分享图标
 success: function () {
 // 用户确认分享后执行的回调函数
 },
 cancel: function () {
 // 用户取消分享后执行的回调函数
 }
 });
 //QQ空间
 wx.onMenuShareQZone({
 title:"饿了么红包", // 分享标题
 desc: ${(describe)!}, // 分享描述
 link: currurl, // 分享链接
 imgUrl: "图片地址", // 分享图标
 success: function () {
 // 用户确认分享后执行的回调函数
 },
 cancel: function () {
 // 用户取消分享后执行的回调函数
 }
 });
 
 });
 wx.error(function (res) {
 // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
 console.log("初始化wx.config失败" + res)
 });
</script>

 3.后端获取签名,注意签名的算法,不然就会签名失败啊,怎么算的,看微信附录1-JS-SDK使用权限签名算法

@GetMapping(value = "/test")
public String test(@RequestParam(value = "id")Long id,Model model,HttpServletRequest request ) throws WxErrorException{
 String url = request.getRequestURL().toString()+"?id="+id;
 WxJsapiSignature sign = wxMpService.createJsapiSignature(url);
 model.addAttribute("jsApi",JsonUtils.toJson(sign));
 return "对应的页面";
 }

最后说总结下思路,1下载文件,2后台获取签名(注意签名算法),3页面引入js调用接口。

完成!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js GridView 实现自动计算操作代码
Mar 25 Javascript
javascript 无提示关闭窗口脚本
Aug 17 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
对vuex中store和$store的区别说明
Jul 24 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 #Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 #Javascript
微信小程序 网络通信实现详解
Jul 23 #Javascript
微信小程序 确认框的实现(附代码)
Jul 23 #Javascript
koa2 从入门到精通(小结)
Jul 23 #Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 #Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 #Javascript
You might like
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
两种php实现图片上传的方法
2016/01/22 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
python实现桌面气泡提示功能
2019/07/29 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python多线程使用方法实例详解
2019/12/30 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
详解Python中namedtuple的使用
2020/04/27 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
开门红主持词
2014/04/02 职场文书
装修施工安全责任书
2014/07/24 职场文书
在职员工证明书
2014/09/19 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
导游词之日月潭
2019/11/05 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS