在微信開發中使用jssdk

直接上代碼：

1、發送請求獲取jsapiTicket

public class JsapiTicketUtil {
    /***
     * 模擬get請求
     * @param url
     * @param charset
     * @param timeout
     * @return
     */
     public static String sendGet(String url, String charset, int timeout)
      {
        String result = "";
        try
        {
          URL u = new URL(url);
          try
          {
            URLConnection conn = u.openConnection();
            conn.connect();
            conn.setConnectTimeout(timeout);
            BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(), charset));
            String line="";
            while ((line = in.readLine()) != null)
            {
              result = result + line;
            }
            in.close();
          } catch (IOException e) {
            return result;
          }
        }
        catch (MalformedURLException e)
        {
          return result;
        }
       
        return result;
      }
    /***
      *  獲取jsapiTicket的憑證票據
      * @return
      */
    public static String getJSApiTicket(){ 
        //獲取token
        String acess_token= TokenThread.accessToken.getToken();
           
        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 void main(String[] args) {
        String jsapiTicket = JsapiTicketUtil.getJSApiTicket();
        System.out.println("調用微信jsapi的憑證票據為："+jsapiTicket);
        }
}

2、生成配置參數

/**
 * 獲取timestamp,nonceStr,signature三個參數（頁面配置js）
 * 工具類
 * @author xcg
 * @date 2018.01.09
 */
public class GenerateConfigParame {
    
    /**
     * 生成三個配置參數：timestamp,nonceStr,signature
     * @param jsapi_ticket
     * @param url
     * @return
     */
    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;
 
        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;
    }
    /**
     * byte轉換為16進制字符串
     * @param hash
     * @return
     */
    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;
    }
    /**
     * 創建隨機串
     * @return
     */
    private static String create_nonce_str() {
        return UUID.randomUUID().toString();
    }
    /**
     * 創建時間戳
     * @return
     */
    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }
}

3、初始化微信 jsApi，生成臨時憑據，設置初始化配置參數，將參數帶到頁面

public class WxJsInit {
    /**
     * 初始化微信 jsApi，生成臨時憑據，設置初始化配置參數
     * @param request
     */
    public static void initJsapi(HttpServletRequest request) {
        //默認80端口，不用加入動態地址
        String dynamicUrl = request.getScheme() //當前鏈接使用的協議
            +"://" + Parame.url
            + request.getContextPath() //應用名稱，如果應用名稱為
            + request.getServletPath() //請求的相對url 
            + "?" + request.getQueryString(); //請求參數
        
        System.out.println("------------------------" + dynamicUrl + "------------------------");
        
        //獲取jsapi_ticket臨時憑據
        String jsapi_ticket = JsapiTicketUtil.getJSApiTicket();
        // 注意 URL 一定要動態獲取，不能 hardcode
        String url = dynamicUrl;//url是你請求的一個action或者controller地址，並且方法直接跳轉到使用jsapi的jsp界面
        Map<String, String> signMap = GenerateConfigParame.sign(jsapi_ticket, url);
        request.setAttribute("appId", Parame.appid);
        request.setAttribute("timestamp", signMap.get("timestamp"));
        request.setAttribute("nonceStr", signMap.get("nonceStr"));
        request.setAttribute("signature", signMap.get("signature"));
    }
}

4、前台頁面初始化jssdk

//--------------------微信jssdk---------------------
wx.config({    
        //debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。    
        appId: '${appId}', // 必填，公眾號的唯一標識    
        timestamp: '${ timestamp}' , // 必填，生成簽名的時間戳    
        nonceStr: '${ nonceStr}', // 必填，生成簽名的隨機串    
        signature: '${ signature}',// 必填，簽名，見附錄1    
        jsApiList: ['chooseImage',//選擇圖片 
                    'uploadImage',//上傳圖片 
                    'downloadImage',//下載圖片
                    'previewImage'//預覽圖片  
                   ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2    
    });  

wx.error(function (res) {
  alert("調用微信jsapi返回的狀態:"+res.errMsg);
});
wx.ready(function () { 
    });

5、打開wx.config({})中，debug:true,頁面彈出{config:ok}字樣，及配置完成

6、若配置失敗，則檢查js接口域名配置是否有誤，參考官方提示配置js接口域名即可！