js-sdk探索之微信网页分享

微信是一个很不错的传播平台，最近公司需要做一个新年贺卡，使用html5制作一个很小的动画，然后发送给客户，不需要和后台有任何的联系，一个很简单的功能，需要利用微信的分享功能，毕竟微信分享的带小图片、简介、标题比发送一个链接要比一个光秃秃的链接要高大上的多。好了，废话不多说了，进入正题吧。

刚开始我也到网上去搜了一下，看到好多这个版本的，我也贴一下：

var shareData = {        "appid": appid,     //公众号的appID        "img_url": imgUrl,  //缩略图地址        "img_width": "120", //图片的宽度        "img_height": "120",//图片的高度        "link": lineLink,   //分享的链接        "desc": descContent,//摘要的信息        "title": shareTitle //分享的标题，默认为网页标题        };        function shareFriend() {        WeixinJSBridge.invoke('sendAppMessage',shareData, function(res) {            //定义分享完成后的事            alert(dasd);        })    }    function shareTimeline() {        WeixinJSBridge.invoke('shareTimeline',shareData, function(res) {               //_report('timeline', res.err_msg);        });    }    // 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {        // 发送给好友        WeixinJSBridge.on('menu:share:appmessage', function(argv){            shareFriend();        });        // 分享到朋友圈        WeixinJSBridge.on('menu:share:timeline', function(argv){            shareTimeline();        });    }, false);

可能这个版本在微信没有发布js-sdk时是有用的，但是现在微信好像把这个方法设置了权限，这个方法已经不可用了，所以我到微信官方去看了一下，微信js-sdk已经支持开发接口支持微信分享了，怎么实现，下面一一道来：

微信官方js-sdk链接地址：http://mp.weixin.QQ.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 有兴趣可以自己去研究研究，下面只是我自己的一些经验，水平有限，有错误之处欢迎大家指出。

1. 要使用js-sdk，首先你得拥有一个微信认证过的订阅号或者服务号（个人认为如果开发的还是服务号好），然后按照微信js-sdk api的步骤来，先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。js接口安全域名可以设置三个，意思是你的网页要想使用js-sdk，访问就必须在这个域名下（如果域名带有端口号，设置的时候也必须带有端口号，微信上虽然说只支持80端口，但是我用其他端口好像也可以）。

2. 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

3.通过config接口注入权限验证配置，所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。这里只说分享朋友圈和分享给朋友接口。

wx.config({        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。        appId: appId, // 必填，公众号的唯一标识        timestamp: timestamp, // 必填，生成签名的时间戳        nonceStr: nonceStr, // 必填，生成签名的随机串        signature: signature,// 必填，签名，见附录1        jsApiList: [        'onMenuShareTimeline',        'onMenuShareAppMessage'        ] // 必填，分享朋友圈和分享朋友接口名    });

4.通过ready接口处理成功验证。

wx.ready(function () {    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。      var shareData = {        title: title, // 分享标题        desc: desc, // 分享描述        link: link, //网页地址        imgUrl: imgUrl, //小图片的地址        success: function () {            // 用户确认分享后执行的回调函数        },        cancel: function () {            // 用户取消分享后执行的回调函数        }      };      wx.onMenuShareAppMessage(shareData);      wx.onMenuShareTimeline(shareData);  });

5.以上就是微信文档中的处理js-sdk接口的基本步骤，完成了这些，就可以完成一个如下的分享框：

6.上面的这些步骤都是微信文档上有的，copy就行，我个人觉得初次接触，微信js-sdk的config配置相对来说是要复杂一点。就是第三点里面的签名比较难一点，下面我就详细的说一下我是怎么获得配置的参数的（appid，timestamp，noncestr，signature）；首先找到js-sdk生成签名的文档，阅读发现signature的生成是需要密钥的，就是我们公众号AppSecret，这个东西是不能被别人知道的，所以我们处理密钥一定要在后台处理，在html处理的话会泄漏你的公众号关注者的信息的。所以我们得在后台写一个接口，用来返回config里的配置信息；后台怎么处理呢？（后台是用java写的）

1>首先随机生成一个字符串（noncestr）和一个随机时间戳（timestamp），这就解决了两个配置项；

noncestr  = Double.toString(Math.random()).substring(2, 15);//随机字符串timeStamp =((int)(new Date().getTime()/1000))+"";//随机时间戳

2>然后就的获得微信的基础支持，访问微信的https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET接口，获得返回来的access_token;

public String getAccess_token(){        System.out.PRintln("重新请求access_token");        String access_token = "";        String str = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&";        str += "appid=" + APPID + "&secret=" + APPSECRET;        try {            URL url = new URL(str);            HttpURLConnection connection = (HttpURLConnection)url.openConnection();            connection.setRequestMethod("GET");            connection.setConnectTimeout(CONNECTTIMEOUT);            connection.setReadTimeout(READTIME);            BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(connection.getInputStream(),"utf-8"));            StringBuffer stringBuffer = new StringBuffer();            String temp = "";            while((temp = bufferedReader.readLine())!= null){                stringBuffer.append(temp);                System.out.println(temp);            }            String result = stringBuffer.toString();            JSONObject root = JSONObject.fromObject(result);            access_token = root.getString("access_token");            bufferedReader.close();                    } catch (MalformedURLException e) {            e.printStackTrace();        } catch (IOException e) {            e.printStackTrace();        }        return access_token;    }

3>获得微信的access_token后，就可以获得jsapi_ticket了，访问微信的https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi接口，获得返回来的jsapi_ticket;

public String getJsapi_ticket(String access_token){        System.out.println("重新请求jsapi_ticket");        String jsapi_ticket = "";        String str = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + access_token + "&type=jsapi";        try {            URL url = new URL(str);            HttpURLConnection connection = (HttpURLConnection)url.openConnection();            connection.setRequestMethod("GET");            connection.setConnectTimeout(CONNECTTIMEOUT);            connection.setReadTimeout(READTIME);            BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(connection.getInputStream(),"utf-8"));            StringBuffer stringBuffer = new StringBuffer();            String temp = "";            while((temp = bufferedReader.readLine())!= null){                stringBuffer.append(temp);            }            String result = stringBuffer.toString();            JSONObject root = JSONObject.fromObject(result);            jsapi_ticket = root.getString("ticket");            bufferedReader.close();                    } catch (MalformedURLException e) {            e.printStackTrace();        } catch (IOException e) {            e.printStackTrace();        }        return jsapi_ticket;    }

4>获得jsapi_ticket，noncestr，timestamp还有你的网页地址后就可以生成签名了；

public WeiXinJsServer(String url,HttpServletRequest request) {        this.noncestr  = Double.toString(Math.random()).substring(2, 15);        this.timeStamp =((int)(new Date().getTime()/1000))+"";        String access_token = getAccess_token();        String Jsapi_ticket = getJsapi_ticket(access_token);        String str = "jsapi_ticket=" + Jsapi_ticket + "&noncestr=" + noncestr + "&timestamp="+ timeStamp +"&url=" + url;        this.signature = new SHA1().getDigestOfString(str.getBytes