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

 

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

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

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

d

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

 

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

 

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

 

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

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

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

 

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

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

 

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

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

 

工具類庫(kù)

 

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形式的接口）
• 直接判斷返回值在邏輯上是成功還是失敗
• 針對(duì)返回未登錄的情況，自動(dòng)跳轉(zhuǎn)登錄流程

 

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

 

cache

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

 

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

model層就不用多說(shuō)了，主要是把數(shù)據(jù)處理部分獨(dú)立出來(lái)，便于統(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é)果處理拆出來(lái)放到單獨(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開(kāi)頭

 

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

 

組件模式

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

 

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

 

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

 

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

 

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

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

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

 

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

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

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

 

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

 

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

 

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

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

 

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

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

 

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

 

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

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

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

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

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

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

data ={key: 'changed data’};

this.setData(data);

 

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

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

 

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

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

 

 

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

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

 

5、cookie 的問(wèn)題

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

 

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

 

 

6、https 的問(wèn)題

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

 

 

7、關(guān)于支付

直接使用微信支付即可，不多講。

8、關(guān)于設(shè)計(jì)

如果有條件，小程序需要獨(dú)立的產(chǎn)品設(shè)計(jì)和規(guī)劃，照搬App或者H5版本不是最好的方案，因?yàn)樾〕绦蛴凶约旱囊惶自O(shè)計(jì)，交互規(guī)范，有基于微信的賬號(hào)體系，消息機(jī)制等基礎(chǔ)能力，我們都可以充分利用。

 

寫(xiě)在最后

雖然版本有些老，但是還是希望對(duì)大家有些幫助，最后建議，大家如果在開(kāi)發(fā)小程序的過(guò)程中遇到問(wèn)題，可以第一時(shí)間在論壇里發(fā)帖求助哈，微信官方有開(kāi)發(fā)同學(xué)直接回復(fù)大家。