使用spring boot+thymeleaf实现微信公众号开发之js_sdk接口

1.使用微信的js-sdk接口首先要在自己的微信测试公众号，或者是公众号上面添加js安全域名。

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

3.通过config接口注入权限验证配置

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

4.接下来就写一下有关这三大凭证的获取方法：

第一步：获取jsapi的凭证票：（这里acess_token的获取方法就不写了，应该都会）

 public static String getJSApiTicket(){ 
        //获取token
        String acess_token= JsapiTicketUtil.getAccessToken();
           
        String urlStr = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+acess_token+"&type=jsapi";  
        String backData=JsapiTicketUtil.sendGet(urlStr, "utf-8", 10000);  
        String ticket = (String) JSONObject.fromObject(backData).get("ticket");  
        return  ticket;  
           
    }  

第二步：获取三大凭证

 public static Map<String, String> sign(String jsapi_ticket, String url) {
	        Map<String, String> ret = new HashMap<String, String>();
	        String nonce_str = create_nonce_str();
	        String timestamp = create_timestamp();
	        String string1;
	        String signature = "";
	 
	        //注意这里参数名必须全部小写，且必须有序
	        string1 = "jsapi_ticket=" + jsapi_ticket +
	                  "&noncestr=" + nonce_str +
	                  "&timestamp=" + timestamp +
	                  "&url=" + url;
	        System.out.println(string1);
	 
	        try
	        {
	            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
	            crypt.reset();
	            crypt.update(string1.getBytes("UTF-8"));
	            signature = byteToHex(crypt.digest());
	        }
	        catch (NoSuchAlgorithmException e)
	        {
	            e.printStackTrace();
	        }
	        catch (UnsupportedEncodingException e)
	        {
	            e.printStackTrace();
	        }
	 
	        ret.put("url", url);
	        ret.put("jsapi_ticket", jsapi_ticket);
	        ret.put("nonceStr", nonce_str);
	        ret.put("timestamp", timestamp);
	        ret.put("signature", signature);
	 
	        return ret;
	    }
	 
	    private static String byteToHex(final byte[] hash) {
	        Formatter formatter = new Formatter();
	        for (byte b : hash)
	        {
	            formatter.format("%02x", b);
	        }
	        String result = formatter.toString();
	        formatter.close();
	        return result;
	    }
	 
	    private static String create_nonce_str() {
	        return UUID.randomUUID().toString();
	    }
	 
	    private static String create_timestamp() {
	        return Long.toString(System.currentTimeMillis() / 1000);
	    }

第三步：跳转界面，并且将数据放入model中（jsapi实体就不写了）

/**
	 * @Description 调用微信jssdk（成功之后要打开的界面！）
	 * @Creat date 2018-12-1
	 * @author yulin
	 * @return updatepicture.html
	 */
	@RequestMapping("updatepicture")
	public String updatepicture(Model model) {
		
		String jsapi_ticket =JsapiTicketUtil.getJSApiTicket();
		String url="";   //url是你当前访问的界面的url
        Map<String,String> map = Sign.sign(jsapi_ticket, url);
        
        Jsapi jsapi=new Jsapi();
        jsapi.setTimestamp(map.get("timestamp"));
        jsapi.setNonceStr(map.get("nonceStr"));
        jsapi.setSignature(map.get("signature"));
        jsapi.setAppId("你的appID");
		System.out.println(jsapi);
		model.addAttribute("jsapi",jsapi);
		return "weixinpage/updatepicture";
	}

第四部：前台thymeleaf进行调用，（这里我把所有的接口都写上了）

 wx.config({
      debug: false,
      appId: '[[${jsapi.appId}]]',
      timestamp: '[[${jsapi.timestamp}]]',
      nonceStr: '[[${jsapi.nonceStr}]]',
      signature: '[[${jsapi.signature}]]',
      jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',
        'translateVoice',
        'startRecord',
        'stopRecord',
        'onVoiceRecordEnd',
        'playVoice',
        'onVoicePlayEnd',
        'pauseVoice',
        'stopVoice',
        'uploadVoice',
        'downloadVoice',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getNetworkType',
        'openLocation',
        'getLocation',
        'hideOptionMenu',
        'showOptionMenu',
        'closeWindow',
        'scanQRCode',
        'chooseWXPay',
        'openProductSpecificView',
        'addCard',
        'chooseCard',
        'openCard'
      ]
  });