特別說明：本文寫作時間為11月份，所以很多內容可能不再適合最新版本，僅供參考； 
| 導(dao)語 隱(yin)隱(yin)覺(jue)得有幾(ji)本(ben)書(shu)要(yao)火《從入門到精通微(wei)信(xin)(xin)小(xiao)(xiao)(xiao)(xiao)(xiao)(xiao)程(cheng)序(xu)(xu)》，《微(wei)信(xin)(xin)小(xiao)(xiao)(xiao)(xiao)(xiao)(xiao)程(cheng)序(xu)(xu)開發權威指南》，《微(wei)信(xin)(xin)小(xiao)(xiao)(xiao)(xiao)(xiao)(xiao)程(cheng)序(xu)(xu)之(zhi)(zhi)美》，《微(wei)信(xin)(xin)小(xiao)(xiao)(xiao)(xiao)(xiao)(xiao)程(cheng)序(xu)(xu)之(zhi)(zhi)道》，《頸(jing)椎病康復(fu)指南》。。。咳咳，跑偏了，什么？沒見(jian)過這(zhe)幾(ji)本(ben)書(shu)？那你總聽過微(wei)信(xin)(xin)小(xiao)(xiao)(xiao)(xiao)(xiao)(xiao)程(cheng)序(xu)(xu)的(de)(de)(de)大(da)(da)名吧，作(zuo)為移動端的(de)(de)(de)新起之(zhi)(zhi)秀，小(xiao)(xiao)(xiao)(xiao)(xiao)(xiao)程(cheng)序(xu)(xu)牽(qian)動了無數(shu)人的(de)(de)(de)目(mu)光。作(zuo)為有幸參(can)與并推動小(xiao)(xiao)(xiao)(xiao)(xiao)(xiao)程(cheng)序(xu)(xu)成長過程(cheng)的(de)(de)(de)團隊之(zhi)(zhi)一，我(wo)們(men)(men)也(ye)不能(neng)甘（fang）于（qi）落(luo)（xuan）后（yao），經過我(wo)們(men)(men)幾(ji)天的(de)(de)(de)努力(li)，這(zhe)篇(pian)(pian)微(wei)信(xin)(xin)小(xiao)(xiao)(xiao)(xiao)(xiao)(xiao)程(cheng)序(xu)(xu)開發經驗分享(xiang)展現給(gei)大(da)(da)家。本(ben)篇(pian)(pian)文章(zhang)主要(yao)就小(xiao)(xiao)(xiao)(xiao)(xiao)(xiao)程(cheng)序(xu)(xu)的(de)(de)(de)適(shi)配、小(xiao)(xiao)(xiao)(xiao)(xiao)(xiao)程(cheng)序(xu)(xu)的(de)(de)(de)生(sheng)命周期、小(xiao)(xiao)(xiao)(xiao)(xiao)(xiao)程(cheng)序(xu)(xu)的(de)(de)(de)架構、小(xiao)(xiao)(xiao)(xiao)(xiao)(xiao)程(cheng)序(xu)(xu)的(de)(de)(de)開發以(yi)及我(wo)們(men)(men)趟(tang)過的(de)(de)(de)坑這(zhe)幾(ji)點展開來(lai)講。 話不多說(shuo)上干貨（內容比較干，建議大(da)(da)家自備(bei)水壺）～

寫在前面：

小程(cheng)序的定義： 
很(hen)多(duo)人問我(wo)，說的這么熱鬧，小程序到底(di)是(shi)個什(shen)么東(dong)西？下面(mian)我(wo)先簡單介紹一下。

官方這(zhe)么定義小(xiao)程序(xu)：

“小程序是一種不需要(yao)下載安(an)(an)裝(zhuang)即(ji)可(ke)使(shi)用(yong)(yong)的(de)應用(yong)(yong)，它實現了應用(yong)(yong)“觸(chu)手可(ke)及”的(de)夢想，用(yong)(yong)戶掃(sao)一掃(sao)活著搜一下即(ji)可(ke)打開應用(yong)(yong)。也(ye)體現了“用(yong)(yong)完即(ji)走(zou)”的(de)理念，用(yong)(yong)戶不用(yong)(yong)關心是否安(an)(an)裝(zhuang)太(tai)多應用(yong)(yong)的(de)問題。應用(yong)(yong)將無處不在，隨時可(ke)用(yong)(yong)，但(dan)又無需安(an)(an)裝(zhuang)卸(xie)載”。

小程(cheng)(cheng)序是(shi)(shi)一個(ge)由微信(xin)提(ti)供開(kai)發(fa)組(zu)件(jian)與開(kai)發(fa)規則，以js為主要(yao)開(kai)發(fa)語(yu)言，最終(zhong)運行在微信(xin)App內的(de)(de)輕量型(xing)應用(yong)，有著即掃即用(yong)的(de)(de)特點。它(ta)不(bu)是(shi)(shi)H5，但(dan)與H5一樣(yang)，小程(cheng)(cheng)序有著開(kai)發(fa)上手快(kuai)、開(kai)發(fa)成本低的(de)(de)特性(xing)；它(ta)不(bu)是(shi)(shi)App，卻有著同樣(yang)的(de)(de)流暢度(du)。小程(cheng)(cheng)序的(de)(de)出現使前端工程(cheng)(cheng)師(shi)可觸及的(de)(de)領域(yu)進一步增大，可謂是(shi)(shi)迎來了(le)前端工程(cheng)(cheng)師(shi)的(de)(de)春天～～

我們(men)的小程序： 
小(xiao)程(cheng)序的點在一個(ge)“小(xiao)”字，對程(cheng)序大小(xiao)要求有限制，對頁(ye)面(mian)嵌套的層(ceng)級有限制，不(bu)(bu)適合過于重的交(jiao)互。小(xiao)程(cheng)序不(bu)(bu)能跳出，不(bu)(bu)能調(diao)起外部(bu)應用(yong)，消息推送折疊在微信內部(bu)，相比于原(yuan)生(sheng)App有著很大的局限性。

但是(shi)，相比于H5，小程序又有(you)著不可忽視的(de)(de)優勢(shi)，固定(ding)化(hua)的(de)(de)入口(kou)，豐富(fu)的(de)(de)組(zu)件，系統(tong)控件的(de)(de)接口(kou)權限，接近App的(de)(de)使用(yong)流(liu)暢(chang)度，微信強大的(de)(de)生態圈(quan)...

結合上面兩點，我們認為：小程序(xu)＝固定入口＋有體系的H5

根據這一點(dian)，我們仔(zi)細斟酌，提煉出體(ti)育用戶(hu)的(de)核心訴求(qiu)，將體(ti)育小程(cheng)序的(de)第(di)一階段功能(neng)定位(wei)為賽程(cheng)查詢、數(shu)據、資訊推送，第(di)二階段的(de)功能(neng)定位(wei)為視頻點(dian)播(bo)、個性化提醒（關注、預(yu)約、定制）。

關于小程序的適配：

眾所周知，微(wei)信(xin)(xin)App運行(xing)在(zai)Android、iphone、iPad等多種(zhong)屏幕(mu)尺寸和分辨率的(de)(de)設備上，不同終(zhong)端的(de)(de)微(wei)信(xin)(xin)小(xiao)程(cheng)(cheng)序用(yong)的(de)(de)是同一套(tao)代碼，需要照(zhao)顧到(dao)一個(ge)“小(xiao)程(cheng)(cheng)序”在(zai)多種(zhong)不同大小(xiao)屏幕(mu)的(de)(de)使用(yong)體(ti)驗(yan)，所以在(zai)設計(ji)排版(ban)時(shi)推(tui)薦柵(zha)格式排版(ban)。而在(zai)代碼實現方(fang)面，微(wei)信(xin)(xin)官方(fang)比較推(tui)薦用(yong)Flex、rpx來實現小(xiao)程(cheng)(cheng)序的(de)(de)適配。 

Flex布(bu)局(ju)是(shi)2009年，W3C提(ti)出的一種新的方案，可以簡(jian)便、完整、響應(ying)式地實現各種頁面布(bu)局(ju)。目前，它已經得到(dao)了所有瀏覽器(qi)的支持。

rpx單位是小程序中css的尺寸單位，可以根據屏(ping)幕寬度(du)進行自適應，規(gui)定屏(ping)幕寬為750rpx。如iPhone6的屏(ping)幕像素(su)為375px，則750rpx＝375px，1rpx＝0.5px。同時小程序也支(zhi)持rem: 規(gui)定屏(ping)幕寬度(du)為20rem；1rem = (750/20)rpx 。 

Flex與rpx搭配(pei)可(ke)以解決(jue)大部分(fen)的適配(pei)，但遇到極端寬高比的情況(kuang)，就需要(yao)變動元(yuan)素的排放位置。而小程序不支(zhi)持Media Query，那就要(yao)通(tong)過js來進行(xing)不同樣(yang)式的切換。小程序里獲得屏幕(mu)寬高的接口(kou)是(shi)異步(bu)的，實現響應(ying)式布局(ju)盡(jin)量在app.js里盡(jin)早執行(xing)防(fang)止頁面抖動。

關于小程序的生命周期：

小程(cheng)序的(de)(de)框(kuang)架程(cheng)序包含一個(ge)描述整體(ti)程(cheng)序的(de)(de)app 和多個(ge)描述頁(ye)(ye)面(mian)的(de)(de)page。其中，app由三個(ge)文件構成(cheng)，公共(gong)設(she)置(zhi)的(de)(de)app.json 、公共(gong)樣式(shi)的(de)(de)app.wxss、主體(ti)邏輯的(de)(de)app.js 。每個(ge)page由四部分組成(cheng)，頁(ye)(ye)面(mian)設(she)置(zhi)page.json、頁(ye)(ye)面(mian)文件page.wxml、頁(ye)(ye)面(mian)樣式(shi)page.wxss、頁(ye)(ye)面(mian)主體(ti)邏輯page.js。

與H5開發一樣，我(wo)們可以(yi)根據需求在(zai)app.js和(he)page.js里添加程(cheng)序在(zai)生命(ming)周(zhou)期(qi)每個階(jie)段相應的事件(jian)。比如在(zai)頁面(mian)onLoad的時(shi)候進(jin)行(xing)數據的加載，onShow的時(shi)候進(jin)行(xing)數據的更(geng)新。

一個(ge)page的(de)生命周(zhou)期從onLoad開(kai)始，整(zheng)個(ge)生命周(zhou)期內(nei)(nei)onLoad、onReady、onUnload這三個(ge)事(shi)件僅(jin)執行一次，而onHide和onShow在(zai)每(mei)次頁面隱藏和顯示(shi)時(shi)都會(hui)觸發(fa)。當用戶手(shou)動觸發(fa)左上角的(de)退出箭頭時(shi)，小(xiao)程(cheng)(cheng)序(xu)(xu)僅(jin)觸發(fa)app.onHide，下次進入小(xiao)程(cheng)(cheng)序(xu)(xu)時(shi)會(hui)觸發(fa)app.onShow以及(ji)當前page.onShow。僅(jin)當小(xiao)程(cheng)(cheng)序(xu)(xu)在(zai)后臺運行超過一定時(shi)間未被喚起(qi)、或(huo)者用戶手(shou)動在(zai)小(xiao)程(cheng)(cheng)序(xu)(xu)的(de)控制欄里點擊退出程(cheng)(cheng)序(xu)(xu)、或(huo)者小(xiao)程(cheng)(cheng)序(xu)(xu)內(nei)(nei)存占(zhan)用過大被關(guan)閉時(shi)，小(xiao)程(cheng)(cheng)序(xu)(xu)被銷毀，會(hui)觸發(fa)app.onUnload事(shi)件。

一(yi)個(ge)完整(zheng)的小程序執行的生(sheng)命周期(qi)如下： 

關于小程序的架構：

如圖，每(mei)個小程(cheng)(cheng)序(xu)分(fen)為兩個線(xian)(xian)程(cheng)(cheng)，view和appServer。其中view線(xian)(xian)程(cheng)(cheng)負責(ze)解析渲染頁面（wxml和wxss），而appServer線(xian)(xian)程(cheng)(cheng)負責(ze)運(yun)(yun)行js。appServer線(xian)(xian)程(cheng)(cheng)運(yun)(yun)行在(zai)jsCore中（安(an)卓(zhuo)下運(yun)(yun)行在(zai)X5中，開(kai)發(fa)工(gong)具中運(yun)(yun)行在(zai)nwjs中），所以(yi)js不跑在(zai)webview里，不能直(zhi)接操(cao)縱DOM和BOM，這就(jiu)是(shi)為什么小程(cheng)(cheng)序(xu)沒有window全局(ju)變量。

那js如何操縱頁(ye)面(mian)？js與頁(ye)面(mian)的(de)交互靠setData和事件觸(chu)發(fa)(fa)，js通過(guo)setData來(lai)改變(bian)頁(ye)面(mian)數據，頁(ye)面(mian)通過(guo)下發(fa)(fa)事件來(lai)觸(chu)發(fa)(fa)js中對應的(de)響應事件。setData同時會改變(bian)當前頁(ye)面(mian)的(de)Page函(han)數里的(de)data對象(xiang)，注(zhu)意(yi)異步(bu)數據setData以后(hou)一定要update，不然頁(ye)面(mian)上的(de)數據不會及時更新。

最初版本里，小(xiao)程(cheng)(cheng)序(xu)的所有(you)js跑在(zai)同一個作用域下，開發過程(cheng)(cheng)中(zhong)一不(bu)小(xiao)心定(ding)義(yi)了(le)相同的變(bian)(bian)量名(ming)就會導致(zhi)其他(ta)頁(ye)面(mian)的數據錯誤。在(zai)我們的推動下，現在(zai)每個小(xiao)程(cheng)(cheng)序(xu)頁(ye)面(mian)都是(shi)一個獨(du)立的作用域，命名(ming)空間(jian)互不(bu)沖突(tu)。有(you)人問，那我們想要(yao)全局變(bian)(bian)量怎么辦？又沒(mei)有(you)window。微(wei)信(xin)提供的解(jie)決方案是(shi)在(zai)app.js中(zhong)注冊全局變(bian)(bian)量，在(zai)每個頁(ye)面(mian)中(zhong)通過getApp()函數獲取(qu)。

關于小程序的開發：

小程(cheng)序(xu)開發入(ru)門簡(jian)單，按(an)照官方文檔上給的簡(jian)易教程(cheng)，可以快速建立一個小程(cheng)序(xu)。但是實際上手開發會(hui)發現這(zhe)樣(yang)幾個問題：

小程序的開發工具支持簡單的模塊化，page路徑可單獨設置，但是提交代碼包的大小有限制1M，而小程序沒有提供相應的文件壓縮與合并。 
以前小程序框架的CSS 不支持 import（現在支持了！），所有樣式只能寫在一個文件里，不方便拆分，也不支持模塊化 
CSS中圖片不支持相對路徑，需使用線上地址或base64的，在開發階段不方便 
暫不支持es6（新版本也支持了！超哥棒棒噠） 
不支持LESS SASS POSTCSS 
頁面與頁面之間代(dai)碼(ma)復用性(xing)差(cha)

為此，我們引(yin)進(jin)了webpack將(jiang)開(kai)(kai)(kai)發目(mu)錄(lu)與發布目(mu)錄(lu)區(qu)分開(kai)(kai)(kai)來。webpack是一個前端資源(yuan)加(jia)載／打包工(gong)具，它能把各種資源(yuan)，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作(zuo)為模塊來使(shi)用和(he)處理。通過引(yin)入webpack，我們實(shi)現了對(dui)es6+sass+postcss的支持，更(geng)加(jia)靈活的模塊化體系，成功(gong)隔離了開(kai)(kai)(kai)發目(mu)錄(lu)和(he)發布目(mu)錄(lu)。

如(ru)上(shang)圖(tu)所示，我們(men)指定發布目錄到／pub，圖(tu)片(pian)和(he)css抽(chou)取合(he)并后(hou)生成wxss文(wen)件(jian)，例如(ru)allmatch頁面的資源文(wen)件(jian)全(quan)在(zai)component/allmatch文(wen)件(jian)夾(jia)內，打包(bao)后(hou)生成的allmatch.wxss文(wen)件(jian)直接放在(zai)pub目錄下。

這(zhe)里我要講一下，由(you)于document、window對象(xiang)的限制，Babel runtime相關(guan)、Commonchunk、code spliting、imports-loader等插件都(dou)不可(ke)(ke)用，想(xiang)接入(ru)webpack的童鞋們要引(yin)起注意。在業務開(kai)始(shi)初期，這(zhe)可(ke)(ke)花了(le)我們好(hao)幾天在和新框(kuang)架磨合（淚奔臉(lian)）～

webpack還有一個小(xiao)問(wen)題，就(jiu)是在調試的(de)過程中會生成許多(duo)不(bu)必要的(de)文件，為了解決這(zhe)個問(wen)題，我們(men)寫了一個清理發布文件夾的(de)腳本，每次打包完成后會自動(dong)運行，清理非最終(zhong)所(suo)需(xu)文件。

一些坑和經驗：

• page需在app.json里注冊才能被當做頁面使用，利用這個現象可以創建一些公用template。
• 不要試圖去給view等標簽設置樣式，會被過濾。
• document window等都不存在于jscore 中，所以大部分涉及dom操作的框架都不能直接拿來使用。
• 介于安全性考慮，new Function，eval 會被過濾掉。
• CSS 請用BEM的形式，因為app里沒有自選擇器，為了防止微信提供的組件樣式被破壞，小程序也禁止使用層級選測器，最好提前養成好習慣。
• CSS里不要用圖片相對路徑，建議直接base64，wxml 里可以用圖片路徑。
• 關于接口，一年后服務器會只支持https協議的接口，所以，現在盡量統一為https。
• 關于登錄，目前小程序不支持cookie，而是采用前端利用微信提供的接口獲取登錄憑證code，server端再用code獲取密鑰session_key的方式對用戶數據完成加密解密，整個過程需要server端對已有的登錄體系進行再次的封裝，而本地的登錄態可以利用微信提供的本地存儲進行保存。

• 

• 關于開(kai)發(fa)工具的(de)提交預(yu)覽(lan)功能，預(yu)覽(lan)功能需要在能訪問外網時才能使用，開(kai)發(fa)網不支持使用，自(zi)己(ji)生成的(de)二(er)維碼只有自(zi)己(ji)可(ke)以體驗。這對測試造成了一定的(de)困擾。

• image組件會有默認圖片尺寸（320*240），無法完美適配寬高都不固定的多尺寸圖片。

關于我們：

短(duan)短(duan)一(yi)個多(duo)(duo)(duo)月，在(zai)小(xiao)程(cheng)序的開發過程(cheng)中我們經歷了許多(duo)(duo)(duo)，也成長(chang)很多(duo)(duo)(duo)，在(zai)此(ci)非常感謝有這(zhe)個機會(hui)發表自己的一(yi)點小(xiao)見解(jie)，若(ruo)有理解(jie)錯(cuo)誤的地方盡請更正。