框架

小程序框架系統(tǒng)分為兩部分：視圖層（View）和邏輯層（App Service）使鹅，視圖層有自己的描述語言 wxml 和 wxss，邏輯層基于 javascript 岭埠。
小程序在邏輯層與視圖層之間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯

響應(yīng)式的數(shù)據(jù)綁定

框架的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，它可以讓數(shù)據(jù)與視圖非常簡單地保持同步靠闭。當(dāng)需要修改的時(shí)候，只需要在邏輯層修改數(shù)據(jù)坎炼，視圖層就會做相應(yīng)的更新

頁面管理

框架管理了整個(gè)小程序的頁面路由愧膀，框架以棧的形式維護(hù)了當(dāng)前的所有頁面，可以做到頁面間的無縫切換谣光，并給以頁面完整的生命周期扇调。開發(fā)者需要做的只是將頁面的數(shù)據(jù)、方法抢肛、生命周期函數(shù)注冊到 框架 中狼钮，其他的一切復(fù)雜的操作都交由框架處理

• getCurrentPages()用于獲取當(dāng)前頁面棧的實(shí)例，它會以數(shù)組的形式按照棧的順序排列捡絮，tip:
  • 不要嘗試修改頁面棧熬芜，會導(dǎo)致路由以及頁面狀態(tài)錯誤
  • 不要在 App.onLaunch 中調(diào)用，這個(gè)時(shí)候page還沒有生成
• 頁面間跳轉(zhuǎn)api：
  • navigateTo：打開新頁面
  • redirectTo：重定向
  • navigateBack：返回上一級
  • switchTab：tab切換（可以且只能跳轉(zhuǎn)到tab福稳，是除reLaunch以外唯一可以跳轉(zhuǎn)到tab的）
  • reLaunch：重新加載涎拉，可以打開任意頁面

目錄結(jié)構(gòu)

小程序包含一組描述整體程序的 app 文件和多個(gè)描述各自頁面的page，描述頁面的四個(gè)文件必須具有相同的路徑與文件名的圆。
- app.json 文件用來對微信小程序進(jìn)行全局配置鼓拧，決定頁面的路徑(pages)、窗口表現(xiàn)(winidow)越妈，設(shè)置網(wǎng)絡(luò)超時(shí)事件季俩、設(shè)置多tab
- App()必須在 app.js 中調(diào)用，必須調(diào)用且只能調(diào)用一次梅掠，不然會出現(xiàn)無法預(yù)期的后果（具體是啥我也不知道酌住，官方文檔里這么寫的），App()中的聲明周期函數(shù)：
+ onLaunch阎抒，小程序初始化完成時(shí)調(diào)用酪我，只會運(yùn)行一次
+ onShow，小程序啟動觸發(fā)且叁，或者從后臺進(jìn)入前臺時(shí)觸發(fā)
+ onHide都哭，從前臺進(jìn)入后臺時(shí)觸發(fā)
+ onError（不是生命周期），發(fā)生腳本錯誤，或api調(diào)用失敗觸發(fā)
+ onPageNotFound（不是生命周期）欺矫，頁面不存在時(shí)觸發(fā)

邏輯層

邏輯層使用的是 javascript 引擎纱新，將數(shù)據(jù)進(jìn)行處理發(fā)送給視圖層，也可以接收視圖層的事件反饋汇陆。最后開發(fā)者寫的所有代碼最終將會打包成一份 javascript 文件怒炸，并在小程序啟動的時(shí)候運(yùn)行，直到小程序銷毀毡代。
小程序框架的邏輯層并非運(yùn)行在瀏覽器中阅羹，因此 javascript 在 web 中一些能力都無法使用，如 window教寂，document 等

模塊化

可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的js文件捏鱼，作為一個(gè)模塊。模塊需要通過 module.exports 對外暴露接口酪耕。（調(diào)用時(shí)候注意导梆，require 暫時(shí)不支持絕對路徑）

API

• 事件監(jiān)聽 API： 約定，以 on 開頭的 API 用來監(jiān)聽某個(gè)事件是否觸發(fā)
• 同步 API： 約定迂烁，以 Sync 結(jié)尾的 API 都是同步 API看尼，同步API 的執(zhí)行結(jié)果可以通過函數(shù)返回值直接獲取，如果執(zhí)行錯誤會拋異常盟步， try{}catch(e){console.error(e)}

WXS

WXS（WeiXin Script）是小程序的一套腳本語言藏斩，結(jié)合 WXML，可以構(gòu)建出頁面的結(jié)構(gòu)却盘。

自定義組件

自定義組件是將頁面內(nèi)的功能模塊抽象成組件狰域，以便在不同的頁面中重復(fù)使用，tip：

• 需要在 json 文件中將 component 字段定義為true黄橘，這個(gè)文件即為一個(gè)組件文件兆览，組件的 js 中不是定義 page 而是定義 component
• 使用自定義組件，需要在要使用的頁面的 json 中引用聲明塞关，需要提供自定義組件的標(biāo)簽名和對應(yīng)的自定義組件文件路徑抬探，可以定義多個(gè)，比如：
  { "usingComponents": { "component-tag-name1": "path/to/the/custom/component", "component-tag-name2": "path/to/the/custom/component" } }
• 在組件wxss中不應(yīng)該使用ID選擇器描孟、屬性選擇器和標(biāo)簽名選擇器
• slot：在組件的wxml中可以包含 slot 節(jié)點(diǎn)驶睦，用于承載組件使用者提供的wxml結(jié)構(gòu)。默認(rèn)情況下匿醒，一個(gè)組件的wxml中只能有一個(gè)slot。需要使用多slot時(shí)缠导，可以在組件 js 中聲明啟用：options: { multipleSlots: true }廉羔，在頁面中通過 <view slot="A"></view> 引用，在組件頁面中通過 <slot name="A"></slot> 接收
• 組件間通信僻造？
• 關(guān)于組件樣式：
  • 組件和引用組件的頁面不能使用id選擇器（#a）憋他、屬性選擇器（[a]）和標(biāo)簽名選擇器孩饼，請改用class選擇器
  • 組件和引用組件的頁面中使用后代選擇器（.a .b）在一些極端情況下會有非預(yù)期的表現(xiàn)，子元素選擇器（.a>.b）只能用于 view 組件與其子節(jié)點(diǎn)之間竹挡，用于其他組件可能導(dǎo)致非預(yù)期的情況
  • 繼承樣式镀娶，如 font 、 color 揪罕，會從組件外繼承到組件內(nèi)
  • 除繼承樣式外梯码， app.wxss 中的樣式、組件所在頁面的的樣式對自定義組件無效
  • 組件中指定默認(rèn)樣式好啰，使用 :host 選擇器轩娶，比如 :host { color:#f00; }
• 組件的生命周期：
  created、attached框往、ready鳄抒、moved、detached椰弊、error许溅，2.2.3 版本以后可以在 lifetimes 里定義，之前可在 component 里定義秉版；特殊生命周期： show贤重、hide、resize沐飘，可在 pageLifetimes 里定義
• behaviors

其他重要知識點(diǎn)

• 銷毀：只有當(dāng)小程序進(jìn)入后臺一定時(shí)間游桩，或者系統(tǒng)資源占用過高，才會被真正的銷毀耐朴；也可以手動刪除
• setData：setData函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步方式）借卧，同時(shí)改變 this.data 的值（同步）；tip: 如果要改變數(shù)組或?qū)ο笾心骋豁?xiàng)筛峭，比如array[2].info铐刘，需要進(jìn)行預(yù)先定義，然后使用字符串類型的值影晓，比如var arr = 'array[2].info'镰吵，然后就可以 this.setData({ arr: 'i am info' })，其他 tip:
  • 在目前版中直接使用 this.data 修改值是無效的挂签，必須使用 this.setData 才能修改data中的值
  • data中僅支持可JSON化的數(shù)據(jù)
  • 單次設(shè)置的數(shù)據(jù)不能超過1024kB疤祭，請盡量避免一次設(shè)置過多的數(shù)據(jù)
  • 請不要把 data 中任何一項(xiàng)的 value 設(shè)為 undefined，否則這一項(xiàng)將不被設(shè)置并可能遺留一些潛在問題
• wx:if 和 hidden：wx:if 是惰性的饵婆，如果在初始渲染條件為 false勺馆，框架什么也不做，在條件第一次變成真的時(shí)候才開始局部渲染。當(dāng) wx:if 的條件值切換時(shí)草穆，框架有一個(gè)局部渲染的過程灌灾，因?yàn)樗鼤_保條件塊在切換時(shí)銷毀或重新渲染。相比于使用 class 進(jìn)行 hidden 就簡單的多悲柱，組件始終會被渲染锋喜，只是簡單的控制顯示與隱藏。一般來說豌鸡，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗嘿般。因此，如果需要頻繁切換的情景下直颅，用 hidden 更好博个，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好。
• 事件：事件是視圖層到邏輯層的通訊方式功偿，事件可以將用戶的行為反饋到邏輯層進(jìn)行處理盆佣。事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)條件械荷，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)共耍。事件對象可以攜帶額外的信息，比如id吨瞎、dataset痹兜、touches
• 事件分為冒泡事件和非冒泡事件，bind事件綁定不會阻止冒泡事件向上冒泡颤诀，catch事件綁定可以阻止冒泡事件向上冒泡字旭。