大家好，以(yi)下是《王(wang)者榮耀周邊商城(cheng)》小程序的一些經(jing)驗總(zong)結，也(ye)許能(neng)幫到你，也(ye)許也(ye)幫不到，大家看(kan)著(zhu)辦哈，因為時間有(you)點早，所以(yi)文(wen)(wen)中有(you)些實現不是最新的，最終請以(yi)官方文(wen)(wen)檔說明為準(zhun)，廢話不多說，直接上高清無碼大圖。

 

 以上截(jie)圖是之前的版本(ben)，中(zhong)間做(zuo)了改版，大(da)家可以直接掃碼識別體驗：

項(xiang)目(mu)結構

我(wo)們都知道，小(xiao)程(cheng)序有自己(ji)的(de)一套實現規范，下(xia)(xia)面我(wo)們看(kan)下(xia)(xia)小(xiao)程(cheng)序的(de)項目(mu)結構，如下(xia)(xia)圖：

d

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

 

頁面(mian)：pages下，每個(ge)頁面(mian)再按文件夾(jia)劃分，每個(ge)頁面(mian)4個(ge)文件

 

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

 

當然(ran)在4個文(wen)件基(ji)礎(chu)之(zhi)下，還有一(yi)些通用(yong)的功能組件支撐它們的運行。每(mei)一(yi)個頁(ye)面都是這么(me)幾個文(wen)件組成，非常(chang)規(gui)(gui)范統一(yi)，并且每(mei)一(yi)部分也(ye)都限定(ding)了內部實現(xian)框架(jia)和規(gui)(gui)范，所以在多(duo)人(ren)協(xie)作的時候，產出相對(dui)也(ye)就比(bi)較規(gui)(gui)范。

注：pages里面(mian)還可以再根(gen)據模塊劃分子(zi)目錄，孫(sun)子(zi)目錄，只需(xu)要在(zai)app.json里注冊時填寫(xie)路(lu)徑就行

以上是必(bi)須的文件和目錄(lu)，而實際中(zhong)我(wo)們會增(zeng)加別的目錄(lu)，如lib，comm和utils等(deng)等(deng)目錄(lu)。

 

框(kuang)架設計

Web開(kai)發(fa)做得多了，你就(jiu)會發(fa)現(xian)，大部分工作(zuo)就(jiu)是(shi)取數(shu)據，渲(xuan)染UI，處理交互這三件事兒，小程序也不例外(wai)，所(suo)以按照這個框(kuang)架邏輯，我們基于(yu)小程序本身的框(kuang)架規范又擴展(zhan)和(he)細化了下，設計(ji)了下面的這套可(ke)直接(jie)應用于(yu)項(xiang)目的開(kai)發(fa)框(kuang)架。

 

 下面我們繼續詳細理一下設計時的(de)一些思路、出發點和(he)具體的(de)實現方(fang)式(shi)，窺其面更要知其理。

注：這(zhe)里(li)我沒有直接使用第三(san)方(fang)的(de)(de)框架，因(yin)為我個人覺得要(yao)學(xue)習一(yi)套技術，還是(shi)需要(yao)從(cong)原生的(de)(de)模式開始著手(shou)，雖(sui)然(ran)前(qian)期會比較痛苦一(yi)點，但是(shi)這(zhe)些付出都是(shi)值(zhi)得的(de)(de)，因(yin)為你(ni)(ni)一(yi)旦搞明白了(le)本(ben)來(lai)的(de)(de)邏輯架構和(he)原理(li)，你(ni)(ni)會發現什(shen)么框架都是(shi)信手(shou)拈來(lai)，而且你(ni)(ni)也更能理(li)解框架這(zhe)樣(yang)設計(ji)的(de)(de)優點和(he)缺(que)點。

 

工具類(lei)庫

 

Ajax

實(shi)(shi)現(xian)了(le)promise的(de)封裝(zhuang)，支(zhi)持GET POST PUT和DELETE，這里設計(ji)的(de)時(shi)候就(jiu)確定為僅滿足單項目通用即可，所以(yi)實(shi)(shi)現(xian)的(de)時(shi)候融(rong)入(ru)了(le)部(bu)分業(ye)務(wu)層(ceng)面的(de)邏輯(ji)：

 

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

 

所以省去了業務(wu)調用側的反復判斷處(chu)理通用邏輯(ji)，使用更簡潔(jie)。

 

cache

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

 

Model實現

model層就(jiu)不用多說了，主(zhu)要是(shi)把數據處(chu)理部分獨立出來，便(bian)于統一服務和維護，這里重點(dian)強調(diao)下(xia)(xia)model內(nei)部的實現(xian)細(xi)節，這里有一個實現(xian)技(ji)巧可以用在其它(ta)別的地方(fang)。下(xia)(xia)面直接上(shang)代(dai)碼部分。

 

上(shang)面的代碼我們可以看到幾(ji)個(ge)關鍵(jian)點

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

2. 同時最外層定義好默(mo)認的formatParams，formatResult，如果不做特殊處(chu)理(li)，直接使用(yong)默(mo)認即可（建議不處(chu)理(li)也調用(yong)下默(mo)認方法(fa)，規范流程(cheng)）

3. 還有(you)一(yi)點，model里方法命令有(you)統一(yi)規范(fan)都是已(yi)get，add，update，del開頭

 

這個思路其(qi)實(shi)(shi)可(ke)以運用到任(ren)何場景，特別是(shi)(shi)在沒(mei)有任(ren)何限定框架的(de)場景，我(wo)們只(zhi)需(xu)要按照(zhao)這個模式去實(shi)(shi)現，代碼一樣很(hen)清(qing)晰漂亮，比如我(wo)后面實(shi)(shi)現LOL內置(zhi)競(jing)技場道具(ju)商店的(de)時候，就(jiu)是(shi)(shi)為了減少(shao)不(bu)必要的(de)框架冗余代碼，就(jiu)直接徒(tu)手(shou)寫(xie)的(de)，同樣是(shi)(shi)拆分為model和view層(ceng)，然后model按上面的(de)規范實(shi)(shi)現，代碼同樣很(hen)清(qing)晰，強烈建(jian)議大家實(shi)(shi)踐下，簡單實(shi)(shi)用。

 

組件模式

在實(shi)現王(wang)者(zhe)周邊(bian)小程序(xu)的(de)(de)(de)時候，官方沒(mei)有開放自定義(yi)組(zu)件規范(fan)，所以我(wo)們(men)還(huan)(huan)不(bu)能按照內置組(zu)件的(de)(de)(de)實(shi)現方式來(lai)實(shi)現我(wo)們(men)業務側自定義(yi)的(de)(de)(de)組(zu)件，但是項目里(li)又有公共組(zu)件的(de)(de)(de)需求存(cun)在，那我(wo)們(men)不(bu)管怎樣還(huan)(huan)是需要(yao)把(ba)組(zu)件獨(du)立出來(lai)，不(bu)然(ran)(ran)重復代(dai)碼很(hen)蛋疼，維(wei)護成本也(ye)比較高(gao)，實(shi)際我(wo)們(men)這里(li)的(de)(de)(de)組(zu)件實(shi)現模(mo)式還(huan)(huan)是比較簡單粗暴的(de)(de)(de)，我(wo)們(men)照樣把(ba)組(zu)件拆(chai)分為(wei)JS，WXML，WXSS三部(bu)分（或者(zhe)只有一部(bu)分也(ye)行），然(ran)(ran)后(hou)通過不(bu)同的(de)(de)(de)import方式引入到需要(yao)使用組(zu)件的(de)(de)(de)page里(li)就行。

 

注：雖然(ran)這里沒有使用官方的(de)(de)自(zi)定義(yi)組(zu)(zu)件規范(fan)，但是經過自(zi)己實(shi)現這個，也能大致了解到官方的(de)(de)自(zi)定義(yi)組(zu)(zu)件的(de)(de)實(shi)現方式和原理。

 

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

 

組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)很多時候也需要(yao)處理頁面(mian)(mian)交(jiao)互(hu)，相應事件(jian)(jian)(jian)，而(er)小(xiao)程序的(de)(de)(de)(de)事件(jian)(jian)(jian)綁定機制(zhi)決定，事件(jian)(jian)(jian)處理方法必須是(shi)掛載到當前page對(dui)(dui)象(xiang)(xiang)下（實(shi)際是(shi)Page()方法定義(yi)的(de)(de)(de)(de)對(dui)(dui)象(xiang)(xiang)，內部引用是(shi)this），而(er)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)的(de)(de)(de)(de)實(shi)現是(shi)單獨(du)的(de)(de)(de)(de)文件(jian)(jian)(jian)，不在(zai)Page()方法里定義(yi)，那怎么辦(ban)呢？我(wo)這邊的(de)(de)(de)(de)實(shi)現方式(shi)是(shi)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)初始化的(de)(de)(de)(de)地方，傳遞當前的(de)(de)(de)(de)page對(dui)(dui)象(xiang)(xiang)（this）給(gei)到組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)，然(ran)后組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)內部的(de)(de)(de)(de)接(jie)口方法全(quan)部一次性extend到page上(shang)，同樣(yang)數(shu)(shu)(shu)據也是(shi)這個(ge)道理，WXML里面(mian)(mian)的(de)(de)(de)(de)數(shu)(shu)(shu)據方法只能(neng)是(shi)data對(dui)(dui)象(xiang)(xiang)，組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)里的(de)(de)(de)(de)數(shu)(shu)(shu)據也需要(yao)掛載到這個(ge)對(dui)(dui)象(xiang)(xiang)上(shang)，這里強(qiang)烈建(jian)議(yi)把組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)內部的(de)(de)(de)(de)數(shu)(shu)(shu)據定義(yi)為一個(ge)單獨(du)的(de)(de)(de)(de)對(dui)(dui)象(xiang)(xiang)掛載到data上(shang)，而(er)不要(yao)直接(jie)掛載，如我(wo)們這里的(de)(de)(de)(de)購物(wu)車(che)組(zu)(zu)(zu)(zu)件(jian)(jian)(jian)，實(shi)現就是(shi)下面(mian)(mian)這樣(yang)：

 

上面(mian)(mian)setData的(de)時候，定義了shoppingCart對象，在(zai)它里面(mian)(mian)再定義具體的(de)購物車組件需要(yao)的(de)數據變量，而下面(mian)(mian)Object.assign一句(ju)就是(shi)把組件的(de)方法掛載到當(dang)前使用組件的(de)page上面(mian)(mian)去(qu)。

另外還要注意，在WXML里(li)(li)插入組件(jian)模塊的(de)(de)時(shi)候，template標簽(qian)的(de)(de)data屬性里(li)(li)的(de)(de)名稱(cheng)請(qing)使(shi)用上(shang)面setData的(de)(de)名稱(cheng)，比如(ru)購物車這(zhe)里(li)(li)就是shoppingCart。

請大(da)家(jia)現在實現的時候，使(shi)用官方標(biao)準的自定義組件規(gui)范

 

數據共享(xiang)

小(xiao)程序開發也涉及到多頁面間數據共享，這里(li)針對不同的場(chang)景有幾(ji)種實現方式(shi)：

1、基于(yu)頁面(mian)的(de)(de)數(shu)據(ju)傳遞：直接在navigate的(de)(de)url后(hou)面(mian)增加參(can)數(shu)即可，然后(hou)在接收的(de)(de)頁面(mian)onLoad方(fang)法(fa)里，通過(guo)參(can)數(shu)（對象）接收即可，如下(xia)：

 

2、基于內(nei)存(cun)的數(shu)據共(gong)(gong)享：getApp方法，獲取全(quan)局的App實(shi)例對象，可(ke)以(yi)設置存(cun)取這(zhe)個實(shi)例對象屬性來實(shi)現數(shu)據共(gong)(gong)享，如(ru)下：

 

上面(mian)這(zhe)種方式(shi)，適合與啟動后的(de)短(duan)期數據(ju)共(gong)享，關(guan)閉(bi)小(xiao)程(cheng)序數據(ju)會丟(diu)失。

 

3、基(ji)于本地緩存(cun)的數(shu)據(ju)共享：可(ke)以(yi)使(shi)用上面的cache組件，也可(ke)以(yi)使(shi)用原生的緩存(cun)接口實(shi)現，這種方式是可(ke)以(yi)在(zai)小程序關閉(bi)后(hou)還存(cun)在(zai)。

4、基(ji)于(yu)后(hou)臺服務的接口緩存：這個不多(duo)說(shuo)，就是(shi)保持數據到(dao)服務器(qi)，多(duo)頁面通過接口調用(yong)。

 

開發規范

詳細(xi)的JS實現規(gui)(gui)范這(zhe)就不(bu)講了，這(zhe)里大致列一下我(wo)(wo)們在開(kai)發的時候，我(wo)(wo)們這(zhe)邊簡單(dan)定義的一些規(gui)(gui)范，供大家參考。

 

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

 

經驗分享

大家開發前(qian)，可(ke)以(yi)(yi)大致瀏覽下小(xiao)程序的(de)官(guan)方文檔(dang)，相對比較完善，遇(yu)到問(wen)題(ti)可(ke)以(yi)(yi)先查文檔(dang)，然后再去小(xiao)程序社(she)區里搜索相關帖子，一(yi)般問(wen)題(ti)都能解(jie)決(jue)，下面是(shi)我遇(yu)到的(de)一(yi)些問(wen)題(ti)和相應的(de)解(jie)決(jue)方案，也許你也會碰到，僅供參(can)考。

1、setData相關經驗

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

設置可(ke)變索引的數(shu)組值(zhi)：

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

data ={key: 'changed data’};

this.setData(data);

 

2、swiper組件 current 問題

swiper組件切換數據源以后，current屬性(xing)也需(xu)要手動重置，不會(hui)默認恢復到第一幀(zhen)，就可能(neng)出(chu)現當前current大(da)于新(xin)數據源的長(chang)度(du)，顯示(shi)會(hui)出(chu)問(wen)題

 

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

picker-view初(chu)始(shi)(shi)化的時候，我們都會設置(zhi)數據源和初(chu)始(shi)(shi)索(suo)引(yin)值，結(jie)果發現放到一(yi)次setData里既然不生效(xiao)，分成2次setData就可以了，應該(gai)是(shi)設置(zhi)數據源的時間點在初(chu)始(shi)(shi)值之(zhi)后了，因為setData接(jie)收的是(shi)一(yi)個hash對(dui)象(xiang)，而(er)hash對(dui)象(xiang)是(shi)沒有先后順序的，所以就可能(neng)存在初(chu)始(shi)(shi)值在數據源之(zhi)前設置(zhi)了，當然初(chu)始(shi)(shi)值不可能(neng)生效(xiao)。

 

 

4、android 兼(jian)容性問題

從原理上我們(men)(men)知道，小(xiao)程(cheng)序(xu)(xu)本身(shen)還(huan)是基于不(bu)同的(de)(de)(de)(de)JS容(rong)器的(de)(de)(de)(de)執行(xing)的(de)(de)(de)(de)，所以(yi)由于IOS（jscore）和(he)android（v8）上容(rong)器不(bu)一致，還(huan)是需要小(xiao)程(cheng)序(xu)(xu)開發者自(zi)己處理兩個平臺的(de)(de)(de)(de)兼(jian)容(rong)性(xing)，不(bu)過新版的(de)(de)(de)(de)微(wei)信(xin)升級后，目前ios和(he)android的(de)(de)(de)(de)不(bu)一致的(de)(de)(de)(de)兼(jian)容(rong)性(xing)問(wen)題(ti)已(yi)經很少了，不(bu)要這(zhe)里需要理解的(de)(de)(de)(de)是小(xiao)程(cheng)序(xu)(xu)雖然有規(gui)范，但是并(bing)沒有幫我們(men)(men)屏(ping)蔽(bi)底層(ceng)的(de)(de)(de)(de)兼(jian)容(rong)問(wen)題(ti)，我們(men)(men)自(zi)己需要注意。

 

5、cookie 的問題

我(wo)們在開發web頁面(mian)(mian)的(de)時候，肯定會使用(yong)到(dao)cookie，傳遞登錄(lu)信息(xi)等(deng)，但是(shi)小(xiao)程(cheng)序(xu)本身(shen)不支(zhi)持cookie，所以需要應用(yong)到(dao)cookie的(de)地方，可以轉換(huan)為參數，放到(dao)請求后面(mian)(mian)，我(wo)們上面(mian)(mian)的(de)小(xiao)程(cheng)序(xu)登錄(lu)態(tai)就是(shi)放到(dao)了(le)請求參數里。

 

但(dan)是(shi)在(zai)調用wx.request的(de)時候，是(shi)可以(yi)(yi)設(she)置(zhi)cookie header頭的(de)，所以(yi)(yi)如果(guo)后(hou)臺接(jie)口驗(yan)證的(de)需要cookie支持，可以(yi)(yi)直接(jie)在(zai)這里設(she)置(zhi)即(ji)可，但(dan)是(shi)需要注(zhu)意：android的(de)版本的(de)小(xiao)程序(xu)會(hui)把cookie鍵名自動改為小(xiao)寫，如果(guo)后(hou)臺是(shi)通過大(da)寫讀取的(de)話，可能就取不(bu)到(dao)值了，暫時還(huan)不(bu)確認(ren)新版是(shi)否(fou)已修復這個問(wen)題。

 

 

6、https 的問題

小程(cheng)序要(yao)求所(suo)有請求接口都必須(xu)是https的，而(er)且所(suo)有的域名都需要(yao)在小程(cheng)序管理后臺去添(tian)加，如(ru)果碰(peng)到沒有添(tian)加的情況(kuang)，開(kai)(kai)發(fa)調試(shi)階段可以在小程(cheng)序開(kai)(kai)發(fa)工具的項目一欄下，把下面這句勾選，不過上線之前(qian)是一定要(yao)添(tian)加的，不然(ran)會出現本地怎么調都是好(hao)的，到了手機(ji)上就(jiu)是不行。

 

 

7、關于(yu)支付

直接使(shi)用微信支付即可，不多(duo)講。

8、關于(yu)設計

如果有條(tiao)件(jian)，小程序需要獨立的(de)產(chan)品(pin)設計和規劃，照(zhao)搬App或者H5版(ban)本不是最好的(de)方(fang)案(an)，因為(wei)小程序有自己(ji)的(de)一套(tao)設計，交互(hu)規范，有基(ji)于微信(xin)的(de)賬號體系，消息機制等(deng)基(ji)礎能力，我們都可以充(chong)分利用。

 

寫在最后(hou)

 雖然(ran)版本有些老(lao)，但是(shi)(shi)還是(shi)(shi)希望對大(da)家有些幫(bang)助(zhu)，最后(hou)建(jian)議，大(da)家如果在開發(fa)(fa)小程序的過程中遇到問題，可(ke)以(yi)第一時間在論壇(tan)里發(fa)(fa)帖求助(zhu)哈(ha)，微信(xin)官方有開發(fa)(fa)同學(xue)直(zhi)接回復大(da)家。