原生小程序 基礎學習筆記

1.數據綁定

小程序的邏輯層和渲染層是分開的兩個線程。在渲染層，宿主環境會把WXML轉化成對應的JS對象，在邏輯層發生數據變動的時候，咱們須要經過宿主環境提供的setData方法把數據從邏輯層傳遞到渲染層，再通過對比先後差別，把差別應用在原來的Dom樹上，渲染出正確的UI界面。

經過setData把msg數據從「Hello World」變成「Goodbye」，產生的JS對象對應的節點就會發生變化，此時能夠對比先後兩個JS對象獲得變化的部分，而後把這個差別應用到原來的Dom樹上，從而達到更新UI的目的，這就是「數據驅動」的原理。

小程序的渲染層和邏輯層分別在兩個線程中運行，因此setData傳遞數據實際是一個異步的過程，因此setData的第二個參數是一個callback回調，在此次setData對界面渲染完畢後觸發。
setData其通常調用格式是 setData(data, callback)，其中data是由多個key: value構成的Object對象。

還需注意：

1. 直接修改 Page實例的this.data 而不調用 this.setData 是沒法改變頁面的狀態的，還會形成數據不一致。
2. 因爲setData是須要兩個線程的一些通訊消耗，爲了提升性能，每次設置的數據不該超過1024kB。
3. 不要把data中的任意一項的value設爲undefined，不然可能會有引發一些不可預料的bug。

2.渲染層與邏輯層

小程序的JS腳本是運行在JsCore的線程裏，小程序的每一個頁面各自有一個WebView線程進行渲染，因此小程序切換頁面時，小程序邏輯層的JS腳本運行上下文依舊在同一個JsCore線程中。

【注意】全部頁面的腳本邏輯都跑在同一個JsCore線程，頁面使用setTimeout或者setInterval的定時器，而後跳轉到其餘頁面時，這些定時器並無被清除，須要開發者本身在頁面離開的時候進行清理。

 3.生命週期（onLoad, onShow, onReady, onHide, onUnload）

頁面初次加載的時候，微信客戶端就會給Page實例派發onLoad事件，Page構造器參數所定義的onLoad方法會被調用，onLoad在頁面沒被銷燬以前只會觸發1次，在onLoad的回調中，能夠獲取當前頁面所調用的打開參數option，關於打開參數咱們放在這一節的最後再展開闡述。
頁面顯示以後，Page構造器參數所定義的onShow方法會被調用，通常從別的頁面返回到當前頁面時，當前頁的onShow方法都會被調用。
在頁面初次渲染完成時，Page構造器參數所定義的onReady方法會被調用，onReady在頁面沒被銷燬前只會觸發1次，onReady觸發時，表示頁面已經準備穩當，在邏輯層就能夠和視圖層進行交互了。
以上三個事件觸發的時機是：onLoad早於 onShow，onShow早於onReady。

頁面不可見時，Page構造器參數所定義的onHide方法會被調用，這種狀況會在使用wx.navigateTo切換到其餘頁面、底部tab切換時觸發。
當前頁面使用wx.redirectTo或wx.navigateBack返回到其餘頁時，當前頁面會被微信客戶端銷燬回收，此時Page構造器參數所定義的onUnload方法會被調用。

在列表頁打開商品詳情頁時把商品的id傳遞過來，詳情頁經過剛剛說的onLoad回調的參數option就能夠拿到商品id，從而繪製出對應的商品，代碼如代碼清單3-9所示。

// pages/list/list.js
// 列表頁使用navigateTo跳轉到詳情頁
wx.navigateTo({ url: 'pages/detail/detail?id=1&other=abc' })

// pages/detail/detail.js
Page({
  onLoad: function(option) {
        console.log(option.id)
        console.log(option.other)
  }
})

4.用戶行爲

• 下拉刷新 onPullDownRefresh

監聽用戶下拉刷新事件，須要在app.json的window選項中或頁面配置page.json中設置enablePullDownRefresh爲true。當處理完數據刷新後，wx.stopPullDownRefresh能夠中止當前頁面的下拉刷新。

• 上拉觸底 onReachBottom

監聽用戶上拉觸底事件。能夠在app.json的window選項中或頁面配置page.json中設置觸發距離onReachBottomDistance。在觸發距離內滑動期間，本事件只會被觸發一次。

• 頁面滾動 onPageScroll

監聽用戶滑動頁面事件，參數爲 Object，包含 scrollTop 字段，表示頁面在垂直方向已滾動的距離（單位px）。

• 用戶轉發 onShareAppMessage

只有定義了此事件處理函數，右上角菜單纔會顯示「轉發」按鈕，在用戶點擊轉發按鈕的時候會調用，此事件須要return一個Object，包含title和path兩個字段，用於自定義轉發內容，如代碼清單3-13所示。

// page.js
Page({
onShareAppMessage: function () {
 return {
   title: '自定義轉發標題',
   path: '/page/user?id=123'
 }
}
})

5.導航與tabBar

使用 wx.navigateTo({ url: 'pageD' }) 能夠往當前頁面棧多推入一個 pageD，此時頁面棧變成 [ pageA, pageB, pageC, pageD ]。
使用 wx.navigateBack() 能夠退出當前頁面棧的最頂上頁面，此時頁面棧變成 [ pageA, pageB, pageC ]。
使用wx.redirectTo({ url: 'pageE' }) 是替換當前頁變成pageE，此時頁面棧變成 [ pageA, pageB, pageE ]，當頁面棧到達10層無法再新增的時候，每每就是使用redirectTo這個API進行頁面跳轉。

{
  "tabBar": {
    "list": [
      { "text": "Tab1", "pagePath": "pageA" },
      { "text": "Tab1", "pagePath": "pageF" },
      { "text": "Tab1", "pagePath": "pageG" }
    ]
  }
}

在上面的例子所在的頁面棧中使用wx.switchTab({ url: 'pageF' })，此時原來的頁面棧會被清空（除了已經聲明爲Tabbar頁pageA外,其餘頁面會被銷燬），而後會切到pageF所在的tab頁面，頁面棧變成 [ pageF ]，此時點擊Tab1切回到pageA時，pageA不會再觸發onLoad，由於pageA沒有被銷燬。
【注意】wx.navigateTo和wx.redirectTo只能打開非TabBar頁面，wx.switchTab只能打開Tabbar頁面。

咱們還可使用 wx. reLaunch({ url: 'pageH' }) 重啓小程序，而且打開pageH，此時頁面棧爲 [ pageH ]。

路由方式	觸發時機	路由前頁面生命週期	路由後頁面生命週期
初始化	小程序打開的第一個頁面		onLoad, onShow
打開新頁面 調用	API wx.navigateTo	onHide	onLoad, onShow
頁面重定向 調用	API wx.redirectTo	onUnload	onLoad, onShow
頁面返回 調用	API wx.navigateBack	onUnload	onShow
Tab	切換 調用 API wx.switchTab	參考下表	參考下表
重啓動	調用 API wx.reLaunch	onUnload	onLoad, onShow

Tab 切換對應的生命週期（以 A、B 頁面爲 Tabbar 頁面，C 是從 A 頁面打開的頁面，D 頁面是從 C 頁面打開的頁面爲例）

當前頁面	路由後頁面	觸發的生命週期（按順序）
A	A	無
A	B	A.onHide(), B.onLoad(), B.onShow()
A	B(再次打開)	A.onHide(), B.onShow()
C	A	C.onUnload(), A.onShow()
C	B	C.onUnload(), B.onLoad(), B.onShow()
D	B	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D(從轉發進入)	A	D.onUnload(), A.onLoad(), A.onShow()
D(從轉發進入)	B	D.onUnload(), B.onLoad(), B.onShow()

 

6.事件綁定，捕獲與冒泡

事件綁定的寫法：

• 以bind或者catch開頭，而後跟上事件的類型，如bindtap、catchtouchstart。自基礎庫版本1.5.0起，bind和catch後能夠緊跟一個冒號，其含義不變，如bind:tap、catch:touchstart。同時bind和catch前還能夠加上capture-來表示捕獲階段。
• value是一個字符串，須要在對應的頁面Page構造器中定義同名的函數。
• bind和capture-bind的含義分別表明事件的冒泡階段和捕獲階段，其觸發的順序以下圖所示。

常見的事件類型

類型	觸發條件
touchstart	手指觸摸動做開始
touchmove	手指觸摸後移動
touchcancel	手指觸摸動做被打斷，如來電提醒，彈窗
touchend	手指觸摸動做結束
tap	手指觸摸後立刻離開
longpress	手指觸摸後，超過350ms再離開，若是指定了事件回調函數並觸發了這個事件，tap事件將不被觸發
longtap	手指觸摸後，超過350ms再離開（推薦使用longpress事件代替）
transitionend	會在 WXSS transition 或 wx.createAnimation 動畫結束後觸發
animationstart	會在一個 WXSS animation 動畫開始時觸發
animationiteration	會在一個 WXSS animation 一次迭代結束時觸發
animationend	會在一個 WXSS animation 動畫完成時觸發