詳解微信開發中視圖層（xx.xml)與邏輯層(xx.js)

這篇文章主要介紹了微信小程式視圖層（xx.xml)和邏輯層(xx.js)詳細介紹的相關資料,需要的朋友可以參考下

微信小程式可以理解為雲OS的概念，微信生態本身就是一個OS。加上微信公眾平台和微信開發平臺本身已經是非常成熟的架構，能夠完美媲美App的功能，同時在互動體驗方面也能夠做到極致，大有取代App之勢。蘋果App Store模式的意義在於為第三方軟體的提供者提供了一個方便且有效率的軟體銷售平台。用戶購買應用程式所支付的費用由蘋果與應用程式開發商3：7分成。如果微信小程式商城也採用類似的分傭模式，那麼8億多的用戶將是一個非常大的無形資產，成為騰訊繼遊戲、會員、廣告後的另一個掘金源。

　　微信小程式允許人們無需進行下載安裝就使用App。使用者可以在微信上掃描二維碼來開啟程式。微信小程式可以應用在安卓和iOS等不同系統上，也可以在不同的平台上分享，因為它本身就類似一個網站頁面。

小程式視圖層（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: &#39;WeChat&#39;
}

// Register a Page.
Page({
 data: helloData,
 changeName: function(e) {
  // sent data change to view
  this.setData({
   name: &#39;MINA&#39;
  })
 }
})

1. 開發者透過框架將邏輯層資料中的name 與視圖層的name 進行了綁定，所以在頁面一開啟的時候會顯示Hello WeChat!

2. 當點擊按鈕的時候，視圖層會發送changeName 的事件給邏輯層，邏輯層找到對應的事件處理函數

3. 邏輯層執行了setData 的操作，將name 從WeChat 變成MINA，因為該資料和視圖層已經綁定了，因此視圖層會自動變更為Hello MINA! 。

視圖層為xx.xml

#邏輯層為xx.js

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

 邏輯層(App Service)

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

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

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

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

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

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

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

初始化資料

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

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

範例程式碼：

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

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.js
Page({
 data: {
  text: &#39;init data&#39;,
  array: [{text: &#39;init data&#39;}],
  object: {
   text: &#39;init data&#39;
  }
 },
 changeText: function() {
  // this.data.text = &#39;changed data&#39; // bad, it can not work
  this.setData({
   text: &#39;changed data&#39;
  })
 },
 changeItemInArray: function() {
  // you can use this way to modify a danamic data path
  this.setData({
   &#39;array[0].text&#39;:&#39;changed data&#39;
  })
 },
 changeItemInObject: function(){
  this.setData({
   &#39;object.text&#39;: &#39;changed data&#39;
  });
 },
 addNewField: function() {
  this.setData({
   &#39;newField.text&#39;: &#39;new data&#39;
  })
 }
})

視圖層

#框架的視圖層由WXML 與

WXSS 編寫，由組件來進行展示。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language)用于描述页面的结构。

WXSS(WeiXin Style Sheet)用于描述页面的样式。

组件(Component)是视图的基本组成单元。

什么是事件

1. 事件是视图层到逻辑层的通讯方式。

2. 事件可以将用户的行为反馈到逻辑层进行处理。

3. 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

4. 事件对象可以携带额外信息，如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)
 }
})

基础组件

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

什么是组件：

1. 组件是视图层的基本组成单元。

2. 组件自带一些功能与微信风格的样式。

3. 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

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

注意：所有组件与属性都是小写，以连字符-连接

【相关推荐】

1. 微信小程序之页面传值详解

2. 微信小程序开发样式常见的问题整理

3. 利用组件开发微信小程序日历的详细方法

4. 小程序开发之利用co处理异步流程的实例教程

以上是詳解微信開發中視圖層（xx.xml)與邏輯層(xx.js)的詳細內容。更多資訊請關注PHP中文網其他相關文章！