视图层

框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。

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

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

WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

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

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

WXML相当于HTML,展示出了页面的一些基本的内容格式。
1.数据绑定。
{{变量名}}与page.js之中的数据进行绑定。
逻辑判断:
字符串运算:{{"hello" + name}}

2.列表渲染。wx:for,当前下标index,当前变量名item,相当于for循环遍历数组
  使用 wx:for-item 可以指定数组当前元素的变量名,
  使用 wx:for-index 可以指定数组当前下标的变量名:
3.类似 block wx:if,也可以将 wx:for 用在<block/>标签上,以渲染一个包含多                    
   节点的结构块
4.条件渲染
  wx:if,wx:elif 和 wx:else 
  block wx:if

WXSS相当于CSS
1.样式导入,使用@import语句可以导入外联样式表,@import后跟需要导入的外
联样式表的相对路径,用;表示语句结束。
2.内联样式:静态的样式统一写到 class 中,style 接收动态的样式

WXS是一种脚本语言,结合 WXML,可以构建出页面的结构。

上一篇:微信小程序之数据请求


下一篇:微信小程序showToast延迟跳转页面