微信小程序教程03：WXML语法

[chencl1986]

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。

该教程示例代码：/lesson03/pages/index/index.js、/lesson03/pages/index/index.wxml

WXML介绍

WXML（WeiXin Markup Language）是属于微信视图层的一套标签语言，它与Vue的模板语法很相似。

数据绑定

与Vue语法一致，可以通过{{name}}将数据绑定到页面中，text标签默认为行内元素。

<!--index.wxml-->
<view>
  <text>{{name}}</text>
  <text>{{age}}</text>
  <view>{{name}}</view>
  <view>{{age}}</view>
</view>

列表渲染

列表渲染的属性，也需要写在{{}}中，如wx:for="{{arr}}"，若写成wx:for="arr"会被当做字符串处理。

遍历出的item和index都是默认的，不需要像Vue一样写成item, index in arr。
值得注意的是，遍历的项目也需要提供一个key。

<view>
  <view wx:for="{{arr}}" wx:key="{{index}}">{{item}}</view>
</view>

条件渲染

通过wx:if、wx:elif、wx:else，分别可以实现if、else...if、else的条件渲染。

<view wx:if="{{judge}}">
  <text>judge为true时显示</text>
</view>
<view wx:else>
  <text >judge为false时显示</text>
</view>

模板

小程序也同样支持template，可以给template标签设置name属性，表示该模板的名称。

在使用时通过is属性选择相应名称的template进行调用，并可以通过data属性传入相应参数。

<!--wxml-->
<template name="staffName">
  <view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// index.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

事件

为标签绑定事件，可以用bind + 事件名作为属性，方法名称不需要用{{}}绑定，与Vue不同，绑定的方法不支持传参。

由于小程序运行在移动端，绑定点击事件不能用bindclick，而需要用bindtap。

而在方法中获取数据需要用this.data[propName]，修改数据需要用this.setData方法，这一点类似于React。

在Page(Object) 构造器中，绑定的方法不用像Vue一样写在methods属性里，与data属性平级就可以。

<!--wxml-->
<button type="primary" bindtap="onTap">
  修改条件渲染
</button>

onTap() {
  this.setData({
    judge: !this.data.judge
  })
}

scroll-view

scroll-view用来创建一个滚动视图，但需要设置scroll-y="{{true}}才可开启纵轴方向的滚动，同时需要通过wxss设置高度，超出高度才会触发滚动。

<scroll-view scroll-y="{{true}}" style="height: 100rpx;">
  <view wx:for="{{arr}}" wx:key="{{index}}">{{item}}</view>
</scroll-view>

icon

icon用来创建一个图标，它可以通过type属性使用微信的内置图标类型，如success, success_no_circle, info, warn, waiting, cancel, download, search, clear。

还可以通过size设置大小，color设置颜色，所有图标都是矢量图，不需要担心缩放问题。

若需要为图标插入文本，使用text标签即可。

<icon type="success" size="23" color="green" />
<text >成功</text>

navigator

navigator类似于HTML中的a标签，可以通过url属性设置跳转地址，仅支持当前小程序内的跳转。

<navigator url="/pages/login/login">跳转到login</navigator>

radio和checkbox

radio和checkbox都需要放在radio-group和checkbox-group标签中使用，前者用于实现单选功能，后者用于数据分组。

<form action="">
  <radio-group>
    <label wx:for="{{options}}" wx:for-item="item" wx:key="{{item.id}}">
      <radio value="{{item.value}}" /> {{item.name}}
    </label>
  </radio-group>
  <checkbox-group>
    <label wx:for="{{options}}" wx:for-item="item" wx:key="{{item.id}}">
      <checkbox value="{{item.value}}" /> {{item.name}}
    </label>
  </checkbox-group>
</form>

picker

picker可以创建一个选择器，默认的mode为普通选择器selector，它还支持多列选择器，时间选择器，日期选择器，省市区选择器。

picker的children可以是一个标签，点击children时会弹出选择器。

picker的range属性为必须，它可以绑定Array / Object Array，其值为选择器的选项，当其类型为Object Array时，需要用range-key属性指定选择器显示的内容。

picker的value属性为必须，绑定的是选中项目的index。

当选择器发生选择时，需要通过bindchange事件改变绑定的value值，bindchange的参数为event，其中event.detail = {value: value}。

<form >
  <picker mode="selector" range="{{options}}" value="{{pickerSelected}}" bindchange="onPickerChange">
    <view >{{pickerSelected}}</view>
  </picker>
</form>

onPickerChange(event) {
  this.setData({
    pickerSelected: event.detail.value
  })
}