小程式視圖層（xx.xml)和邏輯層(xx.js)

標籤：

整個系統分為兩塊視圖層（View）和邏輯層（App Service）

架構可以讓資料與視圖非常簡單地保持同步。當做資料修改的時候，只需要在邏輯層修改資料，視圖層就會做相應的更新。

通過這個簡單的例子來看：

<!-- This is our View --><view> Hello {{name}}! </view><button bindtap="changeName"> Click me! </button>

// This is our App Service.// This is our data.var helloData = {  name: ‘WeChat‘}// Register a Page.Page({  data: helloData,  changeName: function(e) {    // sent data change to view    this.setData({      name: ‘MINA‘    })  }})

• 開發人員通過架構將邏輯層資料中的 name 與視圖層的 name 進行了綁定，所以在頁面一開啟的時候會顯示 Hello WeChat!
• 當點擊按鈕的時候，視圖層會發送 changeName 的事件給邏輯層，邏輯層找到對應的事件處理函數
• 邏輯層執行了 setData 的操作，將 name 從 WeChat 變為 MINA，因為該資料和視圖層已經綁定了，從而視圖層會自動改變為 Hello MINA! 。

視圖層為 xx.xml

邏輯層為 xx.js

讀取時會先看邏輯層初始資料來填充視圖層，視圖層觸發邏輯層中的事件，邏輯層返回並改變視圖層的內容。

 

邏輯層(App Service)

小程式開發架構的邏輯層是由JavaScript編寫。

邏輯層將資料進行處理後發送給視圖層，同時接受視圖層的事件反饋。 在 JavaScript 的基礎上，我們做了一些修改，以方便地開發小程式。

• 增加 App 和 Page 方法，進行程式和頁面的註冊。
• 提供豐富的 API，如掃一掃，支付等特有能力。
• 每個頁面有獨立的範圍，並提供模組化能力。
• 由於架構並非運行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。
• 開發人員寫的所有代碼最終將會打包成一份 JavaScript，並在小程式啟動的時候運行，直到小程式銷毀。類似 ServiceWorker，所以邏輯層也稱之為 App Service。

初始化資料

初始化資料將作為頁面的第一次渲染。data 將會以 JSON 的形式由邏輯層傳至渲染層，所以其資料必須是可以轉成 JSON 的格式：字串，數字，布爾值，對象，數組。

渲染層可以通過 WXML 對資料進行綁定。

範例程式碼：

<view>{{text}}</view><view>{{array[0].msg}}</view>

Page({  data: {    text: ‘init data‘,    array: [{msg: ‘1‘}, {msg: ‘2‘}]  }})

Page.prototype.setData()

setData 函數用於將資料從邏輯層發送到視圖層，同時改變對應的 this.data 的值。

注意：

1. 直接修改 this.data 無效，無法改變頁面的狀態，還會造成資料不一致。
2. 單次設定的資料不能超過1024kB，請盡量避免一次設定過多的資料。

setData() 參數格式

接受一個對象，以 key，value 的形式表示將 this.data 中的 key 對應的值改變成 value。

其中 key 可以非常靈活，以資料路徑的形式給出，如 array[2].message，a.b.c.d，並且不需要在 this.data 中預先定義。

範例程式碼：

<!--index.wxml--><view>{{text}}</view><button bindtap="changeText"> Change normal data </button><view>{{array[0].text}}</view><button bindtap="changeItemInArray"> Change Array data </button><view>{{obj.text}}</view><button bindtap="changeItemInObject"> Change Object data </button><view>{{newField.text}}</view><button bindtap="addNewField"> Add new data </button>

//index.jsPage({  data: {    text: ‘init data‘,    array: [{text: ‘init data‘}],    object: {      text: ‘init data‘    }  },  changeText: function() {    // this.data.text = ‘changed data‘  // bad, it can not work    this.setData({      text: ‘changed data‘    })  },  changeItemInArray: function() {    // you can use this way to modify a danamic data path    this.setData({      ‘array[0].text‘:‘changed data‘    })  },  changeItemInObject: function(){    this.setData({      ‘object.text‘: ‘changed data‘    });  },  addNewField: function() {    this.setData({      ‘newField.text‘: ‘new data‘    })  }})

視圖層

架構的視圖層由 WXML 與 WXSS 編寫，由組件來進行展示。

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

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

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

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

 

什麼是事件

• 事件是視圖層到邏輯層的通訊方式。
• 事件可以將使用者的行為反饋到邏輯層進行處理。
• 事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
• 事件對象可以攜帶額外資訊，如id, dataset, touches。

事件的使用方式

• 在組件中綁定一個事件處理函數。

如bindtap，當使用者點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。

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

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

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

基礎組件

架構為開發人員提供了一系列基礎組件，開發人員可以通過組合這些基礎組件進行快速開發。

什麼是組件：

• 組件是視圖層的基本組成單元。
• 組件內建一些功能與風格的樣式。

• 一個組件通常包括開始標籤和結束標籤，屬性用來修飾這個組件，內容在兩個標籤之內。

  <tagname property="value">  Content goes here ...</tagename>

  注意：所有組件與屬性都是小寫，以連字號-串連

小程式視圖層（xx.xml)和邏輯層(xx.js)