微信JS-SDK 微信分享接口开发（介绍版）

谁借莪１个温暖的怀抱￠ 2022-06-04 01:08 320阅读 0赞

最近项目中的网页通过微信分享朋友或朋友圈等功能出现了无法显示分享图片等信息，后经过排查发现是微信版本升级导致，采用js-sdk完成分享接口，为了快速实现该功能效果，于是我打算通过前台js进行实现来看看分享效果。

通过查看微信公众平台文档，找到自己所需要的说明文档，明确开发步骤，说明文档截图如下：

Center

开发步骤：

1、按照说明文档完成步骤1.1.1

Center 1

Center 2

Center 3

2、引入js文件

在分享的页面中添加js文件

[html] view plain copy

  1. <**html xmlns=”http://www.w3.org/1999/xhtml“>**
  2. <**head**>
  4. <**script src=”http://res.wx.qq.com/open/js/jweixin-1.0.0.js“></script**>
  6. <**script src=”/commonScripts/jquery-1.5.1.min.js”></script**>
  9. <**script src=”/commonScripts/wxShare_sha1.js”></script**>
  12. <**script src=”/commonScripts/wxShare_data.js”></script**>
  15. <**script src=”/commonScripts/wxShare.js”></script**>
  17. </**head**>
  18. <**body id=”weixinshare”>**
  19. 微信分享开发
  20. <**img**
  21. style=”width:672px; height:345px; cursor:pointer”
  22. alt=”banner01”
  23. src=”/mobileimg/123.jpg”>
  24. </**body**>
  25. </**html**>

3、配置wxShare.js

[javascript] view plain copy

  1. var $wx_account = wxdata.wx_account, // 自定义数据，见wxShare_data.js
  2. $wx_share = wxdata.wx_share; // 自定义数据 ，见wxShare_data.js
  4. //配置微信信息
  5. wx.config ({
  6. debug : false, // true:调试时候弹窗
  7. appId : $wx_account[0], // 微信appid
  8. timestamp : $wx_account[1], // 时间戳
  9. nonceStr : $wx_account[2], // 随机字符串
  10. signature : $wx_account[3], // 签名
  11. jsApiList : [
  12. // 所有要调用的 API 都要加到这个列表中
  13. ‘onMenuShareTimeline’, // 分享到朋友圈接口
  14. ‘onMenuShareAppMessage’, // 分享到朋友接口
  15. ‘onMenuShareQQ’, // 分享到QQ接口
  16. ‘onMenuShareWeibo’ // 分享到微博接口
  17. ]
  18. });
  19. wx.ready (function () {
  20. // 微信分享的数据
  21. var shareData = {
  22. “imgUrl” : $wx_share[0], // 分享显示的缩略图地址
  23. “link” : $wx_share[1], // 分享地址
  24. “desc” : $wx_share[2], // 分享描述
  25. “title” : $wx_share[3], // 分享标题
  26. success : function () {
  28. // 分享成功可以做相应的数据处理
  30. //alert(“分享成功”); }
  31. };
  32. wx.onMenuShareTimeline (shareData);
  33. wx.onMenuShareAppMessage (shareData);
  34. wx.onMenuShareQQ (shareData);
  35. wx.onMenuShareWeibo (shareData);
  36. });
  39. wx.error(function(res){
  40. // config信息验证失败会执行error函数，如签名过期导致验证失败，
  41. // 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，
  42. //对于SPA可以在这里更新签名。
  43. alert(“好像出错了！！”);
  44. });

4、组装微信的配置信息wxShare_data.js

[javascript] view plain copy

  1. var wxdata = {
  2. wx_account : new Array(4),
  3. wx_share : new Array(4),
  4. wx_myuser : new Array(“appid”,”appsecret”),
  6. access_token : “”, // 凭证
  7. token_expires_in : “” , // 凭证过期时间 单位：s
  8. jsapi_ticket : “”, // 凭证
  9. ticket_expires_in : “” , // 凭证过期时间 单位：s
  10. url : “https://api.weixin.qq.com/cgi-bin/token?grant\_type=client\_credential&appid=“ + wxdata.wx_myuser[0] + “&secret=” + wxdata.wx_myuser[1],
  12. // 获取access_token
  13. // *注意* 经过实际开发测试，微信分享不支持跨域请求，因此获取access_token的请求必须从服务器发起，否则无法获取到access_token
  14. get_access_token : function (){
  15. $.ajax({
  16. type : “GET”,
  17. url : wxdata.url
  18. dataType : “jsonp”, // 解决跨域问题，jsonp不支持同步操作
  19. cache : false,
  20. // jsonp :’callback’,
  21. success : function(msg) {
  22. // 获取正常 {“access_token”:”ACCESS_TOKEN”,”expires_in”:7200}
  23. // 获取失败 {“errcode”:40013,”errmsg”:”invalid appid”}
  24. wxdata.access_token = msg.access_token; // 获取到的交互凭证 需要缓存，存活时间token_expires_in 默认为7200s
  25. wxdata.token_expires_in = msg.expires_in; // 过期时间 单位：s
  26. if (access_token != “” || access_token != null) {
  27. console.log(“get access_token success： “ + wxdata.access_token);
  28. } else {
  29. console.log(“get access_token fail “ +wxdata.access_token);
  30. }
  31. },
  32. error : function(msg){
  33. alert(“get access_token error!! ： “);
  34. }
  35. });
  36. },
  38. // 获取jsapi_ticket
  39. // *注意* 经过实际开发测试，微信分享不支持跨域请求，因此获取jsapi_ticket的请求必须从服务器发起，否则无法获取到jsapi_ticket
  40. get_jsapi_ticket : function(){
  41. $.ajax({
  42. type : “GET”,
  43. url : “https://api.weixin.qq.com/cgi-bin/ticket/getticket?access\_token=“ + wxdata.access_token +”&type=jsapi”,
  44. dataType : “jsonp”,
  45. cache : false,
  46. async : false,
  47. jsonp :’callback’,
  48. success : function(msg) {
  49. /*
  50. {
  51. “errcode”:0,
  52. “errmsg”:”ok”,
  53. “ticket”:”e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA”,
  54. “expires_in”:7200
  55. }
  56. */
  57. if(msg.errcode == 0){
  58. wxdata.jsapi_ticket = msg.ticket; // 需要缓存，存活时间ticket_expires_in 默认为7200s
  59. wxdata.ticket_expires_in = msg.expires_in; // 过期时间 单位：s
  60. console.log(“get jsapi_ticket success”);
  61. } else {
  62. console.log(“get jsapi_ticket fail”);
  63. }
  64. },
  65. error : function(msg){
  66. alert(“get jsapi_ticket error!!! “);
  67. }
  68. });
  69. },
  70. // 数据签名
  71. create_signature : function(nocestr,ticket,timestamp,url){
  72. var signature = “”;
  73. // 这里参数的顺序要按照 key 值 ASCII 码升序排序
  74. var s = “jsapi_ticket=” + ticket + “&noncestr=” + nocestr + “×tamp=” + timestamp + “&url=” + url;
  75. return hex_sha1(s);
  76. },
  78. // 自定义创建随机串 自定义个数0 < ? < 32
  79. create_noncestr : function () {
  80. var str= “abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789”;
  81. var val = “”;
  82. for (var i = 0; i < 16; i++) {
  83. val += str.substr(Math.round((Math.random() * 10)), 1);
  84. }
  85. return val;
  86. },
  88. // 自定义创建时间戳
  89. create_timestamp : function () {
  90. return new Date().getSeconds();
  91. }
  93. }
  95. //wxdata.get_access_token(); // 1
  96. wxdata.access_token = “B06fRIti5GDmvNLKsV5OkJ4fU1qd3YyyW0cgwenxhqI7XwmpTrpwY6Uc7nNtnumdJvnPJXcACAVPD”; //2
  98. //wxdata.get_jsapi_ticket(); //3
  99. wxdata.jsapi_ticket = “XGEs8VD-_kgoxt8jcijupT7j_EA-nP07ro_MmUNDVD0oR8unfqY4C_YIMXAQvhztlTk8j2A” //4
  101. // ——- 5 开始 ———
  102. var timestamp = wxdata.create_timestamp(); // timestamp
  103. var noncestr = wxdata.create_noncestr(); // noncestr
  104. var url = window.location.href;
  106. wxdata.wx_account[0] = wxdata.wx_myuser[0]; // appid
  107. wxdata.wx_account[1] = timestamp; // timestamp
  108. wxdata.wx_account[2] = noncestr; // noncestr
  109. wxdata.wx_account[3] = wxdata.create_signature(noncestr, wxdata.jsapi_ticket ,timestamp ,url);//signature
  111. wxdata.wx_share[0] = “http://www.123456.com/img/123.jpg“; // share_img 分享缩略图图片
  112. wxdata.wx_share[1] = window.location.href;// share_link 分享页面的url地址，如果地址无效，则分享失败
  113. wxdata.wx_share[2] = “this is share_desc”;// share_desc
  114. wxdata.wx_share[3] = “this is share_title”;// share_title
  115. // ———— 5 结束 —————

说明：
4.1 分享流程：
用户创建时间戳，随机字符串，当前需要分享的页面的url三个变量，接着将自己的appid和APPsecret作为请求参数获取access_token，再根据access_token获取jsapi_ticket, 然后将获取的jsapi_ticket，以及自己创建的三个变量进行签名，注意签名过程案按照 key 值 ASCII 码升序排序，具体参加程序，

4.2 请求后的响应程序无法处理 问题

get_access_token（）函数中对微信发起获取access_token的请求，存在跨域问题，设置dataType:”jsonp”无法解决，通过浏览器查看请求发现微信相应的数据并没有包装数据，猜测微信不支持这个请求的跨域，因为ajax程序无法通过程序正常获取access_token的值，但可以在浏览器调式获取access_token的值，这个值有7200s，足够去获取jsapi_ticket ，获取jsapi_ticket的请求过程存在同样的问题，因此获取access_token和jsapi_token必须从服务端后端代码。

这篇文章主要是想用js请求来完成分享的效果属于介绍篇，因而没有开发服务器端请求代码（勿喷），服务器篇代码见后续的应用篇

那么如何正常才能让程序跑起来，正常的分享页面呢？？

在wxShare_data.js 代码中，首先发起 wxdata.get_access_token(); 注释②③④⑤代码，将浏览器获取的access_token，手动的放到②变量处，

手动完成了access_token的赋值后，注释 ① ，打开 ②③ ，开始 wxdata.get_jsapi_ticket(); 注释 ④⑤ 处代码

同样的操作 从浏览器获取 jsapi_ticket值将其赋值给 ④ 处变量，注释 ①③ ，打开 ②④⑤ 处代码，最终代码见wxShare_data.js

5、wxShare_sha1.js

对数据进行签名 sha1.js下载

6、此时页面可以正常运行并完成微信分享了，

成功页面展示

Center 4

微信分享给朋友

Center 5

至此完成想要的验证效果，接下来就可以在服务器带开发代码了！！！期待完整版微信分享

想记录下自己开发过程，本人第一次写博客，错误之处还请指出共同探讨，勿喷！！！ 谢谢

发表评论

表情：
评论列表 （有 0 条评论，320人围观）

还没有评论，来说两句吧...

相关阅读

    相关 安卓微信的api，个人微信开发API协议，微信 ipad ，微信ipad协议，微信web版接口api，微信网页版接口，微信开发sdk，微信开发API，微信协议，微信接口文档，网页个人微信api分享…

    安卓微信的api，个人微信开发API协议，微信web版接口api，微信网页版接口，微信开发sdk，微信开发API，微信协议，微信接口文档，网页个人微信api分享…通过 A...

    骑猪看日落骑猪看日落/ 0 赞/ 159 阅读

    相关 JSSDK实现微信分享功能

    功能：在微信内置浏览器页面实现分享页面功能。 注意：关于微信内置浏览器的私有对象WeixinJSBridge分享的接口都已经作废了，即下面的定义都是无效的： $(f

    忘是亡心i忘是亡心i/ 0 赞/ 685 阅读

    相关 微信JSSDK分享功能详解

    本文以微信分享到朋友圈，分享给微信好友为例为参考，进行调用测试，想添加其他的功能，自行查看[开发人员文档][Link 1]即可 工欲善其事，必先利其器，好好利用下边的帮助工具

    傷城~傷城~/ 0 赞/ 572 阅读