記錄一下去年年底做的一個(gè)小項(xiàng)目，用vue做的一個(gè)單頁面應(yīng)用，活動(dòng)涉及頁面5個(gè)，應(yīng)該也不算小的單頁面應(yīng)用吧~

我們大部分人用vue做單頁面或多頁面項(xiàng)目都是直接用webpack和vue-cli腳手架一鍵創(chuàng)建，快速方便~但快速開發(fā)多了，很多人也就不了解vue.js其實(shí)也是可以直接在html引入使用的~當(dāng)然兩種方式如何使用根據(jù)具體的項(xiàng)目來分析的，對于一個(gè)不小且頁面較多的項(xiàng)目用自動(dòng)化工具構(gòu)建的當(dāng)然更便于維護(hù)~對于很多小的活動(dòng)專題大部分時(shí)候也不需要用vue開發(fā)，技術(shù)選型還是要具體情況具體分析

項(xiàng)目名稱：高校抽獎(jiǎng)

項(xiàng)目說明：顧名思義這是一個(gè)運(yùn)營在高校的抽獎(jiǎng)活動(dòng)專題，其實(shí)是蹭錦鯉的熱度做的用戶拉新和引導(dǎo)app下載?；顒?dòng)推廣僅在微信和app里，用戶可參與活動(dòng)獲取抽獎(jiǎng)碼[h5只能看活動(dòng)相關(guān)信息，具體操作均引導(dǎo)至app進(jìn)行交互]，同時(shí)用戶可分享和邀請好友，好友成功參與則分享者也可獲得一組抽獎(jiǎng)碼，活動(dòng)會(huì)在規(guī)定時(shí)間進(jìn)行開獎(jiǎng)[中獎(jiǎng)號(hào)碼由后臺(tái)跑任務(wù)得出]，中獎(jiǎng)用戶會(huì)短信和站內(nèi)通知，中獎(jiǎng)用戶前臺(tái)需填寫?yīng)勂方邮盏刂贰?/p>

開發(fā)選型：按照最終給的設(shè)計(jì)稿，前臺(tái)活動(dòng)頁面大體分為活動(dòng)列表頁，我的活動(dòng)，活動(dòng)詳情頁，我的抽獎(jiǎng)碼，中獎(jiǎng)名單，地址收集~其中活動(dòng)列表和我的活動(dòng)樣式一致，底部tab切換~活動(dòng)詳情頁的業(yè)務(wù)交互最多，需要區(qū)分app和h5來顯示不同活動(dòng)狀態(tài)下的不同交互操作。時(shí)間比較緊急，和同事商量后用了html+vue.js的方式去做，所有頁面在一個(gè)html上開發(fā)，通過路由進(jìn)行頁面跳轉(zhuǎn)。之前已經(jīng)有過一些開發(fā)案例，但交互相對簡單，頁面之間也沒有跨業(yè)務(wù)，雖然不知道會(huì)不會(huì)有坑，就先試一試

設(shè)計(jì)原型圖，簡單打碼下

開發(fā)步驟：

step1 確定用vue后，先按照所需要的頁面寫出初步雛形，需要提前下載vue.min.js和vue-router.min.js進(jìn)行引入，寫好對應(yīng)的component和路由。此外需要添加公司平時(shí)做專題時(shí)需要用到的基礎(chǔ)方法，和app交互的jsbridge等~

html結(jié)構(gòu)和js引用

vue各個(gè)模塊編寫

頁面相關(guān)的路由

調(diào)試代碼

這段代碼添加后會(huì)出現(xiàn)調(diào)試按鈕，和微信小程序的debug模式類似，方便手機(jī)端調(diào)試

【emmmm，不知道怎么加這種背景的文本代碼只能插圖了~】

step2 完善每個(gè)模塊，并寫上交互邏輯，其中活動(dòng)列表和我的活動(dòng)用同一個(gè)組件[樣式和結(jié)構(gòu)可復(fù)用]~活動(dòng)詳情頁是先根據(jù)一種交互寫效果，再添加業(yè)務(wù)判斷~地址頁面用的省市區(qū)聯(lián)動(dòng)直接下的jquery-ui的city-picker按照我們的主色調(diào)修改了下顏色~[放部分模塊代碼如下↓]

我的抽獎(jiǎng)碼

這個(gè)截圖是簡單又完整的vue組件交互，頁面模板的編寫，created里獲取基礎(chǔ)數(shù)據(jù)，賦值data里的具體參數(shù)，完成渲染

詳情頁的模板結(jié)構(gòu)

詳情頁涉及的交互方法

大概這個(gè)頁面的整個(gè)component的行數(shù)占了整個(gè)html頁面的一半吧，┑(￣Д ￣)┍~判斷炒雞多~還涉及倒計(jì)時(shí)的效果渲染，臨界判斷~口令拷貝[用clipboard.js插件，復(fù)制后記得銷毀對象~否則第二次操作會(huì)調(diào)用兩次復(fù)制！]

step3 完善頁面的微信分享和app分享邏輯，app口令復(fù)制打開等其他相關(guān)交互，冗余的代碼優(yōu)化~項(xiàng)目一期over~

微信分享，調(diào)用之前切記引入weixin的js和apiKey參數(shù)的獲取

總結(jié)：很好的一次開發(fā)體驗(yàn)，按照以前的經(jīng)驗(yàn)，這種涉及多頁面、交互不單一的活動(dòng)專題都是當(dāng)做一個(gè)小項(xiàng)目去做，用老的技術(shù)[前后端不分離]開發(fā)~當(dāng)然這也有一些弊端，畢竟涉及的頁面比較多，所有東西都在一個(gè)html里，進(jìn)行版本迭代的時(shí)候就會(huì)發(fā)現(xiàn)頁面太重了~

有什么問題和建議可以留言和我交流~

完...