WXML语法

1.数据绑定

• 将数据仓库data中的数据绑定显示在页面中。
• 语法：{{ 变量 }}，称为“Mustache”语法，也称为插值表达式
• 作用：用于在页面中插入值，进行数据的绑定显示，且当值发生变化时页面会重新渲染加载，称为响应式特性，即数据状态同步。

wxml示例代码：

<!--
    数据绑定
-->
<view class="title">数据绑定</view>
<view>{{ name }}</view>
<!-- 可以为属性绑定值 -->
<view id="{{ name }}">姓名</view>
<view>{{ age }}</view>
<view>{{ bool }}</view>
<view>{{ str }}</view>
<view>{{ arr }}</view>
<!-- 自定义对象会显示为object -->
<view>{{ user }}</view>
<view>{{ time }}</view>
<!-- 当值为undefined或变更不存在时，显示空字符串 -->
<view>{{ hobby }}</view>
<view>{{ address }}</view>
<view>---------------------------------</view>
<!--
  简单的运算操作
-->
<view>{{ age + 2 }}</view>
<view>{{ bool && false }}</view>
<view>{{ age < 18 }}</view>
<view>{{ age >= 18 ? '成年人' : '未成年人' }}</view>
<view>{{ user.name }}</view> 
<view>{{ arr[2] }}</view> 
<view>---------------------------------</view>
<!--
  直接定义值
-->
<view>{{ 'rick' }}</view>
<view>{{ 38 }}</view>
<view>{{ true }}</view>
<view>{{ [1,2,3,4,5] }}</view>
<view>{{ {username:'leo',password:'xxxxxx'} }}</view>  <!-- 直接定义对象时两边必须有空格 -->
<!-- 不能在插值表达{{}}中调用JS内置对象 -->
<!-- <view>{{ new Date() }}</view> -->

js示例代码：

Page({
  data:{
    name:'rick',
    age:18,
    bool:true,
    str:null,
    arr:[1,3,5,7,9],
    user:{
      id:9527,
      name:'周星驰',
      age:27
    },
    time:new Date(),
    hobby:undefined
  }
})

2.条件和列表渲染

• 条件渲染：语法 wx:if=“”，判断是否需要渲染组件，取值可以是任意类型，最终都会转换为boolean，根据boolean结果，执行元素的创建和删除操作，控制元素的显示隐藏
• 列表渲染：语法 wx:for=“”，循环多次渲染组件，取值为Array|Object|number|string，会基于数据重复渲染组件，用于循环数据，循环时默认使用index和item表示当前元素的下标变量名和元素变量名

wxml示例代码：

<!-- 条件和列表渲染 -->
<view class="title">条件和列表渲染</view>
<view style="width:100rpx;height:100rpx;background: red;" wx:if="{{ bool }}"></view>
<!-- 使用wx:elif 和 wx:else -->
<view wx:if="{{ age <= 6 }}">童年</view>
<view wx:elif="{{ age <= 18 }}">少年</view>
<view wx:elif="{{ age <= 60 }}">中年</view>
<view wx:else>老年</view>
<view>---------------------------------</view>
<!-- 可以使用<block>标签将多个组件包装起来，不控制页面结构 -->
<block wx:if="{{ name == 'rick' }}">
  <text>aaa</text>
  <text>bbb</text>
  <text>ccc</text>
</block>

<!--
  列表渲染
    1.循环时默认使用index和item表示当前元素的下标变量名和元素变量名
    2.可以指定wx:key属性，作用：1）提升性能 2）跟踪每个节点的身份状态
-->
<!-- 循环数组 -->
<view wx:for="{{ arr }}" wx:key="index">{{ index }} = {{ item }}</view>
<view>---------------------------------</view>
<view wx:for="{{ arr }}" wx:for-item="num" wx:for-index="i" wx:key="index">{{ i }} = {{ num }}</view>
<view>---------------------------------</view>
<!-- 循环对象 -->
<view wx:for="{{ user }}" wx:key="index">{{ index }} = {{ item }}</view>
<view>---------------------------------</view>
<!-- 循环数字 -->
<view wx:for="{{ 4 }}" wx:key="index">{{ index }} = {{ item }}</view>
<view>---------------------------------</view>
<!-- 循环字符串 -->
<view wx:for="{{ name }}" wx:key="index">{{ index }} = {{ item }}</view>
<view>---------------------------------</view>
<!-- 循环对象数组：二重循环 -->
<view wx:for="{{ users }}" wx:for-item="u" wx:key="u">
  <text wx:for="{{ u }}" wx:for-index="k" wx:for-item="v" wx:key="k">{{ k }} = {{ v }}</text>
</view>
<view>---------------------------------</view>
<!-- 使得block标签装饰组件包装起来 -->
<block wx:for="{{ user }}">
  <view>{{ index }}</view>
  <view>{{ item }}</view>
</block>

js示例代码：

Page({
    users:[
      {
        id:1001,
        name:'a001',
        age:18
      },{
        id:1002,
        name:'a002',
        age:28
      },{
        id:1003,
        name:'a003',
        age:38
      }
    ]
  }
})

3.模板

使用模板template可以定义代码片段，然后在不同的地方调用，实现页面代码结构的复用。
使用步骤：

• 定义模板，通过name属性指定模板名称
• 调用模板，通过is属性指定要调用的模板

wxml示例代码：

<!-- 
  模版的基本用法
 -->
 <view class="title">模版的基本用法</view>
 <!-- 1.定义模版 -->
 <template name="hello">
  <view>abcd</view>
  <view>1234</view>
  <view>{{ name }}</view>
  <view>{{ age }}</view>
 </template>
 <!-- 2.调用模版 -->
 <!-- 模版中不能直接访问页面的数据，需要在调用模版时使用data属性将数据传入（有点类似与调用函数时的传参） -->
 <!-- 传入多个数据以逗号隔开 -->
 <template is="hello" data="{{ name,age }}"></template>
 <view>----------------------------------------</view>
 <!-- 使用展开运算符，直接将user对象展开 -->
 <template is="hello" data="{{ ...user }}"></template>
<!-- 
  使用wx:for循环调用模版
 -->
 <view class="title">使用wx:for循环调用模版</view>
 <template name="hello2">
  <view>用户信息</view>
  <text>用户ID：{{ usr.id }}，</text>
  <text>用户名称：{{ usr.name }}，</text>
  <text>用户年龄：{{ usr.age }}</text>
 </template> 
 <template is="hello2" wx:for="{{ users }}" wx:for-item="usr" data="{{ usr }}"></template>
 <!-- 
   外部模版调用：使用import引用外部文件
   模版样式加载：
    1.加载全局样式
    2.加载引用模版页面的局部样式
    3.对于独立的外部模版样式文件，可以在引用该模版的页面中通过import导入
  -->
<view class="title">外部模版调用</view>
<!-- 引入外部模版文件，需要指定模版文件的命名 -->
<import src="/template/product/product"></import>
<template is="productA" data="{{ ...user }}"></template>
<view>----------------------------------------</view>
<template is="productB" data="{{ name }}"></template>
<!-- 
  动态调用模版
 -->
<view class="title">动态调用模版</view>
<template is="{{ product }}" data="{{ ...user }}"></template>
<!-- 
  使用include引用文件
    相当于将引用文件拷贝到include的位置
 -->
<view class="title">使用include引用文件</view>
<include src="/template/header/header.wxml"></include>
<view>body</view>
<include src="/template/footer/footer.wxml"></include>

wxss示例代码：

.temp-icon {
  color:red;
}

@import "/template/product/product.wxss";

js示例代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    name:'jack',
    age:43,
    user:{
      id:1001,
      name:'rose',
      age:23
    },
    users:[
      {
        id:'0001',
        name:'1号',
        age:10
      },{
        id:'0002',
        name:'2号',
        age:20
      },{
        id:'0003',
        name:'30号',
        age:30
      }
    ],
    product:'productA'
  }
})

单独模版文件.wxml

<!-- 该文件用来定义模版内容 -->
<template name="productA">
  <text>产品id:{{ id }}</text>
  <text class="iconfont icon-cart temp-icon product-icon"></text>
</template>

<template name="productB">
  <text>产品名称:{{ name }}</text>
</template>

单独模版文件.wxss

.product-icon {
  font-size: 30px;
}

4.事件绑定

4.1 事件分类

• 普通事件
• 组件内置事件

4.2 事件绑定方式

• bin事件名=“函数名” 或 bind:事件名=“函数名”，触发事件昌泡
• catch事件名=“函数名” 或 catch:事件名=“函数名”，阻止事件昌泡

4.3 参数传递

• 在组件标签上，以 data-参数名=“参数值” 方式进行参数传递
• 在事件回调函数中，接收 event 事件对象为参数，通过 event.currentTarget.dataset 获取传递的参数变量

wxml示例代码：

<!-- 
  普通事件
 -->
<view class="title">普通事件</view>
<button type="primary" id="myButton" size="default" bindtap="onClick">点击</button>
<viwe bind:tap="onClick">点击</viwe>
<!-- 事件昌泡（bind绑定事件：触发事件昌泡，catch绑定事件：阻止事件昌泡） -->
<view class="box1" bindtap="tapBox1">box1
  <view class="box2" bindtap="tapBox2">box2
    <!-- <view class="box3" bindtap="tapBox3">box3</view> -->
    <view class="box3" catchtap="tapBox3">box3</view>
  </view>
</view>

<!-- 
  组件内置事件
 -->
<view class="title">组件内置事件</view>
<view>
  <view>昵称：{{ user.nickName }}</view>
  <image src="{{ user.avatarUrl }}"></image>
  <button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button>
</view>

<!-- 
  事件传参
 -->
<view class="title">事件传参</view>
<view>
  <button type="primary" bindtap="onParam" data-info="信息1">参数传递</button>
  <!-- 参数命名两种方式：1.驼峰式命名会自动转换为小写字母 2.连字符会转换为驼峰式 -->
  <!-- 例如：data-infoName 参数在后台识别为 infoname，data-info-name 参数在后台识别为 infoName -->
  <button type="primary" bindtap="onParam2" data-infoName="信息2" data-info-name="信息A">参数传递2</button>
</view>
<!-- 循环传递参数 -->
<view wx:for="{{ arr }}" wx:key="index" bindtap="onParam2" data-num="{{ item }}">{{ item }}</view>

<!-- 
  表单数据获取
 -->
<view class="title">表单数据获取</view>
<view>{{ inputValue }}</view>
<!-- 双向数据绑定 -->
<input bindinput="onInput" value="{{ inputValue }}"></input>
<!-- 单选框和复选框 -->
<checkbox-group bindchange="onCheckBox">
  <checkbox wx:key="index" wx:for="{{ countrys }}" checked="{{ item.checked }}" value="{{ item.name }}">{{ item.value }}</checkbox>
</checkbox-group>
<!-- picker -->
<picker
  mode="selector"
  range="{{ countrys }}"
  range-key="value"
  bindchange="onPicker"
>{{ countrys[index].value }}</picker>

js示例代码：

Page({
  data:{
    user:null,
    arr:[1,2,3,4,5],
    inputValue:null,
    countrys:[
      {name:'CHN',value:'中国',checked:'true'},
      {name:'USA',value:'美国'},
      {name:'JPN',value:'日本'},
      {name:'ENG',value:'英国'}
    ],
    index:0
  },
  onClick(e){ // 参数 e 表示事件对象
    console.log('被点击了',e)
  },
  tapBox1(){
    console.log('点击了box1')
  },
  tapBox2(){
    console.log('点击了box2')
  },
  tapBox3(){
    console.log('点击了box3')
  },
  getUserInfo(e){
    this.setData({
      user:e.detail.userInfo
    })
  },
  onParam(e){
    console.log(e.currentTarget.dataset.info); // 获取传递的参数
  },
  onParam2({currentTarget:{dataset}}){ // 通过es6的解构赋值
    console.log(dataset)
  },
  onInput(e){
    console.log(e.detail.value); // 获取表单元素的值
    this.setData({
      inputValue:e.detail.value
    })
  },
  onCheckBox(e){
    console.log(e.detail.value)
  },
  onPicker(e){
    console.log(e)
    this.setData({
      index:e.detail.value
    })
  }
})

wxss示例代码：

.box1,.box2,.box3 {
  border: 1px solid #ccc;
}
.box1 {
  height: 300px;
  width: 300px;
}
.box2 {
  height: 200px;
  width: 200px;
}
.box3 {
  height: 100px;
  width: 100px;
}
input {
  background: #999999;
  border-radius: 10px;
  padding: 20rpx;
}
page {
  margin-bottom: 500rpx;
}

5.WXS语法

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXS与JavaScript不同，可以在wxml页面中完成JS脚本嵌套，为插值表达式提供脚本方法调用，实现数据的包装处理。
用法：

• 局部脚本：定义在对应页面的wxml文件中，只能在当前页面使用
• 全局脚本：使用独立的.wxs文件进行定义，在需要使用的页面中进行导入

wxml示例代码：

<!-- 
  在微信小程序中，不能在插值表达式中调用JS内置对象，所以无法在页面上直接对数据进行包装处理
 -->
<view>{{ num }}</view>
<!-- <view>{{ num.toFixed(2) }}</view> -->

<!-- 
  局部脚本
  1.wxs区域是一个封闭的语法环境，默认定义的成员都是私有的，只能在wxs区域内调用
  2.必须使用module.exports = { } 向外暴露要共享的变量和函数
  3.对外共享的成员，将存储于module属性所指定的模块对象中
  4.为了语法兼容，wxs区域中只能使用ES5语法，且只支持部份js语法
 -->
<view class="title">局部脚本</view>
<wxs module="myModule">
  var name = 'rick'; 
  // let age = 20; // 不支持ES6语法
  var age = 22;

  function round(num,len){
    len = len || 2;
    if (typeof num == 'number'){
      return num.toFixed(len);
    }
    return num;
  }

  module.exports = {
    name:name,
    age:age,
    round:round
  }
</wxs>
<!-- 通过 模块名.成员 方式访问 -->
<view>{{ myModule.name }}</view>
<view>{{ myModule.age }}</view>
<view>{{ myModule.round(num) }}</view>
<view>{{ myModule.round(num,2) }}</view>
<view>{{ myModule.round(num,3) }}</view>
<view>{{ myModule.round(num,1) }}</view>

<!-- 
  全局脚本
 -->
<view class="title">全局脚本</view>
<!-- 引入时只能使用相对路径，不能使用绝对路径 -->
<wxs src="../../utils/tools.wxs" module="tools"></wxs>
<view>{{ tools.round(num,4) }}</view>

js示例代码：

Page({
  data:{
    num:1.23456789
  }
})

wxs示例代码：

// 直接定义脚本代码
function round(num,len){
  len = len || 2;
  if (typeof num == 'number'){
    return num.toFixed(len);
  }
  return num;
}

module.exports = {
  round:round
}