章魚小程序項(xiàng)目開發(fā)總結(jié)
|
章魚活動(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)有很大的幫助。 |
