小知识点（11）微信JS SDK 验证和简单使用

微信JS SDK 验证和二次分享内容设置

在最近的工作中遇到了从app分享内容到微信，然后再从微信分享给别人，分享的时候显示的图片和描述就会丢失的情况。在网上查过之后发现可以通过微信的JS SDK设置分享的图片和描述。

微信JS SDK开发流程

首先通过微信的JS SDK文档了解相关的开发流程

http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html




在上面的步骤中需要注意的是：

要绑定的程序如果不是在80端口下，那么绑定的域名要包含端口号。

微信JS SDK验证配置参数说明

这是最关键的一个步骤，先看上面步骤三的需要参数

appId:这个不用多说，就是微信开发者的appId，登录到微信公众平台可以看到。

timestamp:时间戳，这个也很简单，不过有一个比较坑的地方通过Java获取的时间戳是 13位的，但是使用微信的调试工具时间戳最长只能输入10位，所以在使用的时候最好截取一下。

nonceStr:随机的一个字符串，如果嫌麻烦也可以随便用一个字符串写死，我就写死的例如：abcdefg

signature:最重要的一个，通过获取token，ticket然后把各项参数组合起来加密得到的一个签名。

jsApiList:需要使用的js接口列表，是一个数组,

例如[wx.onMenuShareTimeline,wx.onMenuShareAppMessage]。

signature签名获取

还是先看微信的说明：




其实微信说的很明白想要获取signature需要3个步骤

获取微信信息的方法

[code]    public static String getUrl(String url){
        String result = null;
        try {
            // 根据地址获取请求
            HttpGet request = new HttpGet(url);
            // 获取当前客户端对象
            HttpClient httpClient = new DefaultHttpClient();
            // 通过请求对象获取响应对象
            HttpResponse response = httpClient.execute(request);

            // 判断网络连接状态码是否正常(0--200都数正常)
            if (response.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
                result= EntityUtils.toString(response.getEntity());
            } 
        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }

1.获取access_token

[code]
 private static String get_access_token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="
                  + WeiXinUtils. APPID
                  + "&secret="
                  + WeiXinUtils. SECRET;

//使用定时任务获取token
@Scheduled(fixedDelay=5400000)
       public void getAccess_token(){
             logger.info("请求   weixin   token------" +new Date());
        //根据code请求access_token和 openid等数据
        String json=WeiXinUtils.getUrl( get_access_token_url);
            JSONObject jsonObject = JSONObject.fromObject( json);
            String access_token=jsonObject .getString("access_token");
            WeiXinUtils. access_token=access_token ;
            System. out.println(access_token );
      }

2.使用access_token 获取ticket

[code]
private static String get_ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=AAA"+ "&type=jsapi";

//同样使用定时任务执行
  @Scheduled(initialDelay=10000,fixedDelay=5400000)
       public void getTicket(){
             logger.info("请求   weixin   ticket------" +new Date());
            String json=WeiXinUtils.getUrl( get_ticket_url.replace("AAA" , WeiXinUtils.access_token ));
            JSONObject jsonObject = JSONObject.fromObject( json);
            String ticket=jsonObject .getString("ticket");
            WeiXinUtils. ticket=ticket ;
            System. out.println("ticket:" +ticket );
      }

3.使用ticket，timestamp，nonceStr，和当前页面的url来获得signature

[code]
String basePath = request .getScheme() + "://"+ request.getServerName();

//通过request获取url，也可以在页面使用window.location.href然后传到后台

String url = basePath+request .getRequestURI()+"?userId="+ userId+"&cardId=" +cardId ;
             long timestamp = System.currentTimeMillis ();
             Map map = new HashMap();
             map.put("timestamp",（timestamp+""）.subString（0，10）);
             map.put("noncestr", "qijiakeji");
             map.put("url",url) ;
             map.put("jsapi_ticket", WeiXinUtils. ticket);
            String signature = WeiXinUtils.GetSignature( map);

获取signature

[code]
public static String GetSignature(Map<String,String> map) {
            int index = 0;
            String [] paramArr = new String[4];
             for(Map.Entry<String,String> entry :map .entrySet()){
                   paramArr[index ] = entry.getKey();
                   index++;
            }
            Arrays. sort(paramArr); 
            StringBuilder result = new StringBuilder();
            //这里应该是把存数按照一定的顺序排列，最后结果就是这个顺序，所以就没写
            result.append("jsapi_ticket=" +map .get("jsapi_ticket")).append( "&noncestr="+map .get("noncestr")).append( "×tamp="+map .get("timestamp").substring(0,10)).append( "&url="+map .get("url"));
            System. out.println(result .toString());
        MessageDigest md = null; 
        String tmpStr = null ; 
        try { 
            md = MessageDigest. getInstance("SHA-1"); 
            // 将三个参数字符串拼接成一个字符串进行sha1加密 
            byte[] digest = md.digest( result.toString().getBytes()); 
            tmpStr = byteToStr( digest); 
        } catch (NoSuchAlgorithmException e ) { 
            e.printStackTrace(); 
        }
        return tmpStr .toLowerCase(); 
      }

把这些获取成功的参数传到页面的js中,进行验证。

页面验证

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

设置分享的图片的描述

[code]wx.onMenuShareAppMessage({
    title: '这里是标题', // 分享标题
    desc: '这里是描述', // 分享描述
    link: '这里是链接', // 分享链接
    imgUrl: '这里是图片.png', // 分享图标
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

-总结

这样一个简单的通过js设置微信转发的功能就ok了，虽然不是很难，但是希望写的这些东西能够帮到大家。