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