一. 微信小程序的項目結構

1. .json 后綴的 JSON 配置文件

1.1 小程序配置 app.json

app.json是對當前小程序的全局配置，包括小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡超時、底部tab等，常見的配置關鍵字如下，更多的配置見小程序配置app.json

• pages字段 —— 用于描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄，數(shù)組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對 pages 數(shù)組進行修改。
• window字段 —— 小程序所有頁面的頂部背景顏色，文字顏色定義在這里的。

1.2 工具配置 project.config.json

開發(fā)者在開發(fā)工具上做的個性化配置都會被記錄在這個.json文件中，導入一個工程時，工具會根據(jù)這個文件設置對應的個性化設置。文件中的key值對應的作用還有待查詢。

1.3 頁面配置 page.json

每個頁面的個性化配置信息都存放在頁面對應的.json文件中，配置內容和app.json中key值為window一樣，page.json中的配置項會覆蓋app.json中window的配置項，更多的配置見小程序配置app.json

2. .wxml 后綴的頁面結構文件

類似于.html文件，由標簽、屬性等構成，不一樣的地方如下：

• 使用的標簽不一樣，微信小程序框架為我們提供了新的標簽，更多詳細的組件
• 小程序提倡把渲染和邏輯分開，簡單地說就是不讓JS操作DOM，只負責管理狀態(tài)，然后再通過一種模板語法來描述狀態(tài)和界面結構的關系即可。通過{{}}把一個變量綁定到一個標簽上，但是只有變量還是不夠的，所以小程序還提供了if/else, for等控制能力，在小程序里邊，這些控制能力都用 wx: 開頭的屬性來表達，更多詳細的控制能力

3. .wxss 后綴的頁面樣式文件

.wxss有css的大部分特性，同時.wxss也做了擴展和修改，詳細的.wxss

• 新增尺寸單位rpx，不需要開發(fā)者去做換算，小程序底層會去做換算
• 提供了全局樣式和局部樣式，和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作為全局樣式，會作用于當前小程序的所有頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。
• 此外 WXSS 僅支持部分 CSS 選擇器

4. .js 后綴的頁面交互邏輯

響應用戶交互、邏輯代碼都存放在.js中。同時微信還提供了很多API，可以讓開發(fā)者可以很方便的調用起微信提供的功能，如獲取用戶信息，本地存儲，支付功能等，更詳細的API文檔.

5. 小程序文件結構

小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。

5.1 app文件結構

• app.js：小程序邏輯
• app.json：小程序的公共配置
• app.wxss：小程序的公共樣式表

5.2 page文件結構

• page.json：頁面配置
• page.js：頁面邏輯
• page.wxml：頁面結構
• page.wxss：頁面樣式
  注意：為了方便開發(fā)者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名。

二. 微信小程序的能力

1. 小程序啟動

微信客戶端在打開小程序之前，會把整個小程序的代碼包下載到本地，緊接著通過 app.json 的 pages 字段就可以知道你當前小程序的所有頁面路徑，而寫在 pages 字段的第一個頁面就是這個小程序的首頁(打開小程序看到的第一個頁面)。

2. 小程序的頁面加載

微信客戶端會先根據(jù) page.json 配置生成一個界面，頂部的顏色和文字你都可以在這個 json 文件里邊定義好。緊接著客戶端就會裝載這個頁面的 WXML 結構和 WXSS 樣式。最后客戶端會裝載 page.js。

3. 小程序的注冊

App() 函數(shù)用來注冊一個小程序。接受一個 object 參數(shù)，其指定小程序的生命周期函數(shù)(如下)等。此外開發(fā)者還可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用this可以訪問。

• onLaunch：生命周期函數(shù)--監(jiān)聽小程序初始化，當小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次），函數(shù)參數(shù)
• onShow：生命周期函數(shù)--監(jiān)聽小程序顯示，當小程序啟動，或從后臺進入前臺顯示，會觸發(fā) onShow，函數(shù)參數(shù)
• onHide：生命周期函數(shù)--監(jiān)聽小程序隱藏，當小程序從前臺進入后臺，會觸發(fā) onHide
• onError：錯誤監(jiān)聽函數(shù)，當小程序發(fā)生腳本錯誤，或者 api 調用失敗時，會觸發(fā) onError 并帶上錯誤信息
• onPageNotFound：頁面不存在監(jiān)聽函數(shù)，當小程序出現(xiàn)要打開的頁面不存在的情況，會帶上頁面信息回調該函數(shù)，函數(shù)參數(shù)

全局的getApp()函數(shù)可以用來獲取到小程序實例，但是需要注意：

• 不要在定義于App()內的函數(shù)中調用getApp()，使用this就可以拿到app實例。
• 通過getApp()獲取實例之后，不要私自調用生命周期函數(shù)。

4. 小程序頁面注冊

Page()函數(shù)用來注冊一個頁面。接受一個 object 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。

4.1 初始數(shù)據(jù)

• data：頁面的初始數(shù)據(jù)
  初始化數(shù)據(jù)將作為頁面的第一次渲染。data 將會以 JSON 的形式由邏輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉成 JSON 的格式：字符串，數(shù)字，布爾值，對象，數(shù)組。

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

4.2 生命周期

• onLoad: 頁面加載，一個頁面只會調用一次，可以在 onLoad 中獲取打開當前頁面所調用的 query 參數(shù)。
• onShow: 頁面顯示，每次打開頁面都會調用一次。
• onReady: 頁面初次渲染完成，一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。對界面的設置如wx.setNavigationBarTitle請在onReady之后設置。
• onHide: 頁面隱藏，當navigateTo或底部tab切換時調用。
• onUnload: 頁面卸載，當redirectTo或navigateBack的時候調用。
  
  page生命周期

4.3 頁面相關事件處理函數(shù)

• onPullDownRefresh: 下拉刷新，監(jiān)聽用戶下拉刷新事件，當處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。
• onReachBottom: 上拉觸底，監(jiān)聽用戶上拉觸底事件，在觸發(fā)距離內滑動期間，本事件只會被觸發(fā)一次。
• onPageScroll: 頁面滾動，監(jiān)聽用戶滑動頁面事件，頁面在垂直距離上滾動的距離會包含在函數(shù)的對象參數(shù)的scrollTop字段中。
• onShareAppMessage: 用戶轉發(fā)，只有定義了此事件處理函數(shù)，右上角菜單才會顯示“轉發(fā)”按鈕，用戶點擊轉發(fā)按鈕的時候會調用。

三. 微信小程序的頁面路由

框架以棧的形式維護了當前的所有頁面。 當發(fā)生路由切換的時候，頁面棧的表現(xiàn)如下：

四. 微信小程序模塊化

可以將一些公共的代碼抽離成為一個單獨的 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')
  }
})