歷經1周半開發週期，我基於vue的微信活動頁也算勉強上線了，經歷了不少坑也填了不少坑，總體來說還是受益匪淺的。
本篇會涉及的內容有：
- Vue活動頁框架搭建
- 開發活動頁時路由的相關用法
- 活動頁與主站的使用者互通
- 實際上線遇到的問題
- 本次開發總結
Vue活動頁框架搭建
相信大家都有接到過做活動頁的需求吧，並且而且大部分情況下是基於微信環境的。在這樣的背景下，vue方便快捷的生產模式似乎比其他框架要更佔優。
一般開發一個活動單頁需要用到的技術有Vue/Vue-router/axios/sass/webpack，看似好像挺多的，但其實vue-cli都幫我們把這些問題解決了，該配的配置也配好了，只需要根據自己的需要變更或增添一些配置即可快速搭建一個可用的活動頁框架。下方有關於活動頁框架搭建的傳送門↓↓
開發活動頁時路由的相關用法
一個移動端活動頁開發的是否成功，個人認為體驗是一大因素，既然談到了體驗那麼路由自然就不可忽略了，好的路由跳轉能夠給整個活動頁加分許多，但是實際開發中，路由並不是那麼的容易和我們的業務貼合，特別是在微信環境中。
本次活動頁大部分時間都是耗在了路由坑裡，無論是微信授權還是微信支付都是坑坑窪窪的，下方有關於活動頁路由使用的傳送門↓↓
活動頁與主站的使用者互通
關於這塊還是想簡單提提，活動頁一般來說是少不了微信授權或是支付的，這時候如果能夠複用主站的使用者資料就爽很多了（特別是使用者體驗上），所以建議活動頁有條件的話可以放在主站的域名下，為啥？可以共用某些東西唄~
實際上線遇到的問題
①vue-router中base路徑的問題
在關於路由的文章中提及了base路徑的用法，去解決非根路徑指向index的問題，但是事實發現是不可行的（當然這是基於我這邊的開發背景下不可行）。
瀏覽器總會在我的路徑最後加上'/'導致微信支付無法正常調起（特別是安卓機），最終還是講route中的path改成了相應的完整路徑，以解決這個問題。
②初始化微信JSSDK的方式
一開始在main.js中初始化了JSSDK，但發現這樣無法在vue應用中很好的獲取當前wxReady的狀態，可能會導致微信分享出現問題。最終還是獨立出了一個component用來載入微信的JSSDK並且監聽$route的狀態，每次route變化時都重新設定微信分享。
將初始化JSSDK的方法放到component中有一個好處就是能夠用到props和state，在應對某些需求的時候效果拔群。
③關於支付
剛開發的時候將支付相關的方法都放到了Utils.js中了，但隨著開發的進行，頁面深度越來越深，並且觸發支付的姿勢也越來越多種多樣了，最終還是決定將支付相關的程式碼剝離開來，放到Pay.vue這個元件中，掛載在頂層父元件中，並交由vuex來處理支付邏輯。
④專案目錄
最後給大家看看這次專案的目錄結構，雖然估計還是挺多坑的，但還是希望能有所幫助。
這次不僅是js我建立了Utils，在scss上我也嘗試設立一個類似的"公用庫"裡面存放一些關於px2rem的方法以及一些常用的mixin，試驗效果還是不錯的。
另外，無論在page層級還是component層級的開發，只要專案不是特別大型，我都建議將html、css、js都放到同一個資料夾內，倘若用到圖片資源甚至也可以放在同一資料夾下，這樣一來，如果專案日益變大，它的效果就出來了。
上面提及的微信JSSDK與支付的component都寫在了components資料夾內方便以後維護的同學"顧名思義"。
總結
這也算是少數幾個由一人獨自解決的中小型活動頁了，這一週多下來工作量還是比較飽和的（雖然都是在查文件）。其實不僅僅是在專案搭建和邏輯耗費精力，在頁面的設計稿還原上也是花了不少時間的，畢竟涉及到了多列表以及橫縱列表混合，並且頁面的資訊量十分巨大，佈局寫起來也是令人窒息的。
等到同事們配完需要展示的內容，希望能在這裡展示給大家看看吧，謝謝閱讀~
