章魚活動平臺，浙江本地活動的優選平臺。

章魚平臺包含的功能很多，包括活動的創建與發布、優質的活動的篩選、活動的報名與審核、自定義門票、線下掃碼簽到等一系列功能。

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

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

項目基礎框架選型 wxpage

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

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

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

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

所以可以做的就是提前加載，上一個頁面加載下一個頁面的數據，然后保存起來，下一個頁面先去取，能取到就無須再去請求，若沒取到（網絡原因或其他原因導致沒存儲進來），則請求數據即可。

拿我開發的這個小程序來說，列表頁點擊進入詳情是一個常見的情況：

1，用戶點擊的時候去請求數據（這個時候還沒跳轉到詳情），這個時候會觸發目標頁面的onNavigate（擴展的生命周期），此時對應的葉頁面并未被加載，這個時候去請求數據然后通過$put，存儲起來

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

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

項目的開發工具

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

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

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

為何選擇使用wing:

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

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

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

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

項目的管理

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

libs:用到的一些庫

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

• promise:小程序支持es6的大部分語法，起初是支持promise的，忘了是因為啥后來不支持，所以這里得手動引入promise。

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

• wxpage:前面說的項目基礎框架

pages:項目所涉及到的頁面

resource:用戶放設計稿及項目相關文檔，便于項目開發。

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

source:存放靜態資源

關于tab切換

tab切換：很普通的需求，點擊tab切換，下面的列表數據切換成對應的數據，如下圖

可掃下面碼體驗：

可能大部分能想到的就是和這位前端想到的處理方式一樣吧，切換就切換，無非是換個標簽，切換一個tab，page從就1重新開始?？墒侨绻脩舴磸偷膩砘厍袚Q呢？之前請求的數據再請求一遍？第一個tab已經請求了第三個page了，然后切換到第二個，然后再切換回來呢，滾動條的位置這么辦？

我的做法是這樣的：

每一個標簽對應一個對象，對象包含的數據有page、scrollTop、ifMore、active等屬于當前標簽的字段

*active:標志當前標簽是否被選中，標志位（用于區分標簽選中前后樣式）

*ifMore:列表請求回數據時，若長度小于默認的pageNum，則可判斷無很多數據，標志位，用于顯示'無更多數據'，及減少無必要的請求

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

*page:存該標簽當前所處的page，避免重置成1，重復請求

對應的效果，大家可以進入小程序體驗下，對應著h5，可以看出明顯的差別。

項目總結

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