微信小程序开发：常用基础语法与指令详解

1. 数据绑定指令

数据绑定是微信小程序开发的核心，用于将逻辑层（Page）的数据动态渲染到视图层（WXML）。

1.1 Mustache 语法 ({{ }})

使用双大括号将变量包裹起来，可以绑定到文本内容、组件属性、控制属性等。

html 复制代码

<!-- 绑定文本内容 -->
<view>{{ message }}</view>

<!-- 绑定组件属性 -->
<view id="item-{{id}}">{{name}}</view>

<!-- 绑定控制属性 -->
<view wx:if="{{condition}}">显示内容</view>

在对应的 Page 的 data 中定义：

javascript 复制代码

Page({
  data: {
    message: 'Hello MiniProgram',
    id: 1,
    name: '示例',
    condition: true
  }
})

1.2 简单运算

可以在 {{ }} 内进行简单的三元运算、算术运算、逻辑判断等。

html 复制代码

<view>{{ a + b }}</view>
<view>{{ a > b ? '大于' : '小于等于' }}</view>
<view>{{ object.key }} {{ array[0] }}</view>

2. 列表渲染指令 (wx:for)

使用 wx:for 指令可以循环渲染一个数组，将数组中的每一项重复渲染。

html 复制代码

<view wx:for="{{array}}" wx:key="id">
  索引：{{index}}，值：{{item}}
</view>

默认的数组当前项变量名为 item，下标变量名为 index。可以使用 wx:for-item 和 wx:for-index 指定别名。

html 复制代码

<view wx:for="{{list}}" wx:for-item="student" wx:for-index="i" wx:key="id">
  第{{i}}个学生：{{student.name}}
</view>

注意： 必须为列表项指定唯一的 wx:key 以提高渲染性能，其值通常是数据项中的唯一标识字段。

3. 条件渲染指令

根据条件决定是否渲染某个组件。

3.1 wx:if / wx:elif / wx:else

类似于编程语言中的 if-else 语句。

html 复制代码

<view wx:if="{{score >= 90}}">优秀</view>
<view wx:elif="{{score >= 60}}">及格</view>
<view wx:else>不及格</view>

3.2 hidden

通过控制样式 display: none 来隐藏组件，组件始终会被渲染，只是不显示。

html 复制代码

<view hidden="{{isHidden}}">这段内容可能被隐藏</view>

区别： wx:if 是惰性的，条件为假时组件不会被渲染；hidden 组件始终存在，只是切换显示。频繁切换时用 hidden，运行时条件很少改变时用 wx:if。

4. 模板定义与使用 (template)

模板可以在多个地方复用相同的 WXML 结构。

4.1 定义模板

html 复制代码

<!-- 定义模板，使用 name 属性 -->
<template name="userCard">
  <view class="card">
    <image src="{{avatar}}"></image>
    <text>{{name}}</text>
    <text>{{bio}}</text>
  </view>
</template>

4.2 使用模板

html 复制代码

<!-- 使用 is 属性指定模板名称，用 data 传入数据 -->
<template is="userCard" data="{{...userInfo}}"/>

在 JS 中定义数据：

javascript 复制代码

Page({
  data: {
    userInfo: {
      avatar: '/images/avatar.png',
      name: '张三',
      bio: '前端开发者'
    }
  }
})

5. 事件绑定指令

通过事件绑定响应用户交互，如点击、输入、触摸等。

5.1 绑定事件处理函数

使用 bind 或 catch 前缀绑定事件。

html 复制代码

<!-- bind 绑定，事件会冒泡 -->
<button bindtap="handleTap">点击我</button>

<!-- catch 绑定，阻止事件冒泡 -->
<view catchtap="handleViewTap">
  <button catchtap="handleButtonTap">按钮</button>
</view>

5.2 事件对象

事件处理函数会收到一个事件对象，包含事件类型、目标、当前组件等信息。

javascript 复制代码

Page({
  handleTap: function(event) {
    console.log('事件类型:', event.type); // tap
    console.log('目标组件id:', event.currentTarget.id);
    console.log('触摸点信息:', event.touches);
  }
})

5.3 传递参数 (data-*)

通过 data-* 属性在组件上绑定自定义数据，在事件对象中获取。

html 复制代码

<view bindtap="onItemTap" data-id="{{item.id}}" data-index="{{index}}">
  点击项 {{item.name}}
</view>

javascript 复制代码

Page({
  onItemTap: function(event) {
    const id = event.currentTarget.dataset.id;
    const index = event.currentTarget.dataset.index;
    console.log(`点击了 id 为 ${id} 的第 ${index} 项`);
  }
})

6. 表单组件双向绑定 (model:value)

微信小程序基础库 2.9.3 起，部分表单组件支持简易双向绑定。

html 复制代码

<!-- 输入框双向绑定 -->
<input model:value="{{inputValue}}" />
<text>你输入了：{{inputValue}}</text>

<!-- 开关双向绑定 -->
<switch model:value="{{switchValue}}" />
<text>开关状态：{{switchValue}}</text>

在 JS 中定义初始值：

javascript 复制代码

Page({
  data: {
    inputValue: '',
    switchValue: false
  }
})

7. 引用文件指令

WXML 支持引用其他 WXML 文件，提高代码复用性。

7.1 import

import 可以在当前文件中使用目标文件定义的模板，但不会引入目标文件中的模板引用。

html 复制代码

<!-- 在 A.wxml 中 -->
<import src="B.wxml" />
<template is="templateB" data="{{...data}}"/>

7.2 include

include 会将目标文件中除了 <template/> 和 <wxs/> 的整个代码引入，相当于拷贝到当前位置。

html 复制代码

<!-- 引入公共头部 -->
<include src="header.wxml" />
<view>页面主体内容</view>
<!-- 引入公共底部 -->
<include src="footer.wxml" />

8. 总结

掌握微信小程序的基础语法和常用指令是开发的第一步。核心要点包括：

数据绑定 ({{}})：连接逻辑层与视图层的桥梁。
列表渲染 (wx:for) ：动态渲染数组数据，务必指定 wx:key。
条件渲染 (wx:if / hidden)：根据条件控制组件显示，理解两者的区别与适用场景。
事件绑定 (bind/catch)：响应用户交互，注意冒泡与阻止冒泡。
模板 (template)：复用 WXML 结构，提升开发效率。

建议在理解这些指令的基础上，结合官方文档和实际项目进行练习，以熟练掌握微信小程序的视图层开发。