基於vue開發微信活動頁-總結篇

歷經1周半開發週期，我基於vue的微信活動頁也算勉強上線了，經歷了很多坑也填了很多坑，整體來講仍是受益不淺的。

本篇會涉及的內容有：

• Vue活動頁框架搭建
• 開發活動頁時路由的相關用法
• 活動頁與主站的用戶互通
• 實際上線遇到的問題
• 本次開發總結

Vue活動頁框架搭建

相信你們都有接到過作活動頁的需求吧，而且並且大部分狀況下是基於微信環境的。在這樣的背景下，vue方便快捷的生產模式彷佛比其餘框架要更佔優。

通常開發一個活動單頁須要用到的技術有Vue/Vue-router/axios/sass/webpack，看似好像挺多的，但其實vue-cli都幫咱們把這些問題解決了，該配的配置也配好了，只須要根據本身的須要變動或增添一些配置便可快速搭建一個可用的活動頁框架。下方有關於活動頁框架搭建的傳送門↓↓

記從無到有的活動頁開發

開發活動頁時路由的相關用法

一個移動端活動頁開發的是否成功，我的認爲體驗是一大因素，既然談到了體驗那麼路由天然就不可忽略了，好的路由跳轉可以給整個活動頁加分許多，可是實際開發中，路由並非那麼的容易和咱們的業務貼合，特別是在微信環境中。

本次活動頁大部分時間都是耗在了路由坑裏，不管是微信受權仍是微信支付都是坑坑窪窪的，下方有關於活動頁路由使用的傳送門↓↓

基於vue開發活動頁-路由相關

活動頁與主站的用戶互通

關於這塊仍是想簡單提提，活動頁通常來講是少不了微信受權或是支付的，這時候若是可以複用主站的用戶數據就爽不少了（特別是用戶體驗上），因此建議活動頁有條件的話能夠放在主站的域名下，爲啥？能夠共用某些東西唄~

實際上線遇到的問題

①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文件夾內方便之後維護的同窗"顧名思義"。

總結

這也算是少數幾個由一人獨自解決的中小型活動頁了，這一週多下來工做量仍是比較飽和的（雖然都是在查文檔）。其實不只僅是在項目搭建和邏輯耗費精力，在頁面的設計稿還原上也是花了很多時間的，畢竟涉及到了多列表以及橫縱列表混合，而且頁面的信息量十分巨大，佈局寫起來也是使人窒息的。

等到同事們配完須要展現的內容，但願能在這裏展現給你們看看吧，謝謝閱讀~