小程序視圖層和邏輯層的示例分析

小編給大家分享一下小程序視圖層和邏輯層的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

微信小程序可以理解為云OS的概念，微信生態(tài)本身就是一個OS。加上微信公眾平臺和微信開發(fā)平臺本身已經(jīng)是非常成熟的架構(gòu)，能夠完美媲美App的功能，同時在交互體驗方面也能夠做到極致，大有取代App之勢。蘋果App Store模式的意義在于為第三方軟件的提供者提供了方便而又高效的一個軟件銷售平臺。用戶購買應(yīng)用所支付的費用由蘋果與應(yīng)用開發(fā)商3：7分成。如果微信小程序商城也采用類似的分傭模式，那8億多的用戶將是一個非常大的無形資產(chǎn)，成為騰訊繼游戲、會員、廣告后的另一個掘金源。

　　微信小程序允許人們無需進行下載安裝就使用App。用戶可以在微信上掃描二維碼來打開程序。微信小程序可以應(yīng)用在安卓和iOS等不同系統(tǒng)上，也可以在不同的平臺上分享，因為它本身就類似一個網(wǎng)站頁面。

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

整個系統(tǒng)分為兩塊視圖層（View）和邏輯層（App Service）

框架可以讓數(shù)據(jù)與視圖非常簡單地保持同步。當做數(shù)據(jù)修改的時候，只需要在邏輯層修改數(shù)據(jù)，視圖層就會做相應(yīng)的更新。

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

<!-- 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'
  })
 }
})

1. 開發(fā)者通過框架將邏輯層數(shù)據(jù)中的 name 與視圖層的 name 進行了綁定，所以在頁面一打開的時候會顯示 Hello WeChat!

2. 當點擊按鈕的時候，視圖層會發(fā)送 changeName 的事件給邏輯層，邏輯層找到對應(yīng)的事件處理函數(shù)

3. 邏輯層執(zhí)行了 setData 的操作，將 name 從 WeChat 變?yōu)?MINA，因為該數(shù)據(jù)和視圖層已經(jīng)綁定了，從而視圖層會自動改變?yōu)?Hello MINA! 。

視圖層為 xx.xml

邏輯層為 xx.js

讀取時會先看邏輯層初始數(shù)據(jù)來填充視圖層，視圖層觸發(fā)邏輯層中的事件，邏輯層返回并改變視圖層的內(nèi)容。

邏輯層(App Service)

小程序開發(fā)框架的邏輯層是由JavaScript編寫。

邏輯層將數(shù)據(jù)進行處理后發(fā)送給視圖層，同時接受視圖層的事件反饋。 在 JavaScript 的基礎(chǔ)上，我們做了一些修改，以方便地開發(fā)小程序。

1. 增加 App 和 Page 方法，進行程序和頁面的注冊。

2. 提供豐富的 API，如掃一掃，支付等微信特有能力。

3. 每個頁面有獨立的作用域，并提供模塊化能力。

4. 由于框架并非運行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。

5. 開發(fā)者寫的所有代碼最終將會打包成一份 JavaScript，并在小程序啟動的時候運行，直到小程序銷毀。類似 ServiceWorker，所以邏輯層也稱之為 App Service。
   

初始化數(shù)據(jù)

初始化數(shù)據(jù)將作為頁面的第一次渲染。data 將會以 JSON 的形式由邏輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成 JSON 的格式：字符串，數(shù)字，布爾值，對象，數(shù)組。

渲染層可以通過 WXML 對數(shù)據(jù)進行綁定。

示例代碼：

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
 data: {
  text: 'init data',
  array: [{msg: '1'}, {msg: '2'}]
 }
})

Page.prototype.setData()

setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時改變對應(yīng)的 this.data 的值。

注意：

1.直接修改 this.data 無效，無法改變頁面的狀態(tài)，還會造成數(shù)據(jù)不一致。
2.單次設(shè)置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設(shè)置過多的數(shù)據(jù)

setData() 參數(shù)格式

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

其中 key 可以非常靈活，以數(shù)據(jù)路徑的形式給出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中預(yù)先定義。

示例代碼：

<!--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.js
Page({
 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 編寫，由組件來進行展示。

將邏輯層的數(shù)據(jù)反應(yīng)成視圖，同時將視圖層的事件發(fā)送給邏輯層。

WXML(WeiXin Markup language)用于描述頁面的結(jié)構(gòu)。

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

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

什么是事件

1. 事件是視圖層到邏輯層的通訊方式。

2. 事件可以將用戶的行為反饋到邏輯層進行處理。

3. 事件可以綁定在組件上，當達到觸發(fā)事件，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。

4. 事件對象可以攜帶額外信息，如id, dataset, touches。
   

事件的使用方式

在組件中綁定一個事件處理函數(shù)。

如bindtap，當用戶點擊該組件的時候會在該頁面對應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù)，參數(shù)是event。
Page({
 tapName: function(event) {
  console.log(event)
 }
})

基礎(chǔ)組件

框架為開發(fā)者提供了一系列基礎(chǔ)組件，開發(fā)者可以通過組合這些基礎(chǔ)組件進行快速開發(fā)。

什么是組件：

1. 組件是視圖層的基本組成單元。

2. 組件自帶一些功能與微信風(fēng)格的樣式。

3. 一個組件通常包括開始標簽和結(jié)束標簽，屬性用來修飾這個組件，內(nèi)容在兩個標簽之內(nèi)。

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

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

以上是“小程序視圖層和邏輯層的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！