小程序學習日記（10）——視圖層

視圖層 View

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

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

WXML(WeiXin Markup language) 用於描述頁面的結構。（類似HTML）

WXS(WeiXin Script) 是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。

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

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

WXML（先了解系統概念，WXML語法在後面學習）

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，可以構建出頁面的結構。

1、數據綁定

<code> 
 {{message}} /<code>

<code>// page.js
Page({
  data: {
    message: '小程序學習日記'
  }
})/<code>

2、列表渲染

<code> 
 {{item}} 
/<code>

<code>// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})/<code>

3、條件渲染

<code> 
 WEBVIEW 
 APP 
 MINA /<code>

<code>// page.js
Page({
  data: {
    view: 'MINA'     //如果這是的值  view : ‘APP’那麼網頁會顯示為APP
  }
})/<code>

4、模板

<code> 

  
    FirstName: {{firstName}}, LastName: {{lastName}}，中文名:{{ch}}
  




/<code>

<code>// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu',中文名:'趙' },
    staffB: {firstName: 'Shang', lastName: 'You',
            },
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})/<code>

關鍵字: Page page 視圖