《王者榮耀周邊商城》經(jīng)驗(yàn)總結(jié)

發(fā)表時(shí)間：2021-3-31

發(fā)布人：葵宇科技

瀏覽次數(shù)：71

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

以上截圖是之前的版本，中間做了改版，大家可以直接掃碼識別體驗(yàn)：

項(xiàng)目結(jié)構(gòu)

我們都知道，小程序有自己的一套實(shí)現(xiàn)規(guī)范，下面我們看下小程序的項(xiàng)目結(jié)構(gòu)，如下圖：

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

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

index.js：實(shí)現(xiàn)頁面整個(gè)生命周期的控制邏輯，置頂顯示時(shí)的界面交互
index.json：頁面配置，一個(gè)JSON對象，詳細(xì)可配置字段見這里
index.wxml：UI結(jié)構(gòu)渲染，可以理解為就是html，主要支持定制標(biāo)簽，更多標(biāo)簽見這里
index.wxss：UI樣式渲染，可以理解為就是css，大部分css寫法都支持。

當(dāng)然在4個(gè)文件基礎(chǔ)之下，還有一些通用的功能組件支撐它們的運(yùn)行。每一個(gè)頁面都是這么幾個(gè)文件組成，非常規(guī)范統(tǒng)一，并且每一部分也都限定了內(nèi)部實(shí)現(xiàn)框架和規(guī)范，所以在多人協(xié)作的時(shí)候，產(chǎn)出相對也就比較規(guī)范。

注：pages里面還可以再根據(jù)模塊劃分子目錄，孫子目錄，只需要在app.json里注冊時(shí)填寫路徑就行

以上是必須的文件和目錄，而實(shí)際中我們會增加別的目錄，如lib，comm和utils等等目錄。

框架設(shè)計(jì)

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

下面我們繼續(xù)詳細(xì)理一下設(shè)計(jì)時(shí)的一些思路、出發(fā)點(diǎn)和具體的實(shí)現(xiàn)方式，窺其面更要知其理。

注：這里我沒有直接使用第三方的框架，因?yàn)槲覀€(gè)人覺得要學(xué)習(xí)一套技術(shù)，還是需要從原生的模式開始著手，雖然前期會比較痛苦一點(diǎn)，但是這些付出都是值得的，因?yàn)槟阋坏└忝靼琢吮緛淼倪壿嫾軜?gòu)和原理，你會發(fā)現(xiàn)什么框架都是信手拈來，而且你也更能理解框架這樣設(shè)計(jì)的優(yōu)點(diǎn)和缺點(diǎn)。

工具類庫

Ajax

實(shí)現(xiàn)了promise的封裝，支持GET POST PUT和DELETE，這里設(shè)計(jì)的時(shí)候就確定為僅滿足單項(xiàng)目通用即可，所以實(shí)現(xiàn)的時(shí)候融入了部分業(yè)務(wù)層面的邏輯：

接口首次格式化，兼容標(biāo)準(zhǔn)的json和var形式接口（內(nèi)部有大量var形式的接口）
直接判斷返回值在邏輯上是成功還是失敗
針對返回未登錄的情況，自動(dòng)跳轉(zhuǎn)登錄流程

所以省去了業(yè)務(wù)調(diào)用側(cè)的反復(fù)判斷處理通用邏輯，使用更簡潔。

cache

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

Model實(shí)現(xiàn)

model層就不用多說了，主要是把數(shù)據(jù)處理部分獨(dú)立出來，便于統(tǒng)一服務(wù)和維護(hù)，這里重點(diǎn)強(qiáng)調(diào)下model內(nèi)部的實(shí)現(xiàn)細(xì)節(jié)，這里有一個(gè)實(shí)現(xiàn)技巧可以用在其它別的地方。下面直接上代碼部分。

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

1. 把參數(shù)處理和返回結(jié)果處理拆出來放到單獨(dú)的處理方法里，方法名稱保持統(tǒng)一：formatParams，formatResult

2. 同時(shí)最外層定義好默認(rèn)的formatParams，formatResult，如果不做特殊處理，直接使用默認(rèn)即可（建議不處理也調(diào)用下默認(rèn)方法，規(guī)范流程）

3. 還有一點(diǎn)，model里方法命令有統(tǒng)一規(guī)范都是已get，add，update，del開頭

這個(gè)思路其實(shí)可以運(yùn)用到任何場景，特別是在沒有任何限定框架的場景，我們只需要按照這個(gè)模式去實(shí)現(xiàn)，代碼一樣很清晰漂亮，比如我后面實(shí)現(xiàn)LOL內(nèi)置競技場道具商店的時(shí)候，就是為了減少不必要的框架冗余代碼，就直接徒手寫的，同樣是拆分為model和view層，然后model按上面的規(guī)范實(shí)現(xiàn)，代碼同樣很清晰，強(qiáng)烈建議大家實(shí)踐下，簡單實(shí)用。

組件模式

在實(shí)現(xiàn)王者周邊小程序的時(shí)候，官方?jīng)]有開放自定義組件規(guī)范，所以我們還不能按照內(nèi)置組件的實(shí)現(xiàn)方式來實(shí)現(xiàn)我們業(yè)務(wù)側(cè)自定義的組件，但是項(xiàng)目里又有公共組件的需求存在，那我們不管怎樣還是需要把組件獨(dú)立出來，不然重復(fù)代碼很蛋疼，維護(hù)成本也比較高，實(shí)際我們這里的組件實(shí)現(xiàn)模式還是比較簡單粗暴的，我們照樣把組件拆分為JS，WXML，WXSS三部分（或者只有一部分也行），然后通過不同的import方式引入到需要使用組件的page里就行。

注：雖然這里沒有使用官方的自定義組件規(guī)范，但是經(jīng)過自己實(shí)現(xiàn)這個(gè)，也能大致了解到官方的自定義組件的實(shí)現(xiàn)方式和原理。

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

組件很多時(shí)候也需要處理頁面交互，相應(yīng)事件，而小程序的事件綁定機(jī)制決定，事件處理方法必須是掛載到當(dāng)前page對象下（實(shí)際是Page()方法定義的對象，內(nèi)部引用是this），而組件的實(shí)現(xiàn)是單獨(dú)的文件，不在Page()方法里定義，那怎么辦呢？我這邊的實(shí)現(xiàn)方式是組件初始化的地方，傳遞當(dāng)前的page對象（this）給到組件，然后組件內(nèi)部的接口方法全部一次性extend到page上，同樣數(shù)據(jù)也是這個(gè)道理，WXML里面的數(shù)據(jù)方法只能是data對象，組件里的數(shù)據(jù)也需要掛載到這個(gè)對象上，這里強(qiáng)烈建議把組件內(nèi)部的數(shù)據(jù)定義為一個(gè)單獨(dú)的對象掛載到data上，而不要直接掛載，如我們這里的購物車組件，實(shí)現(xiàn)就是下面這樣：

上面setData的時(shí)候，定義了shoppingCart對象，在它里面再定義具體的購物車組件需要的數(shù)據(jù)變量，而下面Object.assign一句就是把組件的方法掛載到當(dāng)前使用組件的page上面去。

另外還要注意，在WXML里插入組件模塊的時(shí)候，template標(biāo)簽的data屬性里的名稱請使用上面setData的名稱，比如購物車這里就是shoppingCart。

請大家現(xiàn)在實(shí)現(xiàn)的時(shí)候，使用官方標(biāo)準(zhǔn)的自定義組件規(guī)范

數(shù)據(jù)共享

小程序開發(fā)也涉及到多頁面間數(shù)據(jù)共享，這里針對不同的場景有幾種實(shí)現(xiàn)方式：

1、基于頁面的數(shù)據(jù)傳遞：直接在navigate的url后面增加參數(shù)即可，然后在接收的頁面onLoad方法里，通過參數(shù)（對象）接收即可，如下：

2、基于內(nèi)存的數(shù)據(jù)共享：getApp方法，獲取全局的App實(shí)例對象，可以設(shè)置存取這個(gè)實(shí)例對象屬性來實(shí)現(xiàn)數(shù)據(jù)共享，如下：

上面這種方式，適合與啟動(dòng)后的短期數(shù)據(jù)共享，關(guān)閉小程序數(shù)據(jù)會丟失。

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

4、基于后臺服務(wù)的接口緩存：這個(gè)不多說，就是保持?jǐn)?shù)據(jù)到服務(wù)器，多頁面通過接口調(diào)用。

開發(fā)規(guī)范

詳細(xì)的JS實(shí)現(xiàn)規(guī)范這就不講了，這里大致列一下我們在開發(fā)的時(shí)候，我們這邊簡單定義的一些規(guī)范，供大家參考。

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

經(jīng)驗(yàn)分享

大家開發(fā)前，可以大致瀏覽下小程序的官方文檔，相對比較完善，遇到問題可以先查文檔，然后再去小程序社區(qū)里搜索相關(guān)帖子，一般問題都能解決，下面是我遇到的一些問題和相應(yīng)的解決方案，也許你也會碰到，僅供參考。

1、setData相關(guān)經(jīng)驗(yàn)

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

設(shè)置可變索引的數(shù)組值：

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

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

this.setData(data);

2、swiper組件 current 問題

swiper組件切換數(shù)據(jù)源以后，current屬性也需要手動(dòng)重置，不會默認(rèn)恢復(fù)到第一幀，就可能出現(xiàn)當(dāng)前current大于新數(shù)據(jù)源的長度，顯示會出問題

3、picker-view 初始值設(shè)置無效

picker-view初始化的時(shí)候，我們都會設(shè)置數(shù)據(jù)源和初始索引值，結(jié)果發(fā)現(xiàn)放到一次setData里既然不生效，分成2次setData就可以了，應(yīng)該是設(shè)置數(shù)據(jù)源的時(shí)間點(diǎn)在初始值之后了，因?yàn)閟etData接收的是一個(gè)hash對象，而hash對象是沒有先后順序的，所以就可能存在初始值在數(shù)據(jù)源之前設(shè)置了，當(dāng)然初始值不可能生效。

4、android 兼容性問題

從原理上我們知道，小程序本身還是基于不同的JS容器的執(zhí)行的，所以由于IOS（jscore）和android（v8）上容器不一致，還是需要小程序開發(fā)者自己處理兩個(gè)平臺的兼容性，不過新版的微信升級后，目前ios和android的不一致的兼容性問題已經(jīng)很少了，不要這里需要理解的是小程序雖然有規(guī)范，但是并沒有幫我們屏蔽底層的兼容問題，我們自己需要注意。

5、cookie 的問題

我們在開發(fā)web頁面的時(shí)候，肯定會使用到cookie，傳遞登錄信息等，但是小程序本身不支持cookie，所以需要應(yīng)用到cookie的地方，可以轉(zhuǎn)換為參數(shù)，放到請求后面，我們上面的小程序登錄態(tài)就是放到了請求參數(shù)里。

但是在調(diào)用wx.request的時(shí)候，是可以設(shè)置cookie header頭的，所以如果后臺接口驗(yàn)證的需要cookie支持，可以直接在這里設(shè)置即可，但是需要注意：android的版本的小程序會把cookie鍵名自動(dòng)改為小寫，如果后臺是通過大寫讀取的話，可能就取不到值了，暫時(shí)還不確認(rèn)新版是否已修復(fù)這個(gè)問題。

6、https 的問題

小程序要求所有請求接口都必須是https的，而且所有的域名都需要在小程序管理后臺去添加，如果碰到?jīng)]有添加的情況，開發(fā)調(diào)試階段可以在小程序開發(fā)工具的項(xiàng)目一欄下，把下面這句勾選，不過上線之前是一定要添加的，不然會出現(xiàn)本地怎么調(diào)都是好的，到了手機(jī)上就是不行。