之前看到很多專門招微信小程序開發(fā)的公司，而且微信團(tuán)隊(duì)也已經(jīng)為小程序開發(fā)開發(fā)了一個(gè)IDE，可見微信對(duì)小程序的信心之大。今天在公司電腦上裝了一個(gè)最新版，界面真是十分清爽，比之前的好多了，不得不說大公司就是不一樣，微信開發(fā)的這個(gè)小程序開發(fā)IDE有win64，win32，mac三個(gè)版本極其總是用戶體驗(yàn)。關(guān)于IDE的安裝，就看你們自己咯。

下面是安裝好的界面:

進(jìn)入界面之前需要申請(qǐng)AppID,網(wǎng)上干貨很多，自行申請(qǐng)即可。界面清爽，結(jié)構(gòu)清晰，實(shí)在是開發(fā)必備。

IDE

看過這個(gè)令人春心蕩漾的開發(fā)工具，下面就是大頭了，嗯，對(duì)，大頭。

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

首先是 app.json。app.json 是對(duì)當(dāng)前小程序的全局配置，包括了小程序的所有頁(yè)面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等。

關(guān)于app.json的配置，可以參照下面的配置項(xiàng)。

配置項(xiàng)

pages ： 接受一個(gè)數(shù)組，每一項(xiàng)都是字符串，來指定小程序由哪些頁(yè)面組成。

每一項(xiàng)代表對(duì)應(yīng)頁(yè)面的【路徑+文件名】信息，數(shù)組的第一項(xiàng)代表小程序的初始頁(yè)面。小程序中新增/減少頁(yè)面，都需要對(duì) pages 數(shù)組進(jìn)行修改。文件名不需要寫文件后綴，因?yàn)榭蚣軙?huì)自動(dòng)去尋找路徑下?.json,?.js,?.wxml,?.wxss?四個(gè)文件進(jìn)行整合。

window ：用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

tabBar ?：如果小程序是一個(gè)多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面），可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。

Tip：

當(dāng)設(shè)置 position 為 top 時(shí)，將不會(huì)顯示 icon

tabBar 中的 list 是一個(gè)數(shù)組，只能配置最少2個(gè)、最多5個(gè) tab，tab 按數(shù)組的順序排序。

tabBar屬性

list屬性

networkTimeout ：可以設(shè)置各種網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間。

屬性

debug ：可以在開發(fā)者工具中開啟 debug 模式，在開發(fā)者工具的控制臺(tái)面板，調(diào)試信息以 info 的形式給出，其信息有Page的注冊(cè)，頁(yè)面路由，數(shù)據(jù)更新，事件觸發(fā)?。 可以幫助開發(fā)者快速定位一些常見的問題。

以上就是關(guān)于小程序全局的配置。其實(shí)也就是關(guān)于小程序整體大一種配置。

pageName.json ?:?每一個(gè)小程序的頁(yè)面也可以使用pageName.json文件來對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置。 頁(yè)面的配置比app.json全局配置簡(jiǎn)單得多，只是設(shè)置 app.json 中的 window 配置項(xiàng)的內(nèi)容，也即是，在app.json中對(duì)小程序的初始頁(yè)面（首頁(yè)）的樣式等進(jìn)行配置，但是在每一個(gè)單獨(dú)的頁(yè)面都需要有自己的樣式等信息，這些信息需要在pageName.json中進(jìn)行配置。這些頁(yè)面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。

例如：logs.json 其實(shí)就是對(duì)logs頁(yè)面進(jìn)行了配置。

pageName.json只能設(shè)置?window?相關(guān)的配置項(xiàng)，以決定本頁(yè)面的窗口表現(xiàn)，所以無需寫?window?這個(gè)鍵，如：

pageName.json

WXML 模板 : ?當(dāng)初使用html 來寫頁(yè)面腳本，現(xiàn)在你開發(fā)微信小程序就要寫 wxml。其實(shí)他們很相似，標(biāo)簽，屬性都如出一轍 。但是還是有很多不同的地方。

例如：標(biāo)簽名字，在 wxml 中我們使用的是view ，button，text 等標(biāo)簽。另外微信團(tuán)隊(duì)還給我們封裝好了包括地圖，視頻，音頻在內(nèi)的許多組件。除了標(biāo)簽 名字，還有一些表達(dá)式性質(zhì)的屬性：wx : if 以及｛｛｝｝這樣的表達(dá)式。

為了不讓 JS 直接操控 DOM，JS只需要管理狀態(tài)，然后再通過一種模板語(yǔ)法來描述狀態(tài)和界面結(jié)構(gòu)的關(guān)系即可。 小程序的框架也是用到了這個(gè)思路，如果你需要把一個(gè) Hello World 的字符串顯示在界面上。 WXML 是這么寫 :

數(shù)據(jù)綁定

通過 {{ }} 的語(yǔ)法把一個(gè)變量綁定到界面上，我們稱為數(shù)據(jù)綁定。僅僅通過數(shù)據(jù)綁定還不夠完整的描述狀態(tài)和界面的關(guān)系，還需要 if/else, for等控制能力，在小程序里邊，這些控制能力都用 wx: 開頭的屬性來表達(dá)。 更詳細(xì)的文檔可以參考?WXML。

WXSS(WeiXin Style Sheets) ： 是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式。正如 css 描述html文件 樣式一樣。

為了適應(yīng)廣大的前端開發(fā)者，WXSS 具有 CSS 大部分特性。WXSS 對(duì) CSS 進(jìn)行了擴(kuò)充以及修改。與 CSS 相比，WXSS 擴(kuò)展的特性有：尺寸單位和樣式導(dǎo)入。

講真，css 我都不是很熟悉，看來以后有的忙了。

JS 交互邏輯 ：在小程序里邊，我們就通過編寫 JS 腳本文件來處理用戶的操作。

wxml

js文件

點(diǎn)擊 button 按鈕的時(shí)候，我們希望把界面上 msg 顯示成 "Hello World"，于是我們?cè)?button 上聲明一個(gè)屬性: bindtap ，在 JS 文件里邊聲明了 clickMe 方法來響應(yīng)這次點(diǎn)擊操作。

此外你還可以在 JS 中調(diào)用小程序提供的豐富的 API，利用這些 API 可以很方便的調(diào)起微信提供的能力，例如獲取用戶信息、本地存儲(chǔ)、微信支付等。

沒想到入門入了這么久，微信小程序的開發(fā)，應(yīng)該會(huì)是一個(gè)不錯(cuò)的方向，希望這個(gè)入門能給你幫助。

Then，that’s all，thank you。