视图层 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>