小程序学习日记（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