記錄一下去年年底做的一個小項目奕谭，用vue做的一個單頁面應(yīng)用，活動涉及頁面5個痴荐，應(yīng)該也不算小的單頁面應(yīng)用吧~
我們大部分人用vue做單頁面或多頁面項目都是直接用webpack和vue-cli腳手架一鍵創(chuàng)建血柳，快速方便~但快速開發(fā)多了，很多人也就不了解vue.js其實也是可以直接在html引入使用的~當(dāng)然兩種方式如何使用根據(jù)具體的項目來分析的生兆，對于一個不小且頁面較多的項目用自動化工具構(gòu)建的當(dāng)然更便于維護~對于很多小的活動專題大部分時候也不需要用vue開發(fā)难捌，技術(shù)選型還是要具體情況具體分析
項目名稱：高校抽獎
項目說明：顧名思義這是一個運營在高校的抽獎活動專題，其實是蹭錦鯉的熱度做的用戶拉新和引導(dǎo)app下載鸦难「酰活動推廣僅在微信和app里，用戶可參與活動獲取抽獎碼[h5只能看活動相關(guān)信息合蔽，具體操作均引導(dǎo)至app進行交互]击敌，同時用戶可分享和邀請好友，好友成功參與則分享者也可獲得一組抽獎碼辈末，活動會在規(guī)定時間進行開獎[中獎號碼由后臺跑任務(wù)得出]愚争，中獎用戶會短信和站內(nèi)通知，中獎用戶前臺需填寫?yīng)勂方邮盏刂贰?/p>
開發(fā)選型：按照最終給的設(shè)計稿挤聘，前臺活動頁面大體分為活動列表頁，我的活動捅彻，活動詳情頁组去，我的抽獎碼，中獎名單步淹，地址收集~其中活動列表和我的活動樣式一致从隆，底部tab切換~活動詳情頁的業(yè)務(wù)交互最多，需要區(qū)分app和h5來顯示不同活動狀態(tài)下的不同交互操作缭裆。時間比較緊急键闺，和同事商量后用了html+vue.js的方式去做，所有頁面在一個html上開發(fā)澈驼，通過路由進行頁面跳轉(zhuǎn)辛燥。之前已經(jīng)有過一些開發(fā)案例，但交互相對簡單缝其，頁面之間也沒有跨業(yè)務(wù)挎塌，雖然不知道會不會有坑，就先試一試
開發(fā)步驟：
step1 確定用vue后榴都，先按照所需要的頁面寫出初步雛形，需要提前下載vue.min.js和vue-router.min.js進行引入漠其，寫好對應(yīng)的component和路由嘴高。此外需要添加公司平時做專題時需要用到的基礎(chǔ)方法竿音，和app交互的jsbridge等~
這段代碼添加后會出現(xiàn)調(diào)試按鈕，和微信小程序的debug模式類似拴驮，方便手機端調(diào)試
【emmmm春瞬，不知道怎么加這種背景的文本代碼只能插圖了~】
step2 完善每個模塊，并寫上交互邏輯莹汤，其中活動列表和我的活動用同一個組件[樣式和結(jié)構(gòu)可復(fù)用]~活動詳情頁是先根據(jù)一種交互寫效果快鱼，再添加業(yè)務(wù)判斷~地址頁面用的省市區(qū)聯(lián)動直接下的jquery-ui的city-picker按照我們的主色調(diào)修改了下顏色~[放部分模塊代碼如下↓]
這個截圖是簡單又完整的vue組件交互，頁面模板的編寫纲岭，created里獲取基礎(chǔ)數(shù)據(jù)抹竹，賦值data里的具體參數(shù)，完成渲染
大概這個頁面的整個component的行數(shù)占了整個html頁面的一半吧止潮，┑(￣Д ￣)┍~判斷炒雞多~還涉及倒計時的效果渲染窃判，臨界判斷~口令拷貝[用clipboard.js插件，復(fù)制后記得銷毀對象~否則第二次操作會調(diào)用兩次復(fù)制喇闸！]
step3 完善頁面的微信分享和app分享邏輯袄琳，app口令復(fù)制打開等其他相關(guān)交互，冗余的代碼優(yōu)化~項目一期over~
總結(jié)：很好的一次開發(fā)體驗唆樊，按照以前的經(jīng)驗，這種涉及多頁面刻蟹、交互不單一的活動專題都是當(dāng)做一個小項目去做逗旁，用老的技術(shù)[前后端不分離]開發(fā)~當(dāng)然這也有一些弊端，畢竟涉及的頁面比較多舆瘪，所有東西都在一個html里片效，進行版本迭代的時候就會發(fā)現(xiàn)頁面太重了~
有什么問題和建議可以留言和我交流~
完...
