網上已有很多SPA單頁做微信開發碰到的那些坑，這里就自己最近經驗總結一些我踩過的一些坑，整理記錄一下
VUX是微信推出的WeUI的非官方VUE的非官方實現，主要針對移動端微信前端開發，屬于個人項目，目前在GitHub已有8k star，使用webpack 2以及擴展了vue-loader，好用是好用，但是和其他前端UI框架一樣，只適用一般開發，方便快速，但是如果要配合公司UI設計師設計符合公司的統一UI風格，幾乎所有組件都需要定制，這也是沒辦法的事，別人都做了，要你何用呢，但是親身試驗，的確可以提高部分開發效率，給作者點個贊。
正文開始
- SPA我就不多做解釋了，如果只從表面看，和普通web應用的不同在于url上，最后會增加一個
#，其實就代表url路由不經過后端，只在前端渲染，針對微信開發最大的一個坑就在于這兒，微信API都需要對當前url做簽名，但是Android和iOS的取值不一致，比如我從/#/list地址進入微信跳轉到/#/list/detail地址再到/#/list/detail/2地址，Android能夠正確的取到當前地址，但是ios永遠取到的是進入的地址也就是/#/list，簽名出錯那么微信API就廢了，針對以上問題，結合網上資料有以下方案目前可用（不代表以后有用）- 重寫url地址加上
?，比如/?#/list，代碼
- 重寫url地址加上
function onHashChange () {
let paths = window.location.href.split('#')
paths[1] = paths[1] || '/'
if (paths[1].charAt(0) === '!') {
paths[1] = paths[1].substr(1)
}
let url = `${paths[0]}#${paths[1]}`
if (window.location.href !== url) {
window.location.href = url
}
}
window.addEventListener('hashchange', onHashChange)
onHashChange()
* 以上情況針對微信分享和微信支付又需要做不同處理，微信分享的簽名鏈接需要是`window.location.href.split('#')[0]`，而支付簽名需要是`window.location.href`
- 上面說到微信簽名，因為單頁應用不經過后臺，需要在每次url變化時向后臺服務請求簽名config，建議
hashchange的時候同時異步使用promise獲取簽名信息，一定要注意promise的用法，很容易寫錯，而不知道錯在哪里
this.$wechat.ready(() => { // 這里的$wechat是vux自動注入到vue的，不得不說簡直不要太方便，不然需要做很多對接API的工作
this.$wechat.onMenuShareTimeline({
...
})
})
同時微信分享的鏈接不能像以前一樣取當前地址，需要統一傳入后端再進行redirect，比如/wechat/share?to=' + encodeURIComponent(uri)
- 微信API的
success函數使用() => {}箭頭函數，this指向是不到vue組件的，建議提前賦值使用let _this = this - 遇到的一個小坑，如果使用
cnpm安裝會有各種依賴問題，建議使用npm install --registry=https://registry.npm.taobao.org或者yarn - 小項目
vuex還是不要用了，給自己找不痛快，復雜的還是建議用上吧，全局比如共享的路由信息、用戶信息、滾動等會方便不少 -
vue-resource配合vue 2已經不太好用了，建議換成axios - 最后，單頁應用對于做微信授權個人覺得是最大的坑，因為單頁應用一般不經過后端，但是微信授權必須跳轉到微信授權地址再返回，但是如果url里有#帶參數，回調地址會各種不對，因為微信要提前對url做處理，所以建議統一授權回調方式，還是和上文類似的方案，經過一層重寫跳轉即可，可以在前端做，比如新建一個
oauth.html的靜態文件，所有頁面先跳轉到此頁面從后臺獲取原地址再跳轉到想要去的地址，第二種方案是直接回調到后臺再經過redirect到前臺，無論哪種方案，在用戶體驗上都會有一種卡卡的感覺，暫時沒找到更好的解決方案。
暫時只想到這幾個，微信API文檔真不好用，沒辦法，誰叫人家用戶多呢，總結，我決定下次還是使用服務端渲染方案吧，暫定使用
next.jshttps://github.com/zeit/next.js/，到時再和大家分享。
