網(wǎng)上已有很多SPA單頁做微信開發(fā)碰到的那些坑，這里就自己最近經(jīng)驗(yàn)總結(jié)一些我踩過的一些坑妇蛀，整理記錄一下
VUX是微信推出的WeUI的非官方VUE的非官方實(shí)現(xiàn)厨疙，主要針對移動端微信前端開發(fā)亲桥，屬于個人項(xiàng)目，目前在GitHub已有8k star欧瘪，使用webpack 2以及擴(kuò)展了vue-loader，好用是好用匙赞，但是和其他前端UI框架一樣佛掖，只適用一般開發(fā)，方便快速涌庭，但是如果要配合公司UI設(shè)計(jì)師設(shè)計(jì)符合公司的統(tǒng)一UI風(fēng)格芥被，幾乎所有組件都需要定制，這也是沒辦法的事脾猛，別人都做了撕彤，要你何用呢，但是親身試驗(yàn)猛拴，的確可以提高部分開發(fā)效率羹铅，給作者點(diǎn)個贊。
正文開始
- SPA我就不多做解釋了愉昆，如果只從表面看职员，和普通web應(yīng)用的不同在于url上，最后會增加一個
#跛溉，其實(shí)就代表url路由不經(jīng)過后端焊切，只在前端渲染，針對微信開發(fā)最大的一個坑就在于這兒芳室，微信API都需要對當(dāng)前url做簽名专肪，但是Android和iOS的取值不一致，比如我從/#/list地址進(jìn)入微信跳轉(zhuǎn)到/#/list/detail地址再到/#/list/detail/2地址堪侯，Android能夠正確的取到當(dāng)前地址嚎尤，但是ios永遠(yuǎn)取到的是進(jìn)入的地址也就是/#/list，簽名出錯那么微信API就廢了伍宦，針對以上問題芽死，結(jié)合網(wǎng)上資料有以下方案目前可用（不代表以后有用）- 重寫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`
- 上面說到微信簽名，因?yàn)閱雾搼?yīng)用不經(jīng)過后臺揖曾，需要在每次url變化時向后臺服務(wù)請求簽名config落萎，建議
hashchange的時候同時異步使用promise獲取簽名信息，一定要注意promise的用法翩肌，很容易寫錯模暗，而不知道錯在哪里
this.$wechat.ready(() => { // 這里的$wechat是vux自動注入到vue的，不得不說簡直不要太方便念祭，不然需要做很多對接API的工作
this.$wechat.onMenuShareTimeline({
...
})
})
同時微信分享的鏈接不能像以前一樣取當(dāng)前地址兑宇，需要統(tǒng)一傳入后端再進(jìn)行redirect，比如/wechat/share?to=' + encodeURIComponent(uri)
- 微信API的
success函數(shù)使用() => {}箭頭函數(shù)粱坤，this指向是不到vue組件的隶糕，建議提前賦值使用let _this = this - 遇到的一個小坑，如果使用
cnpm安裝會有各種依賴問題站玄，建議使用npm install --registry=https://registry.npm.taobao.org或者yarn - 小項(xiàng)目
vuex還是不要用了枚驻，給自己找不痛快，復(fù)雜的還是建議用上吧株旷，全局比如共享的路由信息再登、用戶信息、滾動等會方便不少 -
vue-resource配合vue 2已經(jīng)不太好用了晾剖，建議換成axios - 最后锉矢，單頁應(yīng)用對于做微信授權(quán)個人覺得是最大的坑，因?yàn)閱雾搼?yīng)用一般不經(jīng)過后端齿尽，但是微信授權(quán)必須跳轉(zhuǎn)到微信授權(quán)地址再返回沽损，但是如果url里有#帶參數(shù)，回調(diào)地址會各種不對循头，因?yàn)槲⑿乓崆皩rl做處理绵估，所以建議統(tǒng)一授權(quán)回調(diào)方式，還是和上文類似的方案卡骂，經(jīng)過一層重寫跳轉(zhuǎn)即可国裳，可以在前端做，比如新建一個
oauth.html的靜態(tài)文件全跨，所有頁面先跳轉(zhuǎn)到此頁面從后臺獲取原地址再跳轉(zhuǎn)到想要去的地址躏救，第二種方案是直接回調(diào)到后臺再經(jīng)過redirect到前臺，無論哪種方案螟蒸，在用戶體驗(yàn)上都會有一種卡卡的感覺盒使，暫時沒找到更好的解決方案。
暫時只想到這幾個七嫌，微信API文檔真不好用少办，沒辦法，誰叫人家用戶多呢诵原，總結(jié)英妓，我決定下次還是使用服務(wù)端渲染方案吧，暫定使用
next.jshttps://github.com/zeit/next.js/绍赛，到時再和大家分享蔓纠。
