一. 微信小程序的項目結構
1. .json 后綴的 JSON 配置文件
1.1 小程序配置 app.json
app.json是對當前小程序的全局配置，包括小程序的所有頁面路徑、界面表現、網絡超時、底部tab等，常見的配置關鍵字如下，更多的配置見小程序配置app.json
- pages字段 —— 用于描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄，數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對 pages 數組進行修改。
- window字段 —— 小程序所有頁面的頂部背景顏色，文字顏色定義在這里的。
1.2 工具配置 project.config.json
開發者在開發工具上做的個性化配置都會被記錄在這個.json文件中，導入一個工程時，工具會根據這個文件設置對應的個性化設置。文件中的key值對應的作用還有待查詢。
1.3 頁面配置 page.json
每個頁面的個性化配置信息都存放在頁面對應的.json文件中，配置內容和app.json中key值為window一樣，page.json中的配置項會覆蓋app.json中window的配置項，更多的配置見小程序配置app.json
2. .wxml 后綴的頁面結構文件
類似于.html文件，由標簽、屬性等構成，不一樣的地方如下：
- 使用的標簽不一樣，微信小程序框架為我們提供了新的標簽，更多詳細的組件
- 小程序提倡把渲染和邏輯分開，簡單地說就是不讓JS操作DOM，只負責管理狀態，然后再通過一種模板語法來描述狀態和界面結構的關系即可。通過
{{}}把一個變量綁定到一個標簽上，但是只有變量還是不夠的，所以小程序還提供了if/else, for等控制能力，在小程序里邊，這些控制能力都用 wx: 開頭的屬性來表達，更多詳細的控制能力
3. .wxss 后綴的頁面樣式文件
.wxss有css的大部分特性，同時.wxss也做了擴展和修改，詳細的.wxss
- 新增尺寸單位
rpx，不需要開發者去做換算，小程序底層會去做換算 - 提供了全局樣式和局部樣式，和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作為全局樣式，會作用于當前小程序的所有頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。
- 此外 WXSS 僅支持部分 CSS 選擇器
4. .js 后綴的頁面交互邏輯
響應用戶交互、邏輯代碼都存放在.js中。同時微信還提供了很多API，可以讓開發者可以很方便的調用起微信提供的功能，如獲取用戶信息，本地存儲，支付功能等，更詳細的API文檔.
5. 小程序文件結構
小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。
5.1 app文件結構
- app.js：小程序邏輯
- app.json：小程序的公共配置
- app.wxss：小程序的公共樣式表
5.2 page文件結構
- page.json：頁面配置
- page.js：頁面邏輯
- page.wxml：頁面結構
- page.wxss：頁面樣式
注意：為了方便開發者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名。
二. 微信小程序的能力
1. 小程序啟動
微信客戶端在打開小程序之前，會把整個小程序的代碼包下載到本地，緊接著通過 app.json 的 pages 字段就可以知道你當前小程序的所有頁面路徑，而寫在 pages 字段的第一個頁面就是這個小程序的首頁(打開小程序看到的第一個頁面)。
2. 小程序的頁面加載
微信客戶端會先根據 page.json 配置生成一個界面，頂部的顏色和文字你都可以在這個 json 文件里邊定義好。緊接著客戶端就會裝載這個頁面的 WXML 結構和 WXSS 樣式。最后客戶端會裝載 page.js。
3. 小程序的注冊
App() 函數用來注冊一個小程序。接受一個 object 參數，其指定小程序的生命周期函數(如下)等。此外開發者還可以添加任意的函數或數據到 Object 參數中，用this可以訪問。
- onLaunch：生命周期函數--監聽小程序初始化，當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次），函數參數
- onShow：生命周期函數--監聽小程序顯示，當小程序啟動，或從后臺進入前臺顯示，會觸發 onShow，函數參數
- onHide：生命周期函數--監聽小程序隱藏，當小程序從前臺進入后臺，會觸發 onHide
- onError：錯誤監聽函數，當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 并帶上錯誤信息
- onPageNotFound：頁面不存在監聽函數，當小程序出現要打開的頁面不存在的情況，會帶上頁面信息回調該函數，函數參數
全局的getApp()函數可以用來獲取到小程序實例，但是需要注意：
- 不要在定義于
App()內的函數中調用getApp()，使用this就可以拿到app實例。 - 通過
getApp()獲取實例之后，不要私自調用生命周期函數。
4. 小程序頁面注冊
Page()函數用來注冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。
4.1 初始數據
- data：頁面的初始數據
初始化數據將作為頁面的第一次渲染。data 將會以 JSON 的形式由邏輯層傳至渲染層，所以其數據必須是可以轉成 JSON 的格式：字符串，數字，布爾值，對象，數組。
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
4.2 生命周期
- onLoad: 頁面加載，一個頁面只會調用一次，可以在 onLoad 中獲取打開當前頁面所調用的 query 參數。
- onShow: 頁面顯示，每次打開頁面都會調用一次。
-
onReady: 頁面初次渲染完成，一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。對界面的設置如
wx.setNavigationBarTitle請在onReady之后設置。 -
onHide: 頁面隱藏，當
navigateTo或底部tab切換時調用。 -
onUnload: 頁面卸載，當
redirectTo或navigateBack的時候調用。
page生命周期
4.3 頁面相關事件處理函數
-
onPullDownRefresh: 下拉刷新，監聽用戶下拉刷新事件，當處理完數據刷新后，
wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。 - onReachBottom: 上拉觸底，監聽用戶上拉觸底事件，在觸發距離內滑動期間，本事件只會被觸發一次。
- onPageScroll: 頁面滾動，監聽用戶滑動頁面事件，頁面在垂直距離上滾動的距離會包含在函數的對象參數的scrollTop字段中。
- onShareAppMessage: 用戶轉發，只有定義了此事件處理函數，右上角菜單才會顯示“轉發”按鈕，用戶點擊轉發按鈕的時候會調用。
三. 微信小程序的頁面路由
框架以棧的形式維護了當前的所有頁面。 當發生路由切換的時候，頁面棧的表現如下：
| 路由方式 | 頁面棧表現 |
|---|---|
| 初始化 | 新頁面入棧 |
| 打開新頁面 | 新頁面入棧 |
| 頁面重定向 | 當前頁面出棧，新頁面入棧 |
| 頁面返回 | 頁面不斷出棧，直到目標返回頁 |
| Tab 切換 | 頁面全部出棧，只留下新的 Tab 頁面 |
| 重加載 | 頁面全部出棧，只留下新的頁面 |
四. 微信小程序模塊化
可以將一些公共的代碼抽離成為一個單獨的 js 文件，作為一個模塊。模塊只有通過module.exports 或者 exports 才能對外暴露接口。(推薦使用module.exports暴露模塊接口)，?在需要使用這些模塊的文件中，使用 require(path)將公共代碼引入(require 暫時不支持絕對路徑)。
// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
// page.js
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})
