最近项目中的网页通过微信分享朋友或朋友圈等功能出现了无法显示分享图片等信息,后经过排查发现是微信版本升级导致,采用js-sdk完成分享接口,为了快速实现该功能效果,于是我打算通过前台js进行实现来看看分享效果。
通过查看微信公众平台文档,找到自己所需要的说明文档,明确开发步骤,说明文档截图如下:
开发步骤:
1、按照说明文档完成步骤1.1.1
2、引入js文件
在分享的页面中添加js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
-
- <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
-
- <script src="/commonScripts/jquery-1.5.1.min.js"></script>
-
-
- <script src="/commonScripts/wxShare_sha1.js"></script>
-
-
- <script src="/commonScripts/wxShare_data.js"></script>
-
-
- <script src="/commonScripts/wxShare.js"></script>
-
- </head>
- <body id="weixinshare">
- 微信分享开发
- <img
- style="width:672px; height:345px; cursor:pointer"
- alt="banner01"
- src="/mobileimg/123.jpg">
- </body>
- </html>
3、配置wxShare.js
- var $wx_account = wxdata.wx_account,
- $wx_share = wxdata.wx_share;
-
-
- wx.config ({
- debug : false,
- appId : $wx_account[0],
- timestamp : $wx_account[1],
- nonceStr : $wx_account[2],
- signature : $wx_account[3],
- jsApiList : [
-
- 'onMenuShareTimeline',
- 'onMenuShareAppMessage',
- 'onMenuShareQQ',
- 'onMenuShareWeibo'
- ]
- });
- wx.ready (function () {
-
- var shareData = {
- "imgUrl" : $wx_share[0],
- "link" : $wx_share[1],
- "desc" : $wx_share[2],
- "title" : $wx_share[3],
- success : function () {
-
-
-
-
- };
- wx.onMenuShareTimeline (shareData);
- wx.onMenuShareAppMessage (shareData);
- wx.onMenuShareQQ (shareData);
- wx.onMenuShareWeibo (shareData);
- });
-
-
- wx.error(function(res){
-
-
-
- alert("好像出错了!!");
- });
4、组装微信的配置信息wxShare_data.js
- var wxdata = {
- wx_account : new Array(4),
- wx_share : new Array(4),
- wx_myuser : new Array("appid","appsecret"),
-
- access_token : "",
- token_expires_in : "" ,
- jsapi_ticket : "",
- ticket_expires_in : "" ,
- url : "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + wxdata.wx_myuser[0] + "&secret=" + wxdata.wx_myuser[1],
-
-
-
- get_access_token : function (){
- $.ajax({
- type : "GET",
- url : wxdata.url
- dataType : "jsonp",
- cache : false,
-
- success : function(msg) {
-
-
- wxdata.access_token = msg.access_token;
- wxdata.token_expires_in = msg.expires_in;
- if (access_token != "" || access_token != null) {
- console.log("get access_token success: " + wxdata.access_token);
- } else {
- console.log("get access_token fail " +wxdata.access_token);
- }
- },
- error : function(msg){
- alert("get access_token error!! : ");
- }
- });
- },
-
-
-
- get_jsapi_ticket : function(){
- $.ajax({
- type : "GET",
- url : "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + wxdata.access_token +"&type=jsapi",
- dataType : "jsonp",
- cache : false,
- async : false,
- jsonp :'callback',
- success : function(msg) {
-
-
-
-
-
-
-
-
- if(msg.errcode == 0){
- wxdata.jsapi_ticket = msg.ticket;
- wxdata.ticket_expires_in = msg.expires_in;
- console.log("get jsapi_ticket success");
- } else {
- console.log("get jsapi_ticket fail");
- }
- },
- error : function(msg){
- alert("get jsapi_ticket error!!! ");
- }
- });
- },
-
- create_signature : function(nocestr,ticket,timestamp,url){
- var signature = "";
-
- var s = "jsapi_ticket=" + ticket + "&noncestr=" + nocestr + "×tamp=" + timestamp + "&url=" + url;
- return hex_sha1(s);
- },
-
-
- create_noncestr : function () {
- var str= "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
- var val = "";
- for (var i = 0; i < 16; i++) {
- val += str.substr(Math.round((Math.random() * 10)), 1);
- }
- return val;
- },
-
-
- create_timestamp : function () {
- return new Date().getSeconds();
- }
-
- }
-
-
- wxdata.access_token = "B06fRIti5GDmvNLKsV5OkJ4fU1qd3YyyW0cgwenxhqI7XwmpTrpwY6Uc7nNtnumdJvnPJXcACAVPD";
-
-
- wxdata.jsapi_ticket = "XGEs8VD-_kgoxt8jcijupT7j_EA-nP07ro_MmUNDVD0oR8unfqY4C_YIMXAQvhztlTk8j2A"
-
-
- var timestamp = wxdata.create_timestamp();
- var noncestr = wxdata.create_noncestr();
- var url = window.location.href;
-
- wxdata.wx_account[0] = wxdata.wx_myuser[0];
- wxdata.wx_account[1] = timestamp;
- wxdata.wx_account[2] = noncestr;
- wxdata.wx_account[3] = wxdata.create_signature(noncestr, wxdata.jsapi_ticket ,timestamp ,url);
-
- wxdata.wx_share[0] = "http://www.123456.com/img/123.jpg"; // share_img 分享缩略图图片
- wxdata.wx_share[1] = window.location.href;
- wxdata.wx_share[2] = "this is share_desc";
- wxdata.wx_share[3] = "this is share_title";
-
说明:
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、此时页面可以正常运行并完成微信分享了,
成功页面展示
微信分享给朋友
至此完成想要的验证效果,接下来就可以在服务器带开发代码了!!!期待完整版微信分享
想记录下自己开发过程,本人第一次写博客,错误之处还请指出共同探讨,勿喷!!! 谢谢