微信小程序WXML、WXSS、事件系统、WXS、组件(详解)--看完就会写微信小程序。前面还有基础教程

三、视图层概述

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

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

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

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

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

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

四、WXML语法

1.wxml概述及作用

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

2.数据绑定

<!-- 关键词绑定
      都加双花括号
-->

<view hidden="{
    { false  }}">
  显示
</view>

<!-- 运算
        算数运算
        字符串运算
        三元运算
        路径运算
-->

<view>{
  {num+num1}}</view>
<!-- 82466 -->
<view>{
  {8+num2+num1}}</view>
<view>{
  {score>=60?'及格':'不及格'}}</view>
<view>{
  {arr[2]}}</view>
<view>{
  {info.name}}====={
  {info.age}}</view>
<view>{
  {goods[2].price}}====={
  {goods[2].goodsname}}</view>

3.列表渲染wx:for

<!-- 
  可以给item和index  起别名
  wx:for-item
  wx:for-index
 -->
<view wx:for="{
    {arr}}" wx:for-item="value" wx:for-index="idx" wx:key="*this">
{
  {idx}}----{
  {value}}--{
  {item}}
</view>

<!-- 嵌套实现九九乘法表 -->
<view wx:for="{
    {[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
  <view wx:for="{
    {[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
      <view wx:if="{
    {i<=j}}">
      
          {
  {i}}*{
  {j}}={
  {i*j}}
      </view>
  </view>
</view>

<!-- 
	wx：key 
    如果列表是静态的，不用处理没有任何影响
    如果列表是动态的，必须处理

    处理两种方法：
        wx:key= "*this"
            *this  当item是唯一的字符串或者数字时
        wx:key="唯一的属性"



 -->

 <view wx:for="{
    {goods}}" wx:key="id">
  {
  {item.price}}==={
  {item.goodsname}}
 </view>




 <!-- block  相当于容器，不会解析出任何元素。就是一个包装元素 
      类似于vue里template
-->
 <block wx:for="{
    {[1,2,3,4]}}">
   <view>{
  {index}}</view>
   <view>{
  {item}}</view>
 </block>

 <block wx:if="{
    {true}}">
   <view>
     一个个列表
   </view>
 </block>

 <block wx:else>
   <view>暂无数据</view>