小程序?qū)W習(xí)資料收集，開發(fā)者工具的下載及初覽，代碼結(jié)構(gòu)與基本配置方法，及第一個(gè) hello world
概況
微信小程序是騰訊推出的一種依托于微信，不用下載，通過(guò)掃碼、公眾號(hào)跳轉(zhuǎn)，群聊點(diǎn)擊就能使用的應(yīng)用。由于項(xiàng)目需要，及出于對(duì)移動(dòng)端另一種應(yīng)用開發(fā)的好奇，帶著老大的殷切希望，我也投入了小程序的學(xué)習(xí)。
微信小程序在一些不需要多次使用，不希望耗時(shí)下載的場(chǎng)景具有優(yōu)勢(shì)，同時(shí)對(duì)于開發(fā)者來(lái)說(shuō)，全中文的文檔和開發(fā)者社區(qū)也非常友好
小程序注冊(cè)與開發(fā)工具安裝
- 注冊(cè)，參照官方教程申請(qǐng)小程序賬號(hào)。官方指引非常清楚，按照步驟一步步做即可。
官方注冊(cè)指引
2.進(jìn)入官方文檔頁(yè)面，點(diǎn)擊工具，下載開發(fā)者工具。 下載地址
開發(fā)者工具下載
3.下載完成后，安裝登錄即可
開發(fā)工具初覽
微信小程序開發(fā)者工具的界面和大部分 IDE 一樣，包含編輯器，調(diào)試器，上方有工具欄，左側(cè)還有一個(gè)模擬器。
代碼結(jié)構(gòu)
根目錄下
- project.config.json 負(fù)責(zé)保存開發(fā)者個(gè)人對(duì)于編輯器的使用偏好
- app.js 適用于全局的邏輯交互
- app.json 適用于全局的設(shè)置，所有pages必須在此注冊(cè)，tabBar，navigationStyle 在此設(shè)置，還可以設(shè)置適用于所有界面的窗體設(shè)置，如窗體顏色，背景色，navigationBar色等
- app.wxss 適用于全局的樣式
pages下有
每一個(gè)界面各有一個(gè)文件夾，里面有四個(gè)文件
- *.js 文件存放頁(yè)面中所需要的交互邏輯
- *.wxml 頁(yè)面控件結(jié)構(gòu)，和android中的 xml 功能上有些類似（都是編寫控件的相對(duì)位置，大小，顏色等），但 wxml 的語(yǔ)法更類似于 HTML
- *. wxss 頁(yè)面樣式，具有css 大部分的特性
- *.json 僅適用于該界面的窗體設(shè)置，與app.json沖突，以頁(yè)面設(shè)置為準(zhǔn)
基本配置方法
在需要的時(shí)候可以更改配置，以獲得想要的效果
-
全局配置：在 app.json 可以進(jìn)行全局配置，查詢文檔可得配置項(xiàng)列表。
其中，除了必須的 pages 外，比較常用的有 window (窗口樣式)， tabBar （底部tab欄）， networkTimeout (網(wǎng)絡(luò)超時(shí)時(shí)間)
注意：首頁(yè)必須放在 pages 項(xiàng)第一個(gè)
app.json部分配置項(xiàng)列表 -
頁(yè)面配置：在各頁(yè)面的 *.json 文件中可以設(shè)置部分 window 內(nèi)容，包括 navigationBar 背景和字體顏色等
頁(yè)面部分配置項(xiàng)列表（不全）
請(qǐng)查收您的 Hello World
創(chuàng)建一個(gè)新的小程序，選擇快速開始模板，無(wú)需更改配置項(xiàng)，直接編譯代碼，就能得到第一個(gè)微信小程序的 Hello World 啦！一行代碼沒(méi)寫就白得一個(gè) hello world，這種感覺(jué)和當(dāng)初初學(xué) android 第一次編譯時(shí)的感覺(jué)很相似呢。總之，搭建開發(fā)環(huán)境、編寫第一個(gè) hello world 的過(guò)程都比較簡(jiǎn)單而流暢。
