1. 邏輯層

1.1 注冊小程序

• 注冊小程序示例
  每個小程序都需要在 app.js 中調(diào)用 App 方法注冊小程序示例，綁定生命周期回調(diào)函數(shù)懂缕、錯誤監(jiān)聽和頁面不存在監(jiān)聽函數(shù)等。
• 獲取全局唯一的 App 示例
  整個小程序只有一個 App 實例，是全部頁面共享的磕瓷。開發(fā)者可以通過 getApp 方法獲取到全局唯一的 App 示例硝桩，獲取App上的數(shù)據(jù)或調(diào)用開發(fā)者注冊在 App 上的函數(shù)沿猜。

1.2 注冊頁面

• 注冊頁面示例
  對于小程序中的每個頁面，都需要在頁面對應(yīng)的 js 文件中調(diào)用 Page 方法注冊頁面示例碗脊，指定頁面的初始數(shù)據(jù)啼肩、生命周期回調(diào)、事件處理函數(shù)等衙伶。
• 拓展
  除了 Page 祈坠，作為高級用法，頁面可以像自定義組件一樣使用 Component 來創(chuàng)建矢劲，這樣就可以使用自定義組件的特性赦拘，如 behaviors 等。

1.3 頁面生命周期

Page實例的生命周期.png

1.4 頁面路由

說明：在小程序中所有頁面的路由全部由框架進行管理芬沉，框架以棧的形式維護了當(dāng)前的所有頁面躺同。
(1) 路由方式

路由的觸發(fā)方式以及頁面生命周期函數(shù).png

說明：

• navigateTo, redirectTo 只能打開非 tabBar 頁面阁猜。
• switchTab 只能打開 tabBar 頁面。
• reLaunch 可以打開任意頁面蹋艺。
• 頁面底部的 tabBar 由頁面決定剃袍，即只要是定義為 tabBar 的頁面，底部都有 tabBar捎谨。
• 調(diào)用頁面路由帶的參數(shù)可以在目標(biāo)頁面的onLoad中獲取民效。

(2) 發(fā)生路由切換時對應(yīng)的頁面棧的表現(xiàn)

路由方式和對應(yīng)頁面棧的表現(xiàn).png

1.5 模塊化

• 公共代碼模塊化
  可以將一些公共的代碼抽離成為一個單獨的 js 文件侍芝，作為一個模塊研铆。模塊只有通過 module.exports 或者 exports 才能對外暴露接口。在需要使用這些模塊的文件中州叠，使用 require 將公共代碼引入棵红。
• 文件作用域
  在 JavaScript 文件中聲明的變量和函數(shù)只在該文件中有效；不同的文件中可以聲明相同名字的變量和函數(shù)咧栗，不會互相影響逆甜。通過全局函數(shù) getApp 可以獲取全局的應(yīng)用實例，如果需要全局的數(shù)據(jù)可以在 App 中設(shè)置致板。

1.6 API

說明：小程序開發(fā)框架提供豐富的微信原生 API交煞，可以方便的調(diào)起微信提供的能力，如獲取用戶信息斟或，本地存儲素征，支付功能等。通常萝挤，在小程序 API 有以下幾種類型：

• 事件監(jiān)聽 API：以 on 開頭的 API 用來監(jiān)聽某個事件是否觸發(fā)
• 同步 API：以 Sync 結(jié)尾的 API 都是同步 API
• 異步 API：大多數(shù) API 都是異步 API御毅，如 wx.request，wx.login 等
  備注1：異步 API 接口通常都接受一個 Object 類型的參數(shù)
  
  Object參數(shù)說明.png
  
  備注2：success怜珍，fail端蛆，complete 函數(shù)調(diào)用時會傳入一個 Object 類型參數(shù)
  
  回調(diào)函數(shù)的參數(shù).png

2. 視圖層

2.1 WXML

說明：WXML（WeiXin Markup Language）是框架設(shè)計的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件酥泛、事件系統(tǒng)今豆，可以構(gòu)建出頁面的結(jié)構(gòu)。WXML 具有什么能力如下：

• 數(shù)據(jù)綁定
• 列表渲染
• 條件渲染
• 模板
• 引用

2.2 WXSS

說明：WXSS (WeiXin Style Sheets)是一套樣式語言柔袁，用于描述 WXML 的組件樣式呆躲。WXSS 具有 CSS 大部分特性，同時為了更適合開發(fā)微信小程序瘦馍，WXSS 對 CSS 進行了擴充以及修改歼秽，WXSS 擴展的特性有：
(1)新增了尺寸單位 rpx：rpx可以根據(jù)屏幕寬度進行自適應(yīng)
(2)提供了全局的樣式和局部樣式
(3)僅支持部分 CSS 選擇器
(4)樣式導(dǎo)入
使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑情组，用;表示語句結(jié)束燥筷。
(5)內(nèi)聯(lián)樣式：框架組件上支持使用 style箩祥、class 屬性來控制組件的樣式

• style：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動態(tài)的樣式肆氓，在運行時會進行解析袍祖，請盡量避免將靜態(tài)的樣式寫進 style 中，以免影響渲染速度谢揪。
• class：用于指定樣式規(guī)則蕉陋，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.拨扶，樣式類名之間用空格分隔凳鬓。

WXSS補充說明參考：微信小程序開發(fā)(微信小程序與普通網(wǎng)頁開發(fā)的區(qū)別和聯(lián)系)中的第2.3節(jié)WXSS 樣式。

2.3 WXS

說明：WXS（WeiXin Script）是小程序的一套腳本語言患民，結(jié)合 WXML缩举，可以構(gòu)建出頁面的結(jié)構(gòu)。

2.4 基礎(chǔ)組件

說明：框架為開發(fā)者提供了一系列基礎(chǔ)組件匹颤，開發(fā)者可以通過組合這些基礎(chǔ)組件進行快速開發(fā)仅孩。
(1) 組件介紹

• 組件是視圖層的基本組成單元。
• 組件自帶一些功能與微信風(fēng)格一致的樣式印蓖。
• 一個組件通常包括 開始標(biāo)簽 和 結(jié)束標(biāo)簽辽慕，屬性 用來修飾這個組件，內(nèi)容 在兩個標(biāo)簽之內(nèi)赦肃。

注意：所有組件與屬性都是小寫溅蛉，以連字符-連接
(2) 屬性類型

屬性類型.png

所有組件都有的公共屬性.png

2.5 事件系統(tǒng)

2.5.1 事件介紹

• 事件是視圖層到邏輯層的通訊方式温艇。
• 事件可以將用戶的行為反饋到邏輯層進行處理。
• 事件可以綁定在組件上堕汞，當(dāng)達到觸發(fā)事件，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)晃琳。
• 事件對象可以攜帶額外信息讯检，如 id, dataset, touches。

2.5.2 事件的使用方式

• 在組件中綁定一個事件處理函數(shù)
• 在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù)卫旱，參數(shù)是event

2.5.3 使用WXS函數(shù)響應(yīng)事件

WXS響應(yīng)事件

2.5.4 事件詳解

(1) 事件分類

• 冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后人灼，該事件會向父節(jié)點傳遞
• 非冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞

(2) 事件綁定和冒泡：事件綁定的寫法同組件的屬性顾翼，以 key投放、value 的形式

• key 以bind或catch開頭，然后跟上事件的類型适贸，如bindtap灸芳、catchtouchstart
• value 是一個字符串涝桅，需要在對應(yīng)的 Page 中定義同名的函數(shù)(不然當(dāng)觸發(fā)事件的時候會報錯)

備注：bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡烙样。如下例：點擊 inner view 會先后調(diào)用handleTap3和handleTap2(因為tap事件會冒泡到 middle view冯遂，而 middle view 阻止了 tap 事件冒泡，不再向父節(jié)點傳遞)谒获，點擊 middle view 會觸發(fā)handleTap2蛤肌，點擊 outer view 會觸發(fā)handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

(3) 事件的捕獲階段
(4) 事件對象
說明：如無特殊說明批狱，當(dāng)組件觸發(fā)事件時裸准，邏輯層綁定該事件的處理函數(shù)會收到一個事件對象。

事件對象的屬性.png

• 區(qū)別target和currentTarget

  
  
  區(qū)別target和currentTarget.png
• dataset
  在組件中可以定義數(shù)據(jù)赔硫，這些數(shù)據(jù)將會通過事件傳遞給 SERVICE炒俱。 書寫方式： 以data-開頭，多個單詞由連字符-鏈接卦停，不能有大寫(大寫會自動轉(zhuǎn)成小寫)如data-element-type向胡，最終在 event.currentTarget.dataset 中會將連字符轉(zhuǎn)成駝峰elementType。

3. 場景值

說明：場景值用來描述用戶進入小程序的路徑惊完。完整場景值的含義請查看場景值列表僵芹。