1、app.json檔案中頁面路徑前不要加/

2、圖片儘量不要儲存在小程式的目錄中。（因為小程式的大小不能超過1MB，超過則無法真機執行和釋出專案。應該將圖片都存放在伺服器上，讓小程式通過網路來載入圖片）

3、設定display：flex是應用一切彈性佈局屬性的先決條件，如果不設定display：flex，那麼後續的其他相關彈性佈局屬性都將無效

4、使用rpx單位可以使元件自適應螢幕的高度和寬度（px不會自適應）；建議以iphone6的寬度750個物理畫素作為標準做設計圖。轉換比例為 1物理畫素=1rpx=0.5px

5、border屬性不需要動態變化，如果動態變化，會在螢幕尺寸較大的手機上變得很粗。建議在iPhone6尺寸下做設計圖。模擬器機型的解析度是邏輯解析度pt，而非物理解析度。375X667；Dpr：2，代表iphone6的水平方向有375個邏輯畫素點，垂直方向有667個邏輯畫素點，每個邏輯畫素點包含2個物理畫素點。（通常PS裡的畫素指物理畫素）

（e.g. 一張圖片750畫素，水平充滿頁面，設定750rpx或375px）

6、需要同時設定swiper元件和image元件的高寬。

7、頁面生命週期：

• 載入 onLoad：一個頁面只會呼叫一次
• 顯示 onShow：每次開啟頁面都會呼叫
• 渲染 onReady：監聽初次渲染完成，一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和檢視層進行互動
• 隱藏 onHide：監聽頁面隱藏
• 解除安裝 onUnload：監聽頁面解除安裝

一個頁面要正常顯示，必須經歷“載入、顯示、渲染”三個生命週期。onShow的執行時刻是在onReady之前的。

除了First Render第一次渲染，頁面還有可能會Rerender再次渲染多次。

資料更新會造成頁面的重新渲染。onReady只監聽“第一渲染”的完成

8、在真實的專案中，業務資料通常都放置在自己的伺服器中，然後通過HTTP請求來訪問伺服器提供的RESTFUL API，從而實現資料獲取。

9、小程式的指令碼邏輯是執行在JScore中，JScore是一個沒有DOM的環境，完全拋棄了DOM結構，只能通過資料繫結來做資料的相關操作

10、小程式僅實現了單向資料繫結，即只支援從邏輯層傳遞到渲染層的資料繫結，反之則不可以

11、小程式使用Page方法引數裡的data變數作為資料繫結的橋樑

12、資料繫結有兩種：

1. 一種是初始化資料的資料繫結。通常將這些資料直接寫在Page方法引數的data物件下面
2. 另一種是使用setData方法來做資料繫結，這種方式也可以理解為資料更新。這樣的資料更新將引起頁面的Rerender(重新渲染)

13、小程式使用Mustache語法{{}}在wxml元件裡進行資料繫結

14、初始化資料繫結過程：

當頁面執行了onShow函式後，邏輯層會收到一個通知（Notify）；隨後邏輯層會將data物件以json的形式傳送到View檢視層（Send Initial Data），檢視層接收初始化資料後，開始渲染並顯示初始化資料（First Render），最終將資料呈現在開發者眼前。

15、資料繫結更新：setdata

setData方法位於Page物件的原型鏈上：Page.prototype.setData。使用this.setData的方式呼叫

setData的引數接收一個物件，以key和value的形式將this.data中的key對應的值設定成value.

注意：

• setData會改變this.data變數裡相同key的值
• setData執行後會通知邏輯層執行Rerender，並立刻重新渲染檢視。

16、關於資料繫結的錯誤，小程式目前不會給出任何錯誤提醒。如果發現整個頁面是空白的又沒有錯誤訊息，多半是資料綁定出了問題。（此時，AppData面板是最好的除錯工具）

17、列表渲染：

  <block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
    <view class='post-container'>
      <view class='post-author-date'>
        <image src='{{item.avatar}}'></image>
        <text>{{item.object.date}}</text>
      </view>
      <text class='post-title'>{{item.title}}</text>
      <image class='post-image' src='{{item.postImg}}'></image>
      <text class='post-content'>{{item.content}}
      </text>
    </view>
  </block>

<block>標籤並沒有實質意義，它並不是元件，所以稱作“標籤”。（它僅僅是一個包裝，可以理解為常見程式語言裡的括號，不會再頁面內被渲染，在block標籤中被包裹的元素將被重複渲染。）

block標籤中的wx:for屬性，值為{{postList}}，對應post.js檔案中setData的陣列資料。wx:for並不是一定要作用在block標籤上。把block標籤換成view一樣可以執行，但我們希望標籤或元件的語義是明確地。view元件通常被用來做容器或區域分隔，不不應該被濫用。

如果不定義item，小程式預設的子元素變數名即為item。也可以將它替換為其他變數名,如：wx:for-item="element".

18、頁面的json檔案只能配置和window相關屬性；app.json除了可以配置window，還可以配置pages、tabBar等選項

（頁面json配置不需要加window物件，直接編寫window配置項即可）

19、事件：事件是檢視層（wxml）到邏輯層（js）的通訊方式。

可以讓我們在js裡處理使用者在介面上的一些操作並作出反饋。如點選按鈕後，需要在js裡呼叫MINA框架的API，是頁面從welcome跳轉到post.

20、實現事件機制：

step1：在元件上註冊事件。（註冊事件將告訴小程式，我們要監聽哪個元件的什麼事件。本例是button元件的tap事件）

step2：在js中編寫事件處理函式響應事件。（監聽到事件後的處理業務）

21、小程式共提供了3個導航API：

• wx.redirectTo：關閉當前頁面，跳轉到指定頁面
• wx.navigateTo：保留當前頁面，跳轉到指定頁面
• wx.switchTap（122100新增版本）：跳轉到帶tabbar的頁面，並關閉其他所有非tabbar頁面

url是頁面路徑，不要加副檔名。

redirectTo和navigateTo在使用方式上完全相同，都接受一個Object物件作為引數。

Object引數還可以接收3個方法：

• success：跳轉頁面成功時呼叫
• fail：跳轉失敗時呼叫
• complete：無論成功或失敗，都會呼叫

（在小程式中，幾乎所有非同步型別的API都配備有這3個方法）

22、redirectTo：將解除安裝welcome頁面，並執行onUnload事件函式。

navigateTo：隱藏當前頁面，還可以再次返回到被隱藏頁面

再次從post頁面返回到welcome頁面時，會執行post頁面的onUnload函式（130400版本，即子頁面返回父頁面時，子頁面會被解除安裝。頁面是否被解除安裝是非常重要的行為，不解除安裝頁面將使全域性性的一些行為，比如音樂播放的處理變得非常複雜）

23、當我們使用navigateTo從父頁面跳轉到子頁面後，就形成了2個頁面層級。

小程式強制規定只允許有最多五層父子頁面。（建議不超過3層）

24、冒泡事件

冒泡事件：某元件上的事件被觸發後，事件還會向父級元素傳遞；父級元素還會繼續向父級元素傳遞，直到頁面頂級元素。

（非冒泡事件不會向上傳遞）

常見的冒泡事件：

• touchstart：手指觸控動作開始
• touchmove：手指觸控後移動
• touchcancel：手指觸控動作被打斷，如來電提醒、彈窗
• touchend：手指觸控動作結束
• tap：手指觸控後馬上離開
• longtap：手指觸控後，超過350ms再離開

在wxml元件裡註冊事件時，不可直接使用tap="function"或touchmove="function"，需要在事件名前新增字首catch或bind

（catch將阻止事件繼續向父節點傳播；bind不阻止）

welcom.js

Page({
  onUnload: function (event) {
    console.log("page is unload")
  },
  onHide: function (event) {
    console.log("page is hide")
  },
  onTapJump: function (event) {
    wx.navigateTo({
      url: '/pages/post/post',
      success: function () {
        console.log("jump success")
      },
      fail: function () {
        console.log("jump fail")
      },
      complete: function () {
        console.log("complete")
      }
    });
  },
  onTapJumpFather:function(event){
   console.log("tap事件傳遞！")
  }
})

welcome.wxml:

<view catchtap='onTapJumpFather' class='container'>
  <image class='avatar' src='/images/avatar/1.png'></image>
  <text class='motto'>Hello,桔子罐頭</text>
  <view bindtap='onTapJump' class='journey-container'>
    <text class='journey'>開啟小程式之旅</text>
  </view>
</view>

result:

若改為：

<view catchtap='onTapJump' class='journey-container'>
    <text class='journey'>開啟小程式之旅</text>
  </view>

result：

無特殊申明都是非冒泡事件。非冒泡事件大多不是通用事件，是某些元件特有事件。如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件。

常見的冒泡事件：

• touchstart：手指觸控動作開始
• touchmove：手指觸控後移動
• touchcancel：手指觸控動作被打斷，如來電提醒、彈窗
• touchend：手指觸控動作結束
• tap：手指觸控後馬上離開
• longtap：手指觸控後，超過350ms再離開

25、模組化：

所有文章資料都被強行寫在post.js裡，汙染業務層，嘗試將這些資料分離到一個單獨的js檔案中。

其他檔案訪問模組：

STEP1：data.js 暴露介面：module.exports={postList:postList}

STEP2: post.js引入模組：

不同於頁面路徑，被引用檔案一定要帶有副檔名js

path路徑不可以使用絕對路徑，否則會報錯。

在js中宣告的變數和函式只在該檔案中有效，不同的檔案可以宣告相同名字的變數和函式，不會互相影響。

在輸出模組時，我們是將postList作為一個object屬性賦值給module.exports,所以require時，得到的也是一個object而非postList,需要使用dataObj.postList才能獲取到真實的文章資料

object不僅可以包含postList，還可以在data.js檔案中定義除了postList外的其他資料，並作為object的屬性一起輸出。

require只會模組化的一種方式，還可以使用ES6的Module來編寫模組，開發工具預設使用label將開發者的ES6程式碼轉化成ES5程式碼。

26、模板化

使用列表渲染展現文章列表並不是最好的辦法，因為如果其他頁面同樣需要顯示文章列表，總不能吧wxml程式碼到處拷貝啊~~~

藉助函式思想，將一些公共的、經常使用的業務邏輯提取成一個公共的函式，呼叫即可。