微信小程序開發(fā)入門

點擊數(shù)：2562018-05-09 09:19:57　來源: 藝之都網(wǎng)絡(luò)公司

微信小程序，簡單的開發(fā)，卻接近app的體驗，無需下載，掃碼打開，推廣成本大大降低，手機(jī)上還不用安裝太多應(yīng)用，相信不久后，各家做得好些的app都會開發(fā)微信小程序。這是新一輪的競爭的開始。如果你正在學(xué)習(xí)react native之類的跨平臺app開發(fā)的話，不妨先花點時間來學(xué)習(xí)下微信小程序的開發(fā)，或許過段時間后，你會想丟掉原來react native之類的想法。

微信小程序的開發(fā)，用的主要還是js語言，微信為自己定義了一套框架專門用來做小程序的開發(fā)，叫MINA。接下去我們要一起學(xué)習(xí)的就是這個框架。

先記錄幾個網(wǎng)址：

1. 官方簡易教程、和API說明
2. 開發(fā)工具的下載地址
3. 開發(fā)工具破解
4. 可以參考和學(xué)習(xí)別人的代碼

關(guān)于微信小程序的介紹本文就不再多說了，既然讀者點進(jìn)來閱讀本文，說明你已經(jīng)有了一定的興趣和了解，這里就不占篇幅解釋了，貼幾個介紹上來有興趣的讀者可以自己看看。
《微信小程序是誰的“通往財富自由之路”？》
《微信小程序，一個有局限的類似 React Native 輪子！》
《看起來很 Q 的微信小程序，背后藏著什么樣的野心？》

一、開發(fā)工具

1、開發(fā)工具其實是用js開發(fā)的。（目前版本：0.9.092300）

很多人可能不知道js還能開發(fā)窗口應(yīng)用。有興趣的讀者可以先了解下Electron，用nodejs寫桌面應(yīng)用，其原理還是類似chrominum瀏覽器，也就是在外套一層殼，里面是個網(wǎng)頁，只不過做了些優(yōu)化請用戶感知不到是個網(wǎng)頁，而更像個窗口應(yīng)用。它提供了非常豐富的操作系統(tǒng)層面的api然后用js來調(diào)用并創(chuàng)建桌面應(yīng)用程序。
這一次開放的這個微信小程序的開發(fā)工具，跟之前的公眾號開發(fā)調(diào)試工具一樣體驗上非常相似，網(wǎng)上也有牛人分析這些工具就是基于Electron開發(fā)的。跟之前一樣，這個工具也是要掃碼登錄，玩微信小程序開發(fā)的讀者，大部分應(yīng)該之前或多或少做過公眾號開發(fā)的，至少有一定的js基礎(chǔ)，如果沒有，倒是建議您學(xué)習(xí)一下js開發(fā)，由于h5的盛行，和nodejs后臺服務(wù)開發(fā)的興起，及跨平臺的移動開發(fā)（如react native）的流行等，js已經(jīng)成為了是個程序員就應(yīng)該至少掌握一點的語言。

2、下載好工具

如果你手中已經(jīng)有一個微信小程序的內(nèi)測資格，或者讀者在看這篇文章的時候權(quán)限已經(jīng)放開的話，那么你可以跳過這一段，直接點開上面的工具下載地址下載打開就可以了。上面給出了一個破解方法的地址，讀者可以用它來突破微信內(nèi)測資格的限制。替換相應(yīng)的文件即可。破解其實不難，因為上面提到過這個工具是用js開發(fā)的，js是不用編譯就可以運(yùn)行的語言，所以代碼藏不住。怎么查看代碼？window用戶可以進(jìn)入程序目錄，查看package.nw\app\dist。mac用戶可以點開應(yīng)用程序目錄，右擊->顯示包內(nèi)容->Contents->Resources->app.nw->app->dist，這里就是工具的源代碼。做過react + flux開發(fā)的讀者一眼看到這目錄結(jié)構(gòu)，可能會覺得很熟悉（actions, components, dispatcher, stores...），沒錯，它就是用react + flux架構(gòu)開發(fā)的，具體的結(jié)構(gòu)本篇文章暫不討論，之前做過這方面的開發(fā)，對它的開發(fā)方式非常推崇。回到本文的主題上來，這篇文章主要是一個入門和準(zhǔn)備。如果讀者沒有申請到可用的小程序權(quán)限的話，可以打開上文提到的破解文件地址，下載相應(yīng)的文件替換到相應(yīng)的目錄即可開發(fā)。

二、跑起第一個微信小程序

1、創(chuàng)建項目：

點擊添加項目，下一步，如果是已經(jīng)有微信小程序的appId的用戶（請用官方提供的原版，不需要用破解版）填入appId，用破解版的用戶appId隨便填都行。然后寫上項目名，再選個目錄就可以創(chuàng)建一個demo了。
進(jìn)入項目后，開發(fā)工具會自動編譯、運(yùn)行demo，這時展現(xiàn)在讀者眼前的就是第一個hello world程序了。

2、學(xué)習(xí)源碼
打開代碼的目錄，第一眼看到的就是這三個最關(guān)鍵的文件，app.js、app.json、app.wxss，這些是每個微信小程序必不可少的文件，必須放在項目的根目錄。
（1）app.js是整個程序的入口js文件。
App函數(shù)是用來注冊的，傳入?yún)?shù)生成一個主程序，它定義了整個程序相關(guān)的一些生命周期，傳入json對象作為參數(shù)。先來理解一下一個微信小程序的生命周期，主要三種狀態(tài)，初始化->顯示->隱藏->顯示->… 后面可以無限循環(huán)。當(dāng)用戶點擊小程序圖標(biāo)時，會先初始化一些數(shù)據(jù)，其中onLaunch會在小程序初始化完成時調(diào)用，這時還沒有page生成。接著程序從無或者從后臺進(jìn)入到前臺（用戶看得到）的時候，onShow會被觸發(fā)，如果用戶點擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信，這里onHide會被觸發(fā)。后面如果再進(jìn)入這個小程序，onShow會被再次觸發(fā)。
App生成的對象是全局的，可以通過
var appInstance = getApp();
來拿到app實例。globalData是App里定義的全局都可以使用的數(shù)據(jù)對象。App函數(shù)在全局只能調(diào)用一次，而且必須在app.js中調(diào)用。
當(dāng)onShow被調(diào)用后，全局就至少會有一個頁面了，這時可以通過var curPage = getCurrentPage();來拿到當(dāng)前顯示在用戶眼前的頁面。這里要注意一個地方，onLaunch只是數(shù)據(jù)的初始化，還沒有頁面生成，所以這個函數(shù)里不要去調(diào)用getCurrentPage函數(shù)。

（2）app.json用來定義全局的一些配置參數(shù)

相關(guān)的參數(shù)及意義，上方已經(jīng)在注釋里說明，更新的配置說明，可以參考微信官方文檔的配置詳情。在這文檔里，參看幾個字段和它的含意就行，下方的tabBar之類的，在之后的文章中會詳細(xì)介紹。

（3）app.wxss則是全局的樣式定義
wxss文件就相當(dāng)于css文件，用來定義一些頁面的樣式。理解這一點，再來看app.wxss就可以知道，它定義的應(yīng)該是一些整個app的頁面中，共同用到的一些樣式。

3、四類文件的說明
一個框架頁面由四個文件組成，分別是js、wxml、wxss、json，它們主要分為四層。js主要用來實現(xiàn)程序的邏輯層和數(shù)據(jù)層，wxml和wxss用來實現(xiàn)程序的view視圖層，json就是用來寫一些配置信息。它們的關(guān)系是，邏輯層處理數(shù)據(jù)后，返回到視圖層顯示出來，而視圖層的用戶操作事件反饋回邏輯層。雖然有這么多文件，但最后程序發(fā)布的時候，所有的文件都會被編譯成js文件，并合并到同一個js文件里面、壓縮。需要注意的是，要跟平時做h5開發(fā)區(qū)別開發(fā)，雖然js語法相通，但像document，window這些瀏覽器的全局對象是用不了的，這一點要特別注意。但有很多用wx來引用的接口，這些接口目測就是微信從底層暴露出來給微信小程序調(diào)用的吧。

4、開發(fā)工具的其它說明
上文中已經(jīng)講了不少跟這個工具相關(guān)的使用，這里再來補(bǔ)充幾點工具的介紹吧。
這是一個集成了coding，編譯調(diào)試運(yùn)行、簡單項目管理的一個工具，可以把它當(dāng)成一個編輯器來用，網(wǎng)上有人推薦用sublime等外部工具，不過筆者不太建議。不管怎么說，切換來切換去的也怪麻煩，而且微信開發(fā)這個工具，要集成coding的功能，自然有它自己的想法，可能是要定義一套比較完整的開發(fā)流程，讓開發(fā)者不用為開發(fā)工具煩惱。如下圖：

左側(cè)有幾個tab，第一個，“編輯”就是給開發(fā)者管理文件、編寫代碼的，coding時還會有代碼提示，這功能已經(jīng)足夠強(qiáng)大了。如果你之前已經(jīng)習(xí)慣了用gulp、webpack之類的集成工具的話，也沒關(guān)系，因為這個工具已經(jīng)幫你做好這些事情了。你不用去寫一堆gulpfile等的配置文件，這工具已經(jīng)有一個集成化的功能，點擊編譯就可以完成所有的編譯操作，可能你會說，沒辦法watch，這個我也還沒找到方法，可能得去改它的源碼吧。后面有機(jī)會再去研究，有結(jié)果，還會繼續(xù)分享給大家。

第二個tab，非常像一個小型的chrome瀏覽器，只是沒有地址欄。熟悉前端開發(fā)的讀者一看右邊的調(diào)試就會感覺非常親切，這不就是chrome的調(diào)試器嗎... 這個tab被激活時，最左側(cè)下方會多出幾個按鈕，第一個是重啟，就是重新編譯的功能、及模擬小程序重新被打開的過程；第二個按鈕，切換到后臺，這個就可以模擬我們上面講到的onShow，和onHide的生命周期；第三個按鈕用來清除緩存。

最后，介紹一下第三個tab，它就是用來處理最后的流程：打包、發(fā)布。后面講到發(fā)布流程的時候，會回來講到這個界面。