從零開始學微信小程式開發－－－2、小程式專案的建立、相關檔案的作用及小程式IDE
一、建立一個小程式專案
1、下載安裝微信web開發者工具，目前最新版本是1.02.1811141。
2、開啟
，掃碼登入，
3、選擇小程式專案
4、點選專案管理旁邊的+
5、如果你有小程式賬號會有一個APPID，詳情見小程式簡易教程申請賬號那一節，如果還沒有，可以點選下方的“小程式”使用測試號，選好專案目錄，輸入專案名稱，初學者建議勾選
點選確定然後進入IDE，在專案目錄下就會生成如下右圖所示的檔案:
二、IDE
開發微信小程式開發工具可以用小程式開發者工具，也可以用Sublime(輕便)或WebStorm(更能全而且強大)。本節介紹小程式開發者工具。
預設模擬器、編輯器和偵錯程式都是選中狀態，介面如下：
在Help中可以快速開啟幫助文件
編譯程式碼可以點選編譯圖示，也可以快捷鍵 ctrl+s
在左上方可以選擇模擬的機子和網路環境等
三、相關檔案及其作用：
一開始的目錄結構（如果沒勾選“建立普通快速啟動模板”則這裡是沒有目錄和檔案的，點選上方的"+"建立）如下圖所示，下面說說每個目錄及檔案的作用：
一個小程式其實是由描述整體的app（唯一）和描述各個頁面的page（可以是多個）組成，描述整體的app放在根目錄下，由三個檔案組成（包括 app.js、app.json、app.wxss，其中前兩者是必需有的）；小程式頁面由四個檔案組成（包括XXX.js、XXX.wxml、XXX.json、XXX.wxss，其中前兩者必需有）注意：為了方便開發者減少配置項
app.json檔案用於對小程式進行整體（全域性）配置，在這裡配置了頁面檔案的路徑、視窗表現、網路超時時間、多tab等資訊，下表是簡易教程（對每個配置項都有詳細的講解，可以點進去看一下，我再寫只會更加多餘）中對其配置項的列舉：
app.json 配置項列表
| 屬性 | 型別 | 必填 | 描述 | 支援版本 |
|---|---|---|---|---|
| pages | String Array | 是 | 頁面路徑列表 | |
| window | Object | 否 | 全域性的預設視窗表現 | |
| tabBar | Object | 否 | 底部 tab 欄的表現 |
|
| networkTimeout | Object | 否 | 網路超時時間 | |
| debug | Boolean | 否 | 是否開啟 debug 模式，預設關閉 | |
| functionalPages | Boolean | 否 | 是否啟用外掛功能頁，預設關閉 | 2.1.0 |
| subpackages | Object Array | 否 | 分包結構配置 | 1.7.3 |
| workers | String | 否 | Worker 程式碼放置的目錄 |
1.9.90 |
| requiredBackgroundModes | String Array | 否 | 需要在後臺使用的能力，如「音樂播放」 | |
| plugins | Object | 否 | 使用到的外掛 | 1.9.6 |
| preloadRule | Object | 否 | 分包預下載規則 | 2.3.0 |
| resizable | Boolean | 否 | iPad 小程式是否支援螢幕旋轉，預設關閉 | 2.3.0 |
| navigateToMiniProgramAppIdList | String Array | 否 | 需要跳轉的小程式列表，詳見 wx.navigateToMiniProgram | 2.4.0 |
| usingComponents | Object | 否 | 全域性自定義元件配置，開發者工具 1.02.1810190 及以上版本支援此欄位 |
project.config.json是小程式根目錄下的一個工具配置檔案，這裡放的是針對開發者喜好而做的一些個性化配置，如：介面顏色、編譯配置、上傳程式碼時自動壓縮等，當換一臺電腦或重灌工具的時候，只要載入對應小程式專案的這個這個檔案，開發者工具就會自動幫我們恢復到開發這個專案時候的個性化配置。
page.json是pages/logs 目錄下的 logs.json這類和小程式頁面相關的頁面配置檔案，也就是說，我們也已在 app.json中配置整個頁面的整體風格（如色調等），在page.json中配置某一個頁面所特有的屬性（比如，一些頁面允許下拉重新整理，而另一些不允許，那就要單獨在page.json中配置；又如：我的整個小程式的色調都是橙色，在某一個頁面我想弄成紫色，那這時候就要為這個頁面單獨配置了）當有頁面的配置項時，就會覆蓋app.json中相同的配置項，如果沒有指定的配置項，則在該頁面中使用app.json中的配置。
wxml模板：在網頁程式設計中，採用的是HTML+CSS+JS的組合，HTML描述的是整個頁面的骨架，CSS描述頁面的外觀，JS描述頁面的行為（負責與使用者進行互動），在小程式中，XXX.wxml就充當了HTML的角色，看下面這段程式碼：
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>WXML程式碼和HTML程式碼都有元素（標籤）、文字（標籤裡面的內容）、屬性（如src、class、bindtap等），那麼它們有什麼不同之處呢？
① 標籤名不一樣
如<view>相當於HTML 中的<div>,<image>相當於HTML 中的<img>等，這些要靠學習和實踐的過程中慢慢地積累！更多元件請參考簡易教程中的 小程式的能力。
②檔案結構不一樣
HTML檔案主要由<html><head></head><body></body></html>組成，HTML的元資料、引入CSS檔案或JS檔案都是在<head></head>中，<body></body>中放的是文件的所有內容（比如文字、超連結、影象、表格和列表等）；而WXML中預設的根節點為<page></page>（這種說法可能不太恰當，只是我覺得方便理解，其實page是wxml的頁面構造器），並且不用在WXML檔案中引用CSS檔案和JS檔案。
③WXML中多了一些諸如wx:if 這樣的屬性以及 {{ }} 這樣的表示式
（下面這段話引用自微信小程式的簡易教程）
在網頁的一般開發流程中，我們通常會通過 JS 操作 DOM (對應 HTML 的描述產生的樹)，以引起介面的一些變化響應使用者的行為。例如，使用者點選某個按鈕的時候，JS 會記錄一些狀態到 JS 變數裡邊，同時通過 DOM API 操控 DOM 的屬性或者行為，進而引起介面一些變化。當專案越來越大的時候，你的程式碼會充斥著非常多的介面互動邏輯和程式的各種狀態變數，顯然這不是一個很好的開發模式，因此就有了 MVVM 的開發模式（例如 React, Vue），提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM，JS 只需要管理狀態即可，然後再通過一種模板語法來描述狀態和介面結構的關係即可。
小程式的框架也是用到了這個思路，如果你需要把一個 Hello World 的字串顯示在介面上。
WXML 是這麼寫 :
<text>{{msg}}</text>
JS 只需要管理狀態即可:
this.setData({ msg: "Hello World" })
通過 {{ }} 的語法把一個變數繫結到介面上，我們稱為資料繫結。僅僅通過資料繫結還不夠完整的描述狀態和介面的關係，
還需要 if/else, for等控制能力，在小程式裡邊，這些控制能力都用 wx: 開頭的屬性來表達。
更詳細的文件可以參考 WXMLwxss樣式：wxss和css非常相似，但小程式的wxss做了一些擴充和修改，並且wxss並不是支援css的所有特性的。
①新增了尺寸單位rpx，在寫CSS樣式的時候需要考慮到手機裝置的螢幕會有不同的寬度和裝置畫素比，採用一些技巧來換算一些畫素單位，但如果用rpx，換算工作交給小程式底層去完成即可，它會自適應不同手機螢幕大小（換算採用的浮點數運算，所以運算結果會和預期結果有一點點偏差）
螢幕尺寸：螢幕對角線的距離；
DPI: 每英寸包含的畫素點數（px）；
px指的不是物理畫素，而是手機中的物理解析度,可以理解為一個點，與長度無關，點是沒有大小的；
pt邏輯解析度（視覺上看到的），與螢幕尺寸有關，可以理解為長度單位（其實與移動裝置的柵格渲染有關），1pt可以由1px構成，也可以由兩個或多個px組成；
ppi(pixels per inch)所表示的是每英寸長度所能夠排列的畫素(pixel)的數目。因此PPI數值越高，即代表顯示屏能夠以更高的密度顯示影象。當然，顯示的密度越高，擬真度就越高。pixels per inch是影象解析度的單位，影象ppi值越高，單位面積的畫素數量就越多，所以畫面的細節就越豐富。
Reader指的是每個pt中包含了多少px，如iPhone6下2個px才構成1個pt，這就是為什麼模擬器下iPhone6的解析度是375而設計圖一般給750畫素；
視網膜屏：解析度超過人眼識別極限的高解析度螢幕(單位畫素密度下，畫素個數達到肉眼可見的極限，再多也不會更加清晰)
視網膜(Retina)螢幕是蘋果公司"發明"的一個營銷術語。並在部分移動產品使用。蘋果這個術語用在iphone 4手機上，自此一直沿用，它將960×640的畫素壓縮到一個3.5英寸的顯示屏內。也就是說，該螢幕的畫素密度達到326畫素/英寸(ppi)，稱之為"視網膜螢幕"。
rpx會自適應不同解析度的裝置
- 以iPhone6的物理畫素750*1334為視覺稿進行設計，而在小程式中使用rpx為單位
- iPhone6(@2x) 下 1px = 1rpx =0.5pt //以iPhone6的尺寸---750畫素的寬做效果圖，如果效果圖的寬為200px，那麼在小程式中就應當用100px或200rpx
- 使用rpx時小程式會自動在不同的解析度下進行轉換，而使用px則不能；
②提供了全域性樣式和區域性樣式（與app.json和page.json中的配置一個意思，不再贅述）
③只支援css的部分選擇器，詳見 WXSS
JS主要用於和使用者進行互動（如效應使用者的點選、獲取使用者的位置等），在小程式中也是通過編寫JS指令碼檔案來處理使用者的操作（參考 WXML - 事件）、呼叫API以引用微信提供的能力（本地儲存、微信支付等，參考小程式的API）。
<view>{{ clk }}</view>
<button bindtap="clickMe">Please Click Me</button>
當用戶點選 button 按鈕的時候，我們希望把介面上 clk 顯示成 "Hello World"，於是我們在 button 上宣告一個屬性: bindtap ，在 app.js裡宣告 clickMe 方法來響應這次點選操作：
Page({
clickMe: function() {
this.setData({ clk: "Hello World" })
}
})
app.js是小程式的指令碼檔案，可以在這裡放監聽並處理小程式的宣告周期函式、宣告全域性變數等的指令碼；
index.js是頁面指令碼檔案，在這裡放監聽並不理頁面的生命週期、獲取小程式例項、宣告並處理資料、響應頁面互動事件等的指令碼。
（不過index.js和logs.js的角色區別，我還沒明白，等弄明白了再回來更新吧）
四、小程式的啟動過程（基本摘自API文件，，API文件hin重要啊！沒事多翻翻）
在微信客戶端開啟小程式前，先把整個小程式的程式碼下載到本地，然後通過app.json中的pages欄位（對應的是頁面路徑組成的陣列）找到小程式中所有相關頁面的路徑，如下面這個配置說明在 QuickStart 專案定義了兩個頁面（分別為pages/index/目錄下的以index為名的檔案 和 在pages/logs/目錄下的以logs為名的檔案） pages 欄位的第一個頁面即為小程式的首頁（開啟小程式首先會看到的頁面），客戶端把小程式首頁程式碼裝載進來後通過底層機制渲染出首頁頁面，
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
小程式啟動之後，在 app.js 定義的 App 例項的 onLaunch 回撥會被執行（整個小程式只有一個 App 例項，是全部頁面共享的，參考 註冊程式 App ）:
App({
onLaunch: function () {
// 小程式啟動之後 觸發
}
})
程式與頁面
你可以觀察到 pages/logs/logs 下其實是包括了4種檔案的，微信客戶端會先根據 logs.json 配置生成一個介面，頂部的顏色和文字你都可以在這個 json 檔案裡邊定義好。緊接著客戶端就會裝載這個頁面的 WXML 結構和 WXSS 樣式。最後客戶端會裝載 logs.js，你可以看到 logs.js 的大體內容就是:
Page({
data: { // 參與頁面渲染的資料
logs: []
},
onLoad: function () {
// 頁面渲染後 執行
}
})
Page 是一個頁面構造器，這個構造器就生成了一個頁面。在生成頁面的時候，小程式框架會把 data 資料和 index.wxml 一起渲染出最終的結構，於是就得到了你看到的小程式的樣子。
在渲染完介面之後，頁面例項就會收到一個 onLoad 的回撥，你可以在這個回撥處理你的邏輯。
持續更新ing..
參考資料：
小程式API文件：https://developers.weixin.qq.com/miniprogram/dev/api/