之前看到很多專門招微信小程序開發(fā)的公司，而且微信團(tuán)隊(duì)也已經(jīng)為小程序開發(fā)開發(fā)了一個(gè)IDE野建，可見微信對小程序的信心之大彼城。今天在公司電腦上裝了一個(gè)最新版，界面真是十分清爽纱兑，比之前的好多了呀闻，不得不說大公司就是不一樣，微信開發(fā)的這個(gè)小程序開發(fā)IDE有win64潜慎，win32捡多，mac三個(gè)版本極其總是用戶體驗(yàn)。關(guān)于IDE的安裝铐炫，就看你們自己咯垒手。
下面是安裝好的界面:
進(jìn)入界面之前需要申請AppID,網(wǎng)上干貨很多，自行申請即可倒信。界面清爽科贬，結(jié)構(gòu)清晰，實(shí)在是開發(fā)必備鳖悠。
看過這個(gè)令人春心蕩漾的開發(fā)工具榜掌，下面就是大頭了，嗯乘综，對憎账，大頭。
首先是 app.json卡辰。app.json 是對當(dāng)前小程序的全局配置胞皱，包括了小程序的所有頁面路徑邪意、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間反砌、底部 tab 等雾鬼。
關(guān)于app.json的配置，可以參照下面的配置項(xiàng)宴树。
pages ： 接受一個(gè)數(shù)組策菜，每一項(xiàng)都是字符串，來指定小程序由哪些頁面組成森渐。
每一項(xiàng)代表對應(yīng)頁面的【路徑+文件名】信息做入，數(shù)組的第一項(xiàng)代表小程序的初始頁面。小程序中新增/減少頁面同衣，都需要對 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 欄可以切換頁面）棵癣，可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)辕翰，以及 tab 切換時(shí)顯示的對應(yīng)頁面。
Tip：
當(dāng)設(shè)置 position 為 top 時(shí)狈谊，將不會(huì)顯示 icon
tabBar 中的 list 是一個(gè)數(shù)組喜命，只能配置最少2個(gè)、最多5個(gè) tab河劝，tab 按數(shù)組的順序排序壁榕。
networkTimeout ：可以設(shè)置各種網(wǎng)絡(luò)請求的超時(shí)時(shí)間。
debug ：可以在開發(fā)者工具中開啟 debug 模式赎瞎，在開發(fā)者工具的控制臺(tái)面板牌里，調(diào)試信息以 info 的形式給出，其信息有Page的注冊务甥，頁面路由牡辽，數(shù)據(jù)更新，事件觸發(fā)?敞临。 可以幫助開發(fā)者快速定位一些常見的問題态辛。
以上就是關(guān)于小程序全局的配置。其實(shí)也就是關(guān)于小程序整體大一種配置哟绊。
pageName.json ?:?每一個(gè)小程序的頁面也可以使用pageName.json文件來對本頁面的窗口表現(xiàn)進(jìn)行配置因妙。 頁面的配置比app.json全局配置簡單得多痰憎，只是設(shè)置 app.json 中的 window 配置項(xiàng)的內(nèi)容，也即是攀涵，在app.json中對小程序的初始頁面（首頁）的樣式等進(jìn)行配置铣耘，但是在每一個(gè)單獨(dú)的頁面都需要有自己的樣式等信息，這些信息需要在pageName.json中進(jìn)行配置以故。這些頁面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)蜗细。
例如：logs.json 其實(shí)就是對logs頁面進(jìn)行了配置。
pageName.json只能設(shè)置?window?相關(guān)的配置項(xiàng)怒详，以決定本頁面的窗口表現(xiàn)炉媒，所以無需寫?window?這個(gè)鍵，如：
WXML 模板 : ?當(dāng)初使用html 來寫頁面腳本昆烁，現(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)楷兽，然后再通過一種模板語法來描述狀態(tài)和界面結(jié)構(gòu)的關(guān)系即可。 小程序的框架也是用到了這個(gè)思路华临，如果你需要把一個(gè) Hello World 的字符串顯示在界面上芯杀。 WXML 是這么寫 :
通過 {{ }} 的語法把一個(gè)變量綁定到界面上，我們稱為數(shù)據(jù)綁定雅潭。僅僅通過數(shù)據(jù)綁定還不夠完整的描述狀態(tài)和界面的關(guān)系揭厚，還需要 if/else, for等控制能力，在小程序里邊扶供，這些控制能力都用 wx: 開頭的屬性來表達(dá)筛圆。 更詳細(xì)的文檔可以參考?WXML。
WXSS(WeiXin Style Sheets) ： 是一套樣式語言椿浓，用于描述 WXML 的組件樣式太援。正如 css 描述html文件 樣式一樣闽晦。
為了適應(yīng)廣大的前端開發(fā)者，WXSS 具有 CSS 大部分特性提岔。WXSS 對 CSS 進(jìn)行了擴(kuò)充以及修改仙蛉。與 CSS 相比，WXSS 擴(kuò)展的特性有：尺寸單位和樣式導(dǎo)入碱蒙。
講真荠瘪，css 我都不是很熟悉，看來以后有的忙了赛惩。
JS 交互邏輯 ：在小程序里邊哀墓，我們就通過編寫 JS 腳本文件來處理用戶的操作。
點(diǎn)擊 button 按鈕的時(shí)候喷兼，我們希望把界面上 msg 顯示成 "Hello World"篮绰，于是我們在 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翎承。
