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

2、頁面的.json只能設定 window 相關的配置項，以決定本頁面的視窗表現，所以無需寫 window 這個鍵

邏輯層(App Service)

1、小程式開發框架的邏輯層由 JavaScript 編寫。
2、邏輯層將資料進行處理後傳送給檢視層，同時接受檢視層的事件反饋。
3、由於框架並非執行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。
4、開發者寫的所有程式碼最終將會打包成一份 JavaScript，並在小程式啟動的時候執行，直到小程式銷燬。類似 ServiceWorker，所以邏輯層也稱之為 App Service。

註冊程式：
App() —— App() 必須在 app.js 中註冊，且不能註冊多個。

App() 函式用來註冊一個小程式。接受一個 object 引數，其指定小程式的生命週期函式等。

註冊頁面：
Page
Page() 函式用來註冊一個頁面。接受一個 object 引數，其指定頁面的初始資料、生命週期函式、事件處理函式等。

1、生命週期函式：

onLoad: 頁面載入

一個頁面只會呼叫一次，可以在 onLoad 中獲取開啟當前頁面所呼叫的 query 引數。

onShow: 頁面顯示

每次開啟頁面都會呼叫一次。

onReady: 頁面初次渲染完成

一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和檢視層進行互動。
對介面的設定如wx.setNavigationBarTitle請在onReady之後設定。詳見生命週期

onHide: 頁面隱藏

當navigateTo或底部tab切換時呼叫。

onUnload: 頁面解除安裝

當redirectTo或navigateBack的時候呼叫。

2、頁面相關事件處理函式：*

onPullDownRefresh: 下拉重新整理

需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。
當處理完資料重新整理後，wx.stopPullDownRefresh可以停止當前頁面的下拉重新整理。

onReachBottom: 上拉觸底

可以在app.json的window選項中或頁面配置中設定觸發距離onReachBottomDistance

。
在觸發距離內滑動期間，本事件只會被觸發一次。

onPageScroll: 頁面滾動

onShareAppMessage: 使用者轉發

Page.prototype.routeroute 欄位可以獲取到當前頁面的路徑。

Page.prototype.setData()
setData 函式用於將資料從邏輯層傳送到檢視層（非同步），同時改變對應的 this.data 的值（同步）。

注意：
1、直接修改 this.data 而不呼叫 this.setData 是無法改變頁面的狀態的，還會造成資料不一致。
2、單次設定的資料不能超過1024kB，請儘量避免一次設定過多的資料。
3、請不要把 data 中任何一項的 value 設為 undefined ，否則這一項將不被設定並可能遺留一些潛在問題。

模組化：

可以將一些公共的程式碼抽離成為一個單獨的 js 檔案，作為一個模組。模組只有通過 module.exports （推薦使用）或者 exports 才能對外暴露介面。

檢視層

框架的檢視層由 WXML 與 WXSS 編寫，由元件來進行展示。

將邏輯層的資料反應成檢視，同時將檢視層的事件傳送給邏輯層。

WXML(WeiXin Markup language) 用於描述頁面的結構。

WXS(WeiXin Script) 是小程式的一套指令碼語言，結合 WXML，可以構建出頁面的結構。

WXSS(WeiXin Style Sheet) 用於描述頁面的樣式。

元件(Component)是檢視的基本組成單元。

WXML
WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎元件、事件系統，可以構建出頁面的結構。

資料繫結：
WXML 中的動態資料均來自對應 Page 的 data。

三元運算：

<view hidden="{{flag ? true : false}}"> Hidden </view>

列表渲染：

wx:for

在元件上使用 wx:for 控制屬性繫結一個數組，即可使用陣列中各項的資料重複渲染該元件。
wx:for 也可以巢狀，下邊是一個九九乘法表：

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

block wx:for

類似 block wx:if，也可以將 wx:for 用在標籤上，以渲染一個包含多節點的結構塊。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

wx:key

如果列表中專案的位置會動態改變或者有新的專案新增到列表中，並且希望列表中的專案保持自己的特徵和狀態（如 中的輸入內容， 的選中狀態），需要使用 wx:key 來指定列表中專案的唯一的識別符號。

條件渲染：

wx:if

在框架中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該程式碼塊：
也可以用 wx:elif 和 wx:else 來新增一個 else 塊：

block wx:if
因為 wx:if 是一個控制屬性，需要將它新增到一個標籤上。如果要一次性判斷多個元件標籤，可以使用一個 <block/> 標籤將多個元件包裝起來，並在上邊使用 wx:if 控制屬性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

wx:if vs hidden：
如果需要頻繁切換的情景下，用 hidden 更好，
如果在執行時條件不大可能改變則 wx:if 較好。

模板（template）：
WXML提供模板（template），可以在模板中定義程式碼片段，然後在不同的地方呼叫。
使用 is 屬性，宣告需要的使用的模板，然後將模板所需要的 data 傳入，如：

<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

is 屬性可以使用 Mustache 語法，來動態決定具體需要渲染哪個模板

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

事件：
1、事件是檢視層到邏輯層的通訊方式。/2、事件可以將使用者的行為反饋到邏輯層進行處理。/3、事件可以繫結在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函式。/4、事件物件可以攜帶額外資訊，如 id, dataset, touches。

1、使用方式
如bindtap，當用戶點選該元件的時候會在該頁面對應的Page中找到相應的事件處理函式。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

在相應的Page定義中寫上相應的事件處理函式，引數是event。

Page({
  tapName: function(event) {
    console.log(event)
  }
})

2、事件分類
事件分為冒泡事件和非冒泡事件：

冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞。
非冒泡事件：當一個元件上的事件被觸發後，該事件不會向父節點傳遞。

3、事件繫結和冒泡
事件繫結的寫法同組件的屬性，以 key、value 的形式。
key 以bind或catch開頭，然後跟上事件的型別，如bindtap、catchtouchstart。

bind事件繫結不會阻止冒泡事件向上冒泡，catch事件繫結可以阻止冒泡事件向上冒泡。

自基礎庫版本 1.5.0 起，bind和catch後可以緊跟一個冒號，其含義不變，如bind:tap、catch:touchstart。

value 是一個字串，需要在對應的 Page 中定義同名的函式。不然當觸發事件的時候會報錯。

4、事件的捕獲階段
需要在捕獲階段監聽事件時，可以採用capture-bind、capture-catch關鍵字，後者將中斷捕獲階段和取消冒泡階段。

在下面的程式碼中，點選 inner view 會先後呼叫handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

如果將上面程式碼中的第一個capture-bind改為capture-catch，將只觸發handleTap2。

5、事件物件
如無特殊說明，當元件觸發事件時，邏輯層繫結該事件的處理函式會收到一個事件物件。

BaseEvent基礎事件物件屬性列表

type String，事件型別

timeStamp Integer，事件生成時的時間戳

target Object，觸發事件的元件的一些屬性值集合

currentTargetObject，當前元件的一些屬性值集合、事件繫結的當前元件。

CustomEvent 自定義事件物件屬性列表（繼承 BaseEvent）
detailObject， 額外的資訊

TouchEvent 觸控事件物件屬性列表（繼承 BaseEvent）：
touches Array，觸控事件，當前停留在螢幕中的觸控點資訊的陣列
changedTouches Array，觸控事件，當前變化的觸控點資訊的陣列

6、dataset
書寫方式： 以data-開頭，多個單詞由連字元-連結，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會將連字元轉成駝峰elementType。

引用：
WXML 提供兩種檔案引用方式import和include。

import

import可以在該檔案中使用目標檔案定義的template

import 有作用域的概念，即只會 import 目標檔案中定義的 template，而不會 import 目標檔案 import 的 template。

如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>

<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>

<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

include

include 可以將目標檔案除了 <template/> <wxs/> 外的整個程式碼引入，相當於是拷貝到 include 位置，如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

WXSS
WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的元件樣式。

1、尺寸單位
rpx（responsive pixel）: 可以根據螢幕寬度進行自適應。
1rpx = 0.5px = 1物理畫素。

2、樣式匯入–外聯樣式表
使用@import語句可以匯入外聯樣式表，@import後跟需要匯入的外聯樣式表的相對路徑，用;表示語句結束。

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

2、樣式匯入–內聯樣式表
框架元件上支援使用 style、class 屬性來控制組件的樣式。

style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在執行時會進行解析，請儘量避免將靜態的樣式寫進 style 中，以免影響渲染速度。

<view style="color:{{color}};" />

class：用於指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。

<view class="normal_view" />

3、全域性樣式與區域性樣式
定義在 app.wxss 中的樣式為全域性樣式，作用於每一個頁面。

在 page 的 wxss 檔案中定義的樣式為區域性樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器