微信公衆號之微信JS-SDK開發

微信JS-SDK說明文檔：

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

根據微信說明文檔步驟：（1）綁定域名[略]（2)引入js文件[略]

（3）經過config接口注入權限驗證配置：

　　　　　　　　　　頁面代碼：

<script type="text/javascript">     function jssdk() {         $.ajax({             url : '<%=basePath%>wx/jssdk.do',//調用java後臺獲取config配置信息：appid、timestamp 、nonceStr 、signature             type : 'post',             dataType : 'json',             //contentType : "application/x-www-form-urlencoded; charset=utf-8",             data : {                 'url' : location.href.split('#')[0]             },             success:function(data) {                 wx.config({                     debug : true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。                     appId : data.appId,                     timestamp : data.timestamp,                     nonceStr : data.nonceStr,                     signature : data.signature,                     jsApiList : ['chooseImage','previewImage', 'uploadImage', 'downloadImage']                 });             }         });     }         window.onload = function() {         jssdk();     }; </script>

後臺獲取jssdk配置信息：

@RequestMapping(value = "/jssdk" , method = {RequestMethod.POST })     @ResponseBody     public String JSSDK_config(             @RequestParam(value = "url", required = true) String url) {         try {             System.out.println(url);             Map<String, String> configMap = WeixinUtil.jsSdk(url);             String data = JSON.toJSONString(configMap);             return data;         } catch (Exception e) {             LOGGER.error("get jsconfig is error.");         }         return null;       } /**      * weixinUtil中前端頁面須要的配置信息      * @param url      * @return      * @throws Exception      */     public static HashMap<String, String> jsSdk(String url) throws Exception{         long times = System.currentTimeMillis();         String timestamp = String.valueOf(times);         String nonce_str = create_nonce_str();         String  string1 = "jsapi_ticket=" + TokenThread.jsapi_ticket + "&noncestr=" + nonce_str                     + "&timestamp=" + timestamp  + "&url=" + url;         MessageDigest digest = MessageDigest.getInstance("SHA-1");         digest.reset();         digest.update(string1.getBytes("UTF-8"));         String signature = byteToHex(digest.digest());         HashMap<String, String> jssdk=new HashMap<String, String>();         jssdk.put("appId", PropertiesUtil.getProperty("APPID"));         jssdk.put("timestamp", timestamp);         jssdk.put("nonceStr", nonce_str);         jssdk.put("signature", signature);         return jssdk;     }

配置成功後，調用上傳圖片接口：

　　　　　　　　　　　　　　　　　　　　HTML代碼：

<form class="signup" role="form"> <div class="tit-set">                     上傳圖片             </div>             <div class="tit-set">                     提交             </div> </form>   <script type="text/javascript">         var images = {                    localId: [],                 serverId: []             };         $(".tit-set").eq(0).click(function(){             wx.chooseImage({                 count: 1, // 默認9                 sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有                 sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有                 success: function (res) {                     images.localId = res.localIds;                     var localIds = res.localIds; // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片                     wx.uploadImage({                          localId: images.localId.toString(), // 須要上傳的圖片的本地ID，由chooseImage接口得到                          isShowProgressTips: 1, // 默認爲1，顯示進度提示                          success: function (res) {                              var serverId = res.serverId; // 返回圖片的服務器端ID                              //alert("serverId: "+serverId);                             images.serverId = serverId;                            wx.getLocalImgData({                                  localId: images.localId.toString(), // 圖片的localID                                                                   success: function (res) {                                      var imgs = $("<img />");                                      var idp = $("#idp").width();                                      var localData = res.localData; // localData是圖片的base64數據，能夠用img標籤顯示                                      imgs.attr("src",localData);                                      imgs.css({"width":idp,"margin":0});                                        $("#idp").append(imgs);                                  }                              });                           // imgs.src = serverId;                           //alert("dddd"+JSON.stringify(res));                          }                       });                 }             });         });

 

調用上傳圖片接口後，須要將此圖片存到本身的圖片服務器時，須要將mediaId即images.serverId提交給java後臺接口，後臺接口接收到mediId後，調用微信獲取臨時素材接口：

 

public static void main(String[] args) throws Exception { //         String token = TokenThread.accessToken.getToken();         String requrl = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID";         String url = requrl.replace("ACCESS_TOKEN", "HkAKN1zhEhIJvJ2iFHSxKBxD2i86IGe2lVVirE7iDFsSX3PeN-0mJ1wF4mTDP8Dibkv2ievaDLXUlzz6pE2hJHJ4uc6OD-jnTbsmDL1PyrFycpCMgQZ-yMW5eMepYkK1HFObACALJS").replace("MEDIA_ID", "iLXQnxsZYqjij_F3uwYMKXGM7ugE76yYkGZSxTIDCmY5ARujVBxe_9dEZUH80bRa");                  InputStream inputStream = null;           HttpURLConnection httpURLConnection = null;              URL u = new URL(url);//建立的URL              httpURLConnection = (HttpURLConnection) u.openConnection();//打開連接               httpURLConnection.setConnectTimeout(3000);//設置網絡連接超時時間，3秒，連接失敗後從新連接               httpURLConnection.setDoInput(true);//打開輸入流               httpURLConnection.setRequestMethod("GET");//表示本次Http請求是GET方式               int responseCode = httpURLConnection.getResponseCode();//獲取返回碼               if (responseCode == 200) {//成功爲200                   //從服務器得到一個輸入流                   inputStream = httpURLConnection.getInputStream();               }                          byte[] data = new byte[1024];             int len = 0;             FileOutputStream fio = null;                          try {                 fio = new FileOutputStream("D:\\demo.jpg");                 while ((len = inputStream.read(data)) != -1) {                     fio.write(data, 0, len);                     }             } catch (Exception e) {                 // TODO Auto-generated catch block                 e.printStackTrace();             }finally{                 if (inputStream != null) {                     try {                     inputStream.close();                     } catch (IOException e) {                     // TODO Auto-generated catch block                     e.printStackTrace();                     }                     }                     if (fio != null) {                     try {                     fio.close();                     } catch (IOException e) {                     // TODO Auto-generated catch block                     e.printStackTrace();                     }                     }             }     }