最近參與了一個微信活動頁面開發，遇到各種問題，總結一下，主要涉及微信jssdk（難點在于微信簽名，簽名后才能使用jssdk）、微信網頁授權獲取用戶信息、微信公眾賬號支付這三個部分。
一、微信jssdk的使用
由于要使用微信jssdk需要在微信公眾賬號里邊配置微信js安全域名，如果是正式的公眾號時需要備案的域名，并且一個月只能修改三次。
因此開發時我們申請了一個訂閱號(訂閱號不需要認證，申請起來比較快，但是訂閱號不能測試微信公眾號支付)，然后進入訂閱號的開發者工具=》公眾平臺測試賬號=》按照步驟掃二維碼進入以下頁面
配置js接口安全域名（注意必須是外網可以訪問的域名，測試號也可以是ip地址）
因為使用微信jssdk需要簽名，簽名必須要后端支持，作為一名不會寫后臺代碼的前端開發者來說，自己想測試一下jssdk的功能也是有辦法可尋的（如果有后端人員愿意支持你，給你提供簽名的接口也是可以的）。
我來講講我初步學習使用jssdk的方式。
1.在微信開發者文檔
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN
底部提供的鏈接
http://demo.open.weixin.qq.com/jssdk/sample.zip
下載實例代碼，其中包含php、java、nodejs以及python的示例代碼；我使用的是php的代碼因為搭建服務比較簡單，'修改sample.php頁面，將測試號的appid\appsecret寫到代碼對應的位置，然后將要測試的代碼房子wx.ready(function(){})里邊就可以了
我選擇的是新浪云
http://www.sinacloud.com/?from=baidu_web
平臺SEA搭建的一個php的云服務，然后通過svn或者git將修改后的代碼傳到創建的應用里邊，通過微信客戶端訪問創建的應用的網址就可以看到效果了
也可以下載微信web開發者工具，登錄自己的微信號就可以在開發者工具里邊看到效果并且調試了
二、微信網頁授權，獲取用戶信息
在公眾賬號中配置授權回調域名
通過微信的授權url，配置appid\回調url，授權后會跳轉到回調url,回調的url上微信會自動加上一個code碼，然后將code碼傳給后端，后端用code獲取到openid（不通的授權方式獲取的用戶信息權限不一樣）或其他用戶信息返回給前端，授權成功
三、微信支付
申請微信公眾賬號支付，申請成功之后，配置支付授權目錄（建議直接使用支付授權目錄，不通過測試目錄開發），支付授權目錄要求如下（雖要求進去匹配，但實際開發過程中，支付頁面是/cart/payment，但是只有配置/cart才生效，不知道為什么）
將openid傳給后端，后端返回timestamp、nonceStr、package、paySign信息，然后再前端調用一下jssdk(按文檔要求需要簽名后再調用，但實際測試簽名失敗調用此sdk也能成功)
wx.chooseWXPay({
timestamp: 0, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付 后臺生成簽名使用的timeStamp字段名需大寫其中的S字符
nonceStr: '', // 支付簽名隨機串，不長于 32 位
package: '', // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=***）
signType: '', // 簽名方式，默認為'SHA1'，使用新版支付需傳入'MD5'
paySign: '', // 支付簽名
success: function (res) {
// 支付成功后的回調函數
},
cancle:function(res){
//取消支付的回調函數
},
fail:function(res){
//支付失敗的回調函數
}
});
四、主要遇到的問題和注意事項
1.jssdk簽名、微信授權回調地址都是需要外網地址的，這倆個都可以通過申請一個測試號就可以開發，外網地址可以通過第三方云服務，或者下載一個net123/花生殼將外網域名映射到內網ip，如果本身就有外網域名最好
2.微信支付必須要有一個認證的公眾號才能開發（訂閱號不能認證），并且必須要一個備案的的域名（可以是二級域名）
3.微信公眾賬號支付最好使用wx.chooseWXPay而不要使用 getBrandWCPayRequest，因為后者是現在新版本的已經不支持了，并且前者更安全
4.一個還未有更好解決方式的問題
對應單頁的web app來說，通過react-rooter的push來跳轉頁面，簽名可能存在問題
實際中遇到的問題，在一個用thinkjs+react搭建的觸屏版商城中開發微信公眾賬號支付，該項目是一個單頁app，通過react-rooter來管理頁面的跳轉，整個流程如下：
登錄=》微信授權網址=》跳轉到回調url=》獲取回調url中的code，傳給后臺獲取openid,將openid存儲下來
提交訂單寫道openid過去=》后臺返回支付需要的必要參數=》跳轉到支付頁面/cart/payment=》簽名=》調用支付接口
如果用路由自帶的push的方法跳轉到/cart/payment，那么通過window.location.href.split('#')[0]獲取到的url拿去簽名會簽名失敗，但是將首頁的url傳過去才能成功
但是如果遇到從其他活動直接跳轉到提交訂單頁面（如果沒有登錄的情況下，會跳轉到登錄頁面）=》登錄后回調的url會是之前的url，此時如果再支付iphone5s會一直報當前url未注冊（而當前url的地址是提交訂單頁面），但是iphone6當前url的地址是首頁，會導致支付失敗，但是安卓手機能夠正常支付
最后通過window.location.href跳轉到/cart/payment，簽名url還是window.location.href.split('#')[0]就都能正常支付，但是對于單頁app來說這樣的跳轉會很慢
