《王者榮耀周邊商(shāng)城》經驗總結

發表時間：2021-3-31

發布人：葵宇科技

浏覽次數：56

大家好，以下(xià)是《王者榮耀周邊商(shāng)城》小程序的一些經驗總結，也許能幫到你(nǐ)，也許也幫不到，大家看着辦哈，因為時間有點早，所以文(wén)中(zhōng)有些實現不是最新的，最終請以官方文(wén)檔說明為準，廢話不多說，直接上高清無碼大圖。

以上截圖是之前的版本，中(zhōng)間做了改版，大家可(kě)以直接掃碼識别體驗：

項目結構

我們都知道，小程序有自己的一套實現規範，下(xià)面我們看下(xià)小程序的項目結構，如(rú)下(xià)圖：

一個(gè)入口文(wén)件：app.js
一個(gè)全局樣式：app.wxss
一個(gè)全局配置：app.json

頁面：pages下(xià)，每個(gè)頁面再按文(wén)件夾劃分，每個(gè)頁面4個(gè)文(wén)件

index.js：實現頁面整個(gè)生命周期的控制邏輯，置頂顯示時的界面交互
index.json：頁面配置，一個(gè)JSON對象，詳細可(kě)配置字段見這裡
index.wxml：UI結構渲染，可(kě)以理解為就是html，主要支持定制标簽，更多标簽見這裡
index.wxss：UI樣式渲染，可(kě)以理解為就是css，大部分css寫法都支持。

當然在4個(gè)文(wén)件基礎之下(xià)，還有一些通(tōng)用的功能組件支撐它們的運行。每一個(gè)頁面都是這麼幾個(gè)文(wén)件組成，非常規範統一，并且每一部分也都限定了内部實現框架和(hé)規範，所以在多人協作的時候，産出相對也就比較規範。

注：pages裡面還可(kě)以再根據模塊劃分子(zǐ)目錄，孫子(zǐ)目錄，隻需要在app.json裡注冊時填寫路(lù)徑就行

以上是必須的文(wén)件和(hé)目錄，而實際中(zhōng)我們會增加别的目錄，如(rú)lib，comm和(hé)utils等等目錄。

框架設計

Web開發做得多了，你(nǐ)就會發現，大部分工作就是取數據，渲染UI，處理交互這三件事兒，小程序也不例外，所以按照這個(gè)框架邏輯，我們基于小程序本身的框架規範又擴展和(hé)細化了下(xià)，設計了下(xià)面的這套可(kě)直接應用于項目的開發框架。

下(xià)面我們繼續詳細理一下(xià)設計時的一些思路(lù)、出發點和(hé)具體的實現方式，窺其面更要知其理。

注：這裡我沒有直接使用第三方的框架，因為我個(gè)人覺得要學習一套技術(shù)，還是需要從原生的模式開始着手，雖然前期會比較痛苦一點，但是這些付出都是值得的，因為你(nǐ)一旦搞明白了本來的邏輯架構和(hé)原理，你(nǐ)會發現什麼框架都是信手拈來，而且你(nǐ)也更能理解框架這樣設計的優點和(hé)缺點。

工具類庫

Ajax

實現了promise的封裝，支持GET POST PUT和(hé)DELETE，這裡設計的時候就确定為僅滿足單項目通(tōng)用即可(kě)，所以實現的時候融入了部分業(yè)務層面的邏輯：

接口首次格式化，兼容标準的json和(hé)var形式接口（内部有大量var形式的接口）
直接判斷返回值在邏輯上是成功還是失敗
針對返回未登錄的情況，自動(dòng)跳轉登錄流程

所以省去了業(yè)務調用側的反複判斷處理通(tōng)用邏輯，使用更簡潔。

cache

其實，小程序自帶了緩存接口，有同步wx.setStorageSync，異步wx.setStorage的方法，但是實際在使用緩存的場景裡，我們一般都是需要設置緩存有效時間的，本cache工具就是對小程序緩存接口的封裝，實現了對緩存有效期的支持。

Model實現

model層就不用多說了，主要是把數據處理部分獨立出來，便于統一服務和(hé)維護，這裡重點強調下(xià)model内部的實現細節，這裡有一個(gè)實現技巧可(kě)以用在其它别的地方。下(xià)面直接上代碼部分。

上面的代碼我們可(kě)以看到幾個(gè)關(guān)鍵點

1. 把參數處理和(hé)返回結果處理拆出來放到單獨的處理方法裡，方法名稱保持統一：formatParams，formatResult

2. 同時最外層定義好默認的formatParams，formatResult，如(rú)果不做特殊處理，直接使用默認即可(kě)（建議不處理也調用下(xià)默認方法，規範流程）

3. 還有一點，model裡方法命令有統一規範都是已get，add，update，del開頭

這個(gè)思路(lù)其實可(kě)以運用到任何場景，特别是在沒有任何限定框架的場景，我們隻需要按照這個(gè)模式去實現，代碼一樣很清晰漂亮(liàng)，比如(rú)我後面實現LOL内置競技場道具商(shāng)店的時候，就是為了減少(shǎo)不必要的框架冗餘代碼，就直接徒手寫的，同樣是拆分為model和(hé)view層，然後model按上面的規範實現，代碼同樣很清晰，強烈建議大家實踐下(xià)，簡單實用。

組件模式

在實現王者周邊小程序的時候，官方沒有開放自定義組件規範，所以我們還不能按照内置組件的實現方式來實現我們業(yè)務側自定義的組件，但是項目裡又有公共組件的需求存在，那我們不管怎樣還是需要把組件獨立出來，不然重複代碼很蛋疼，維護成本也比較高，實際我們這裡的組件實現模式還是比較簡單粗暴的，我們照樣把組件拆分為JS，WXML，WXSS三部分（或者隻有一部分也行），然後通(tōng)過不同的import方式引入到需要使用組件的page裡就行。

注：雖然這裡沒有使用官方的自定義組件規範，但是經過自己實現這個(gè)，也能大緻了解到官方的自定義組件的實現方式和(hé)原理。

JS引入：import 或者 require（建議小程序這裡引入都用import，跟wxml和(hé)wxss比較統一，我對代碼有點小潔癖）
WXML引入：和(hé)
WXSS引入：@import

組件很多時候也需要處理頁面交互，相應事件，而小程序的事件綁定機制決定，事件處理方法必須是挂載到當前page對象下(xià)（實際是Page()方法定義的對象，内部引用是this），而組件的實現是單獨的文(wén)件，不在Page()方法裡定義，那怎麼辦呢(ne)？我這邊的實現方式是組件初始化的地方，傳遞當前的page對象（this）給到組件，然後組件内部的接口方法全部一次性extend到page上，同樣數據也是這個(gè)道理，WXML裡面的數據方法隻能是data對象，組件裡的數據也需要挂載到這個(gè)對象上，這裡強烈建議把組件内部的數據定義為一個(gè)單獨的對象挂載到data上，而不要直接挂載，如(rú)我們這裡的購物車(chē)組件，實現就是下(xià)面這樣：

上面setData的時候，定義了shoppingCart對象，在它裡面再定義具體的購物車(chē)組件需要的數據變量，而下(xià)面Object.assign一句就是把組件的方法挂載到當前使用組件的page上面去。

另外還要注意，在WXML裡插入組件模塊的時候，template标簽的data屬性裡的名稱請使用上面setData的名稱，比如(rú)購物車(chē)這裡就是shoppingCart。

請大家現在實現的時候，使用官方标準的自定義組件規範

數據共享

小程序開發也涉及到多頁面間數據共享，這裡針對不同的場景有幾種實現方式：

1、基于頁面的數據傳遞：直接在navigate的url後面增加參數即可(kě)，然後在接收的頁面onLoad方法裡，通(tōng)過參數（對象）接收即可(kě)，如(rú)下(xià)：

2、基于内存的數據共享：getApp方法，獲取全局的App實例對象，可(kě)以設置存取這個(gè)實例對象屬性來實現數據共享，如(rú)下(xià)：

上面這種方式，适合與啟動(dòng)後的短(duǎn)期數據共享，關(guān)閉小程序數據會丢失。

3、基于本地緩存的數據共享：可(kě)以使用上面的cache組件，也可(kě)以使用原生的緩存接口實現，這種方式是可(kě)以在小程序關(guān)閉後還存在。

4、基于後台服務的接口緩存：這個(gè)不多說，就是保持數據到服務器(qì)，多頁面通(tōng)過接口調用。

開發規範

詳細的JS實現規範這就不講了，這裡大緻列一下(xià)我們在開發的時候，我們這邊簡單定義的一些規範，供大家參考。

JS模塊引入請使用import關(guān)鍵字，而非require，WXML引入模闆用标簽，WXSS使用@import語法，三者統一
使用 let 代替var進行變量定義，使用const定義常量，如(rú)：let goods = 1，const SEX=’男(nán)’
所有方法和(hé)變量名稱都使用小寫camel模式，一般是動(dòng)詞+名詞形式，盡量不要超過5個(gè)單詞，如(rú)：getList，setBackImage
所有用到的常量的地方都使用全大寫，下(xià)劃線分隔的形式，如(rú)：EGG_CHE
使用this轉換的地方，統一使用that，如(rú)：let that = this; 盡量使用箭頭函數，可(kě)保留this指向
所有自定義方法（onLoad，onShow等系統方法除外）必須使用規範注釋語法進行注釋
在page和(hé)model裡定義方法的時候，直接使用getList(){} 即可(kě)，中(zhōng)間可(kě)以不用加function關(guān)鍵字
小程序聲明周期函數裡（onLoad，onReady，onShow，onHide，onUnload等）不要直接寫複雜業(yè)務邏輯，複雜業(yè)務邏輯獨立成方法，這裡隻負責方法調用。
所有數據處理必須封裝到model裡面，包括url地址，參數格式化，返回結果格式化都放到model裡面，在page裡使用的時候，基本不用做過多數據處理，一般都直接setData皆可(kě),model規範請參考前面的說明。
如(rú)果1個(gè)功能在超過一個(gè)地方出現，那請實現為公用組件，組件實現請參考前面的說明。
在WXML模闆裡，如(rú)果同時有2個(gè)循環中(zhōng)都使用到了同樣的代碼片段，請使用template的方式定義，然後直接使用即可(kě)，不能重複寫.
所有地方都需要有對接口返回空數據的處理，界面上要有相應的提示和(hé)引導。
其它的可(kě)以定義規範的loading，成功失敗提示等，這裡不多說了.

經驗分享

大家開發前，可(kě)以大緻浏覽下(xià)小程序的官方文(wén)檔，相對比較完善，遇到問(wèn)題可(kě)以先查文(wén)檔，然後再去小程序社區裡搜索相關(guān)帖子(zǐ)，一般問(wèn)題都能解決，下(xià)面是我遇到的一些問(wèn)題和(hé)相應的解決方案，也許你(nǐ)也會碰到，僅供參考。

1、setData相關(guān)經驗

設置多級對象值：this.setData({‘a.b.c.d’:value});

設置可(kě)變索引的數組值：

varkey="array["+index+"].text,

data =https://www.wxapp-union.com/{key:'changed data’};

this.setData(data);

2、swiper組件 current 問(wèn)題

swiper組件切換數據源以後，current屬性也需要手動(dòng)重置，不會默認恢複到第一幀，就可(kě)能出現當前current大于新數據源的長度，顯示會出問(wèn)題

3、picker-view 初始值設置無效

picker-view初始化的時候，我們都會設置數據源和(hé)初始索引值，結果發現放到一次setData裡既然不生效，分成2次setData就可(kě)以了，應該是設置數據源的時間點在初始值之後了，因為setData接收的是一個(gè)hash對象，而hash對象是沒有先後順序的，所以就可(kě)能存在初始值在數據源之前設置了，當然初始值不可(kě)能生效。

4、android 兼容性問(wèn)題

從原理上我們知道，小程序本身還是基于不同的JS容器(qì)的執行的，所以由于IOS（jscore）和(hé)android（v8）上容器(qì)不一緻，還是需要小程序開發者自己處理兩個(gè)平台的兼容性，不過新版的微信升級後，目前ios和(hé)android的不一緻的兼容性問(wèn)題已經很少(shǎo)了，不要這裡需要理解的是小程序雖然有規範，但是并沒有幫我們屏蔽底層的兼容問(wèn)題，我們自己需要注意。

5、cookie 的問(wèn)題

我們在開發web頁面的時候，肯定會使用到cookie，傳遞登錄信息等，但是小程序本身不支持cookie，所以需要應用到cookie的地方，可(kě)以轉換為參數，放到請求後面，我們上面的小程序登錄态就是放到了請求參數裡。

但是在調用wx.request的時候，是可(kě)以設置cookie header頭的，所以如(rú)果後台接口驗證的需要cookie支持，可(kě)以直接在這裡設置即可(kě)，但是需要注意：android的版本的小程序會把cookie鍵名自動(dòng)改為小寫，如(rú)果後台是通(tōng)過大寫讀取的話，可(kě)能就取不到值了，暫時還不确認新版是否已修複這個(gè)問(wèn)題。