之前在做微信的時候，在微信支付還有調起微信掃一掃的時候，用過js-sdk。最近，被幾個做前端的同學問到了具體的流程，想想，還是寫下來好點。
微信js-sdk，是微信提供給網頁開發設計者使用的，在頁面上使用部分微信功能的SDK。關於它的文檔，可以通過微信公眾平台上獲取獲取。
http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html
關於如何開發，其實在微信的文檔上面已經說得蠻清楚的了，只要按照文檔來，大概就能夠調得出自己想要的功能了。
調起微信js-sdk，可以分為兩個部分，配置部分和編碼部分。
配置部分，需要開發者登錄到微信公眾平台上，對能夠進行js-sdk調起的域名進行授權，只有通過授權的域名，才能調起。主要的配置在 公眾號設置”的“功能設置”里填寫“JS接口安全域名”。設置完成后，在需要調起的頁面，導入微信官方給出的js
https://res.wx.qq.com/open/js/jweixin-1.0.0.js，前期的工作就大部分完成了。
編碼部分主要分為前端編碼和后台編碼，因為微信的js-sdk調起的時候，需要向微信服務器傳一些驗簽的參數，而這些參數，在微信官方是推薦由后台進行加密后再傳回前端的。
在開始編碼之前，首先了解一下從用戶使用開始，到調起js-sdk進行操作得當整個流程：
大致的流程如圖所示，用戶通過微信客戶端訪問程序員開發的H5頁面，該頁面要調起js-sdk的某些功能，則需要在頁面加載完成之后，首先請求企業的服務器，申請入appscrte等參數，然后將參數填入wx.config()函數中，該函數主要確定該頁面是否可以調起js-sdk，該函數執行完成之后，默認會調用wx.ready()，如果需要頁面加載完成后立馬調起js-sdk的話，需要將調用的代碼放在
wx.ready()中。如果不需要，就只需要在根據情況在頁面上出發對應的js-sdk提供的函數即可。每個函數，都會有對應的成功與失敗的回調函數，前端通過該函數，來實現對應的結果展示就行了。
在這個過程中，前端所需要做的，其實就是根據需求來調起微信js-sdk中的函數。前端重中之中在於頁面加載完成之后的wx.config()接入，而后台的任務則是根據微信的算法，對參數進行加密，然后將數據打包返回給前端。
調起js-sdk所后台需要做的可以分為以下幾步：
1、通過請求微信服務器獲取 access_token；
2.、通過 access_token獲取到調起js-sdk所需要用到的 jsapi_ticket；
3、將 noncestr（隨機字符串）， jsapi_ticket， timestamp(時間錯)， url（調起js-sdk的網址）四個參數進行排序並加密生產一串加密字符
4、將appId（公眾號的唯一標識）， timestamp， nonceStr:，signature（簽名）返回給前端
具體需要涉及到的算法如下：
1 public static String signatureSHA1(Map<String, String> map) { 2 3 Set<String> keySet = map.keySet(); 4 5 String[] str = new String[map.size()]; 6 7 StringBuilder tmp = new StringBuilder(); 8 9 // 進行字典排序 10 11 str = keySet.toArray(str); 12 13 Arrays.sort(str); 14 15 for (int i = 0; i < str.length; i++) { 16 17 String t = str[i] + "=" + map.get(str[i]) + "&"; 18 19 tmp.append(t); 20 21 } 22 23 String tosend = tmp.toString().substring(0, tmp.length() - 1); 24 25 MessageDigest md = null; 26 27 byte[] bytes = null; 28 29 try { 30 31 md = MessageDigest.getInstance("SHA-1"); 32 33 bytes = md.digest(tosend.getBytes("utf-8")); 34 35 } catch (Exception e) { 36 37 e.printStackTrace(); 38 39 } 40 41 String singe = byteToStr(bytes); 42 43 return singe.toLowerCase(); 44 45 }
需要注意的是，在前端進行調試的過程中，蘋果版的微信會在調出js-sdk出錯的時候彈出更加詳細的信息，而安卓版有時候只是沒反應，連信息都不會彈出，所以建議如果確定后台算法正確的情況下，可以在蘋果的微信下進行調試。
具體的項目實例可以看
https://github.com/Seanid/wechatPay中頁面調起微信支付部分