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 相关文章推荐
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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的历史和优缺点
2006/10/09 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php中smarty区域循环的方法
2015/06/11 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
JS字符串函数扩展代码
2011/09/13 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
python处理Excel xlrd的简单使用
2017/09/12 Python
django中send_mail功能实现详解
2018/02/06 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
柏林通行证:Berlin Pass
2018/04/11 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
大学毕业感言100字
2014/02/03 职场文书
财务部经理岗位职责
2014/02/03 职场文书
承诺书范文
2014/06/03 职场文书
画展邀请函
2015/01/31 职场文书
二婚主持词
2015/06/30 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js