全棧之路-微信小程序-架構總覽

　　第一階段是用來學習小程序開發的，這個就至關於PC端的網站吧，只不過如今依靠微信強大的流量來將業務搬移到小程序中，對於企業來講，這是一種很好的發展方向，既減小了開發成本，又減小了推廣成本，小程序是很被人看好的，很值得去學習的，主要是寫風袖小程序的架構中的特色，梳理一下，而且記錄一下電商小程序中的一些特有的知識點，增長點專業的知識。

1、首頁

　　這個是打開小程序後，首先呈現出來的頁面，也是包含了幾乎全部的你想給用戶展現的，如何將這個首頁設計好，這也決定了第一印象吧，第一印象很重要，首頁每每是入口類的，這個地方每每是吸引人的眼球的，可是這裏面會有不少劃分的，咱們每每會將入口分爲不少種類，方便服務端進行數據庫表的設計，易於後期的維護，在電商中，數據庫表的設計是很是重要的，不少技巧的東西，這個技巧隨着課程的進行，慢慢的積累吧，來學習一下風袖中的首頁的排布特色：

一、Banner入口

Banner入口是很複雜的，由於它是多變的，能夠設計成不少種選擇，好比能夠設計成主題入口、活動入口、分類入口，甚至能夠設計成商品入口等等，因此Banner入口是單獨的一部分，與其餘入口區分出來的，我想的是在後臺維護的時候，這部份內容應該是單獨維護的

二、主題入口

主題入口，當用戶點擊進去以後就是跟主題相關的商品的列表了

三、分類六宮格

這個就簡單了，就是商品的分類信息的展現了，點擊進去以後是商品列表的展現

四、活動入口（優惠券入口）

這個在設計圖上實際上是優惠券入口的，可是其實優惠券也是活動的一種，這裏把優惠券歸於活動入口之中

優惠券活動詳解：（2019年10月30日10:14:40 臨時添加）

優惠券是分類別的，你像滿減類型的優惠券，折扣類型的，這也會設計一些優惠券的使用條件，像那種全場券還有就是那些品類的券，就是隻有在特定種類的商品上才能使用，因此，針對優惠券的這些特色，前端須要作的主要是根據這些，進行覈算的功能，一些設計，複雜的業務主要是後端進行處理的，最後，優惠券的使用和領取是兩個不一樣的概念，這個須要進行區分處理的

五、商品長滾動，瀑布流列表

這裏是瀑布流展現商品的列表，固然這個是存在分頁的，當用戶下拉商品列表的時候，能夠連續加載更多商品的，至於瀑布流展現的效果如何實現，這裏不作過多的說明

六、主題和Banner混合入口

這個是將主題入口和Banner入口混合在一塊兒展現的，在設計圖中實際上是在熱賣榜單那個專題中，上面是主題入口，下面部分是Banner入口（這裏是展現商品的Banner）

2019年10月18日15:43:31 未完待續...

2、項目結構

　　這個項目結構就是項目的整體的一個如何分層，這裏是寫的是前端小程序的項目結構，後續還會介紹spring boot項目的結構，等到學習到那裏在補充一下。

一、小程序項目分層

這裏有一個設計原則，在項目的開始，就是不要把複雜的業務邏輯放在pages文件夾中的js文件中，頁面中的js文件就是主要來作數據綁定的，咱們將複雜的業務邏輯單獨存放與一個抽象出來的model層，其實按照MVC分層模式，pages中的js文件至關於Controller層，就是隻是處理數據的分發以及頁面中數據的顯示，至於如何獲取到的數據並不關心，交給model去處理

增長內容：方法命名的規則

（1）獲取首頁主題的方法，這個方法的命名是根據位置來命名的，好比頂部的獲取theme的方法是：getHomePositionA() home->主頁 positionA->最上面第一個主題的位置

2019年10月22日14:37:40 未完待續...

二、請求過多的優化

前端頁面向服務器發送請求的優化主要存在三種問題（這裏以home頁面的數據加載來看）：

（1）每一個數據 都設計成一個http請求

（2）整個home頁面須要加載的數據 只設計成一個http請求

（3）有選擇性的將一部分請求合併成一個

針對這三個問題，能夠從三個維度來綜合考慮，來決定如何取捨：

（1）http請求數量

（2）http請求進行了多少次的數據庫查詢

（3）接口的靈活性和可維護性

三個問題從三個維度綜合比較的話，如圖：

 

重點的話，這裏着重考慮的應該是http請求了多少次數據庫的查詢這個維度，由於當用戶數量龐大的時候，減小一次數據庫的查詢，爲整個項目的性能提高是頗有幫助的，可是靈活性和可維護性也是不可或缺的一個點，綜合考慮之下，應該是有選擇性的合併http請求

補充：這裏還介紹了一個JavaScript中的函數式編程，由於一直作的是Java項目，對於這個函數式編程，沒有太多的瞭解，具體有什麼優勢和缺點，不是很清楚，可是在JDK8 提供了函數式編程，其實就是那種箭頭函數，感受用起來很方便，之後須要重視一下！

舉個小例子，函數式編程的優點之處：

 1 // 普通的從數組中選取特定的元素代碼
 2 let themeA = null;
 3 for (let theme of themes){
 4     if (theme.name == 't-1'){
 5         themeA = theme
 6     }
 7 }
 8 
 9 // 函數式編程的代碼
10 const themeA = themes.find(t => t.name === 't-1')

很顯然，函數式編程的代碼簡潔而且可讀性更好啊，可是有什麼缺點的話，以我如今的水平仍是不是很清楚，適當補補這個知識點！

 2019年11月1日10:51:01 補充，未完待續...

 

 

內容出處：七月老師《從Java後端到全棧》視頻課程

視頻課程連接：https://class.imooc.com/sale/javafullstack