【0 基础学习微信小程序】5. 视图层（一）

菜鸟窝_程序员的黄埔军
1,111 阅读4分钟
原文链接： www.cniao5.com
本文为菜鸟窝编辑吴佳林的连载。

无论是APP还是前端，页面的重要性都是不言而喻，微信小程序也是如此。下次本章内容就主要介绍一下微信小程序的页面，也叫视图层。微信小程序的视图层由 WXML 与 WXSS 编写，由组件来进行展示。本章主要讲WXML

视图层

WXML，全称是 WeiXin Markup language ，用于描述页面的结构，跟 HTML 作用是一样的，但是比 HTML 强大一点，WXML 具有模板特性。WXML 的能力主要有有数据绑定，条件渲染，列表渲染，模板，事件，引用。

数据绑定
WXML 中的动态数据均来自对应 Page 的 data (关于 Page 函数可以参考之前一篇文章 模块化与page函数)。WXML 对数据绑定主要用 {{}} 将变量包起来，作用范围有：内容，组件属性，控制属性，关键字，运算，组合，看起来好像蛮多的，其实都是一通则百通，只要了解一个就可以扩展其它了。

  • 内容

    在 js 文件的 page 函数的 data 对象里面定义相关属性，然后再 WXML 的内容里面使用 {{}} 引用皆可到它的内容。

      <view> {{ name }} </view>

      Page({
    data: {
      name: 'wujialin'
    }
  })

  • 组件属性

    在 WXML 里面如果组件的属性，比如id (组件的唯一标示) ,hidden (组件是否显示) ,class (组件的样式类)……需要使用到 data 里面的数据，使用 {{}} 就可以直接使用。

      <view hidden="{{isShowName}}">
   {{name}}
  </view>

    
  Page({
    data: {
      name:'wujialin',
      isShowName:false
    }
  })

  • 控制属性

    不仅作用于组件属性，同样作用于控制属性，比如 wx:if , wx:elif （这个控制属性属于条件渲染里面，下面会讲到这个点。）

      <view wx:if="{{isShowName}}">{{name}}</view>
  <view wx:elif="{{isShowSex}}">{{sex}}</view>
  <view wx:else>没有用户信息</view>

      Page({
    data: {
      name:'wujialin',
      sex:'男',
      isShowName:false,
      isShowSex:true
    }
  })

  • 关键字

    在 WXML 里面如果要使用关键字，比如 true，false，需要使用 {{}} 将关键字进行包含使用 hidden="{{true}}" 不能在属性里面直接使用这个关键字 hidden="true" 否则只会被当作字符串。

  • 运算

    可以在 {{}} 内进行简单的运算,支持的运算有三元运算，算数运算，逻辑判断，字符串运算，数据路径运算

    • 三元运算

      <view hidden="{{isShowName?true:false}}">{{name}}</view>

    • 算数运算

      <view> {{a + b}} + {{c}} + d </view>

      Page({
data: {
  a: 1,
  b: 2,
  c: 3
}
})

    • 逻辑运算

      <view wx:if=="{{age>18}}">成年了</view>

      Page({
data: {
  age:19
}
})
      • 字符串运算 
      <view>{{"name" + sex}}</view>

    • 数据路径运算

      <view>{{object.key}} {{array[0]}}</view>

      Page({
data: {
  object: {
    key: 'Hello '
  },
  array: ['MINA']
}
})

  • 组合
    也可以在 {{}} 内直接进行组合，构成新的对象或者数组。

    • 数组

      可以在数组中直接引用 data 里面数据，只需要使用 {{}} 将数组进行包含即可。

      <view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

      Page({
  data: {
    zero: 0
  }
})

    • 对象

      在模板里面可以使用 {{}} 来构建一个对象。在下面举个简单的例子，具体关于模板的使用会在之后的文章会详细阐述。

      <template name="userInfo" >
<view>性别：{{sex}}</view>
<view>姓名：{{name}}</view>
</template>

<template is="userInfo" data="{{...item}}"></template>

条件渲染

条件渲染，也就是根据 if…elif…else 表达式的判断条件相关的组件是否需要渲染。你可以单独使用 wx:if="{{condition}}"，也可以配合 wx:elif 和 wx:else 进行使用。

    <view wx:if="{{age > 25}}"> 中年人 </view>
    <view wx:elif="{{age > 18}}"> 青少年 </view>
    <view wx:else> 儿童 </view>


    Page({
      data: {
        age: 19
      }
    })

当然这个条件渲染作用于 block 效果也是一样的,block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>
更多内容，请关注菜鸟窝（微信公众号ID: cniao5），程序猿的在线学习平台。 如需转载，请注明出处（菜鸟窝 ， 原文链接： http://www.cniao5.com/forum/thread/5a5a4faa19ea11e78c4100163e0230fa ）

关注公众号免费领取" N套客户端实战项目教程"

avatar
文章
阅读
粉丝