|
章魚活動(dòng)平臺(tái),浙江本地活動(dòng)的優(yōu)選平臺(tái)。 章魚平臺(tái)包含的功能很多,包括活動(dòng)的創(chuàng)建與發(fā)布、優(yōu)質(zhì)的活動(dòng)的篩選、活動(dòng)的報(bào)名與審核、自定義門票、線下掃碼簽到等一系列功能。 本人主要負(fù)責(zé)章魚活動(dòng)pc端用戶主頁(yè)部分、小程序的開發(fā)及后期的h5版的迭代與升級(jí)。 這里主要是介紹章魚小程序開發(fā)的總結(jié)與一些心得,希望能與大家分享(很想把源碼推上來的,由于是公司項(xiàng)目,有保密協(xié)議沒法直接推上來,對(duì)源碼有興趣或者有需要可留言私密我)。
項(xiàng)目基礎(chǔ)框架選型 wxpage
wxpage是在2016年年底去上海參加微信小程序的公開課的時(shí)候了解到的,當(dāng)時(shí)就對(duì)作者封裝的onNavigate還是有onPreload特別感興趣,本人畢竟只是前端菜鳥,所以作者的那些開發(fā)理念和做法確實(shí)是挺顛覆我的,值得學(xué)習(xí)和借鑒的地方有很多,所以這里墻裂推薦大家使用。 用作者的說法是,用這種方式可以做到'零秒打開頁(yè)面',無(wú)空白等待的情況,這里大致分析一下: 小程序不同于h5的重要一點(diǎn)是,小程序的js是運(yùn)行在JSCore(安卓x5內(nèi)核)中的,所以這也是小程序可以原生媲美的原因之一,也是小程序之所以能稱為"應(yīng)用"的原因之一。這樣就導(dǎo)致用戶打開應(yīng)用的時(shí)候,所有的頁(yè)面的其實(shí)是算啟動(dòng)了,這個(gè)時(shí)候頁(yè)面之前是可以進(jìn)行通信的。(不知道這么解釋正不正確啊,畢竟還是菜鳥,希望有大牛幫忙補(bǔ)充) 所以可以做的就是提前加載,上一個(gè)頁(yè)面加載下一個(gè)頁(yè)面的數(shù)據(jù),然后保存起來,下一個(gè)頁(yè)面先去取,能取到就無(wú)須再去請(qǐng)求,若沒取到(網(wǎng)絡(luò)原因或其他原因?qū)е聸]存儲(chǔ)進(jìn)來),則請(qǐng)求數(shù)據(jù)即可。 拿我開發(fā)的這個(gè)小程序來說,列表頁(yè)點(diǎn)擊進(jìn)入詳情是一個(gè)常見的情況: 1,用戶點(diǎn)擊的時(shí)候去請(qǐng)求數(shù)據(jù)(這個(gè)時(shí)候還沒跳轉(zhuǎn)到詳情),這個(gè)時(shí)候會(huì)觸發(fā)目標(biāo)頁(yè)面的onNavigate(擴(kuò)展的生命周期),此時(shí)對(duì)應(yīng)的葉頁(yè)面并未被加載,這個(gè)時(shí)候去請(qǐng)求數(shù)據(jù)然后通過$put,存儲(chǔ)起來 2,頁(yè)面onLoad的時(shí)候先去$take數(shù)據(jù),若沒取到則再去請(qǐng)求數(shù)據(jù)
當(dāng)然,wxpage不僅僅只有這些,它還有對(duì)頁(yè)面、組件的擴(kuò)展,還有頁(yè)面生命周期的擴(kuò)展、自定義的函數(shù)屬性等等,大家可以參考wxpage的git主頁(yè),有興趣也可以去讀下源碼。 項(xiàng)目的開發(fā)工具可以先吐槽下微信官方提供的小程序開發(fā)者工具,當(dāng)然現(xiàn)在大家看到的開發(fā)者工具算好很多,但是還是有很多有缺陷的地方,可是我是在小程序內(nèi)測(cè)階段的時(shí)候就開始玩小程序了,那更不用說內(nèi)測(cè)階段時(shí)候的開發(fā)者工具了。當(dāng)然,吐槽歸吐槽,作為開發(fā)者要有一個(gè)包容的心,畢竟他們?cè)诓粩嗟耐晟崎_發(fā)者工具,總是會(huì)越來越好。 這里,給大家介紹一款方便開發(fā)小程序的工具,不是說這個(gè)工具有多好,只能說能方便大家的開發(fā)。 這個(gè)是白鷺時(shí)代(egret) 下面的一款產(chǎn)品(wing),去網(wǎng)站看你會(huì)發(fā)現(xiàn)這個(gè)主要是游戲編輯器,但是也支持小程序的開發(fā)。不得不說白鷺時(shí)代,很了不起,有一系列優(yōu)秀的產(chǎn)品,有一套游戲開發(fā)的解決方案,主要是國(guó)產(chǎn)的,對(duì)!國(guó)產(chǎn)的!雖然并不是專業(yè)的游戲開發(fā)者,但是對(duì)他們的產(chǎn)品有些些了解,也參加過他們組織的小程序分享會(huì),覺得還是很膩害的一家公司。 為何選擇使用wing: 1,可自定義快捷鍵,這是件很酷的事情,想想就很酷;
3,可以像很多編輯器那樣split
以上三點(diǎn)就可以讓你像平時(shí)開發(fā)h5一樣開發(fā)小程序,大家可以先試著用下開發(fā)者工具,大概就能了解我說的那些痛了。 項(xiàng)目的管理
comps:顧名思義,components組件。我會(huì)把項(xiàng)目中通用的部分模塊化,組件化,如通用底部、loading、章魚形象、搜索框、門票、列表等。 libs:用到的一些庫(kù)
pages:項(xiàng)目所涉及到的頁(yè)面 resource:用戶放設(shè)計(jì)稿及項(xiàng)目相關(guān)文檔,便于項(xiàng)目開發(fā)。 service:個(gè)人的習(xí)慣,把所有的接口放在一個(gè)api.js文件進(jìn)行管理,這里還把自定義的公用函數(shù)放在里面,然后還會(huì)有一個(gè)文件,里面放的是項(xiàng)目的所有接口請(qǐng)求,所有的成功通過回調(diào)的方式暴露出來。
source:存放靜態(tài)資源 關(guān)于tab切換tab切換:很普通的需求,點(diǎn)擊tab切換,下面的列表數(shù)據(jù)切換成對(duì)應(yīng)的數(shù)據(jù),如下圖
可掃下面碼體驗(yàn):
可能大部分能想到的就是和這位前端想到的處理方式一樣吧,切換就切換,無(wú)非是換個(gè)標(biāo)簽,切換一個(gè)tab,page從就1重新開始??墒侨绻脩舴磸?fù)的來回切換呢?之前請(qǐng)求的數(shù)據(jù)再請(qǐng)求一遍?第一個(gè)tab已經(jīng)請(qǐng)求了第三個(gè)page了,然后切換到第二個(gè),然后再切換回來呢,滾動(dòng)條的位置這么辦? 我的做法是這樣的: 每一個(gè)標(biāo)簽對(duì)應(yīng)一個(gè)對(duì)象,對(duì)象包含的數(shù)據(jù)有page、scrollTop、ifMore、active等屬于當(dāng)前標(biāo)簽的字段 *active:標(biāo)志當(dāng)前標(biāo)簽是否被選中,標(biāo)志位(用于區(qū)分標(biāo)簽選中前后樣式) *ifMore:列表請(qǐng)求回?cái)?shù)據(jù)時(shí),若長(zhǎng)度小于默認(rèn)的pageNum,則可判斷無(wú)很多數(shù)據(jù),標(biāo)志位,用于顯示'無(wú)更多數(shù)據(jù)',及減少無(wú)必要的請(qǐng)求 *scrollTop:添加一個(gè)scrollListen事件,記錄各自移動(dòng)的位置,切換時(shí)直接定位到上次瀏覽的位置,提示用戶體驗(yàn) *page:存該標(biāo)簽當(dāng)前所處的page,避免重置成1,重復(fù)請(qǐng)求 對(duì)應(yīng)的效果,大家可以進(jìn)入小程序體驗(yàn)下,對(duì)應(yīng)著h5,可以看出明顯的差別。
項(xiàng)目總結(jié)此次小程序的開發(fā),獨(dú)立完成,且審核一次通過,算是比較成功的吧。后來想了想原因,應(yīng)該是項(xiàng)目初期對(duì)于框架的選擇和項(xiàng)目結(jié)構(gòu)的搭建及細(xì)節(jié)的把握都做了比較足的工作,這讓我想起以前寫作文的時(shí)候,老師總讓我們先列提綱,我覺得拿到我們項(xiàng)目的開發(fā)中也是有道理的。先收集各種相關(guān)資料,選定框架、理清自己的項(xiàng)目結(jié)構(gòu)、項(xiàng)目中可能的難點(diǎn)、可優(yōu)化的地方等等,總之不是上來就開始寫代碼。此次開發(fā),對(duì)我成長(zhǎng)有很大的幫助。 |