章魚活動平臺，浙江本地活動的優(yōu)選平臺。

章魚平臺包含的功能很多，包括活動的創(chuàng)建與發(fā)布、優(yōu)質(zhì)的活動的篩選、活動的報名與審核、自定義門票、線下掃碼簽到等一系列功能。

本人主要負(fù)責(zé)章魚活動pc端用戶主頁部分、小程序的開發(fā)及后期的h5版的迭代與升級。

這里主要是介紹章魚小程序開發(fā)的總結(jié)與一些心得，希望能與大家分享（很想把源碼推上來的，由于是公司項目，有保密協(xié)議沒法直接推上來，對源碼有興趣或者有需要可留言私密我）。

項目基礎(chǔ)框架選型 wxpage

WXPage 是一個極其輕量的微信小程序開發(fā)框架，其中的API蘊(yùn)含了“極致頁面打開速度的思想”，為可維護(hù)性與開發(fā)效率而設(shè)計的功能，框架來自“騰訊視頻”小程序的項目沉淀。

wxpage是在2016年年底去上海參加微信小程序的公開課的時候了解到的，當(dāng)時就對作者封裝的onNavigate還是有onPreload特別感興趣，本人畢竟只是前端菜鳥，所以作者的那些開發(fā)理念和做法確實(shí)是挺顛覆我的，值得學(xué)習(xí)和借鑒的地方有很多，所以這里墻裂推薦大家使用。

用作者的說法是，用這種方式可以做到'零秒打開頁面'，無空白等待的情況，這里大致分析一下：

小程序不同于h5的重要一點(diǎn)是，小程序的js是運(yùn)行在JSCore(安卓x5內(nèi)核)中的，所以這也是小程序可以原生媲美的原因之一，也是小程序之所以能稱為"應(yīng)用"的原因之一。這樣就導(dǎo)致用戶打開應(yīng)用的時候，所有的頁面的其實(shí)是算啟動了，這個時候頁面之前是可以進(jìn)行通信的。（不知道這么解釋正不正確啊，畢竟還是菜鳥，希望有大牛幫忙補(bǔ)充）

所以可以做的就是提前加載，上一個頁面加載下一個頁面的數(shù)據(jù)，然后保存起來，下一個頁面先去取，能取到就無須再去請求，若沒取到（網(wǎng)絡(luò)原因或其他原因?qū)е聸]存儲進(jìn)來），則請求數(shù)據(jù)即可。

拿我開發(fā)的這個小程序來說，列表頁點(diǎn)擊進(jìn)入詳情是一個常見的情況：

1，用戶點(diǎn)擊的時候去請求數(shù)據(jù)（這個時候還沒跳轉(zhuǎn)到詳情），這個時候會觸發(fā)目標(biāo)頁面的onNavigate（擴(kuò)展的生命周期），此時對應(yīng)的葉頁面并未被加載，這個時候去請求數(shù)據(jù)然后通過$put，存儲起來

2，頁面onLoad的時候先去$take數(shù)據(jù)，若沒取到則再去請求數(shù)據(jù)

當(dāng)然，wxpage不僅僅只有這些，它還有對頁面、組件的擴(kuò)展，還有頁面生命周期的擴(kuò)展、自定義的函數(shù)屬性等等，大家可以參考wxpage的git主頁，有興趣也可以去讀下源碼。

項目的開發(fā)工具

可以先吐槽下微信官方提供的小程序開發(fā)者工具，當(dāng)然現(xiàn)在大家看到的開發(fā)者工具算好很多，但是還是有很多有缺陷的地方，可是我是在小程序內(nèi)測階段的時候就開始玩小程序了，那更不用說內(nèi)測階段時候的開發(fā)者工具了。當(dāng)然，吐槽歸吐槽，作為開發(fā)者要有一個包容的心，畢竟他們在不斷的完善開發(fā)者工具，總是會越來越好。

這里，給大家介紹一款方便開發(fā)小程序的工具，不是說這個工具有多好，只能說能方便大家的開發(fā)。

這個是白鷺時代（egret） 下面的一款產(chǎn)品（wing），去網(wǎng)站看你會發(fā)現(xiàn)這個主要是游戲編輯器，但是也支持小程序的開發(fā)。不得不說白鷺時代，很了不起，有一系列優(yōu)秀的產(chǎn)品，有一套游戲開發(fā)的解決方案，主要是國產(chǎn)的，對！國產(chǎn)的！雖然并不是專業(yè)的游戲開發(fā)者，但是對他們的產(chǎn)品有些些了解，也參加過他們組織的小程序分享會，覺得還是很膩害的一家公司。

為何選擇使用wing:

1，可自定義快捷鍵，這是件很酷的事情，想想就很酷；

2，配合官方的開發(fā)者工具一起使用，最好是分屏，wing負(fù)責(zé)代碼的編輯，官方開發(fā)者工具負(fù)責(zé)看效果和調(diào)試，這樣就無須在開發(fā)者工具中來回切換。

3，可以像很多編輯器那樣split

以上三點(diǎn)就可以讓你像平時開發(fā)h5一樣開發(fā)小程序，大家可以先試著用下開發(fā)者工具，大概就能了解我說的那些痛了。

項目的管理

comps:顧名思義，components組件。我會把項目中通用的部分模塊化，組件化，如通用底部、loading、章魚形象、搜索框、門票、列表等。

libs:用到的一些庫

• wxParse:用于富文本解析。小程序不支持html里面的標(biāo)簽，所以這里需要對富文本的內(nèi)容進(jìn)行解析，生成能運(yùn)行在小程序里的代碼。感謝這樣的人民工程師，不然富文本解析這個讓我一個菜鳥來解決的話，估計得哭暈在廁所吧。(記得沒錯的話，這個的作者是白鷺時代的開發(fā))

• promise:小程序支持es6的大部分語法，起初是支持promise的，忘了是因?yàn)樯逗髞聿恢С郑赃@里得手動引入promise。

• wxqrcode:因項目需要把一串碼生成一個二維碼用戶線下掃碼。

• wxpage:前面說的項目基礎(chǔ)框架

pages:項目所涉及到的頁面

resource:用戶放設(shè)計稿及項目相關(guān)文檔，便于項目開發(fā)。

service:個人的習(xí)慣，把所有的接口放在一個api.js文件進(jìn)行管理，這里還把自定義的公用函數(shù)放在里面，然后還會有一個文件，里面放的是項目的所有接口請求，所有的成功通過回調(diào)的方式暴露出來。

source:存放靜態(tài)資源

關(guān)于tab切換

tab切換：很普通的需求，點(diǎn)擊tab切換，下面的列表數(shù)據(jù)切換成對應(yīng)的數(shù)據(jù)，如下圖

可掃下面碼體驗(yàn)：

可能大部分能想到的就是和這位前端想到的處理方式一樣吧，切換就切換，無非是換個標(biāo)簽，切換一個tab，page從就1重新開始。可是如果用戶反復(fù)的來回切換呢？之前請求的數(shù)據(jù)再請求一遍？第一個tab已經(jīng)請求了第三個page了，然后切換到第二個，然后再切換回來呢，滾動條的位置這么辦？

我的做法是這樣的：

每一個標(biāo)簽對應(yīng)一個對象，對象包含的數(shù)據(jù)有page、scrollTop、ifMore、active等屬于當(dāng)前標(biāo)簽的字段

*active:標(biāo)志當(dāng)前標(biāo)簽是否被選中，標(biāo)志位（用于區(qū)分標(biāo)簽選中前后樣式）

*ifMore:列表請求回數(shù)據(jù)時，若長度小于默認(rèn)的pageNum，則可判斷無很多數(shù)據(jù)，標(biāo)志位，用于顯示'無更多數(shù)據(jù)'，及減少無必要的請求

*scrollTop:添加一個scrollListen事件，記錄各自移動的位置，切換時直接定位到上次瀏覽的位置，提示用戶體驗(yàn)

*page:存該標(biāo)簽當(dāng)前所處的page，避免重置成1，重復(fù)請求

對應(yīng)的效果，大家可以進(jìn)入小程序體驗(yàn)下，對應(yīng)著h5，可以看出明顯的差別。

項目總結(jié)

此次小程序的開發(fā)，獨(dú)立完成，且審核一次通過，算是比較成功的吧。后來想了想原因，應(yīng)該是項目初期對于框架的選擇和項目結(jié)構(gòu)的搭建及細(xì)節(jié)的把握都做了比較足的工作，這讓我想起以前寫作文的時候，老師總讓我們先列提綱，我覺得拿到我們項目的開發(fā)中也是有道理的。先收集各種相關(guān)資料，選定框架、理清自己的項目結(jié)構(gòu)、項目中可能的難點(diǎn)、可優(yōu)化的地方等等，總之不是上來就開始寫代碼。此次開發(fā)，對我成長有很大的幫助。