小程序常用的模板语法

WXML 文件 

<!-- page.wxml -->
<view><!-- 数据绑定: 将数据 message 绑定到视图中 --><view>{{message}}</view><!-- 条件渲染: 根据 isLoggedIn 的值显示不同的内容 --><view wx:if="{{isLoggedIn}}">Welcome back!</view><view wx:else>Please log in.</view><!-- 列表渲染: 遍历 items 数组，并为每个项渲染一个 text 标签 --><view wx:for="{{items}}" wx:key="id"><text>{{item.name}}</text></view><!-- 属性绑定: 将 imageUrl 绑定到 image 组件的 src 属性 --><image src="{{imageUrl}}" mode="aspectFill"/><!-- 事件绑定: 点击按钮时触发 handleTap 方法 --><button bindtap="handleTap(2)">Click Me</button><!-- 模板引用: 引用外部定义的 userTemplate 模板并传递数据 --><import src="template.wxml"/><template is="userTemplate" data="{{...user}}"/>
</view>

模板文件 (template.wxml)

<!-- template.wxml -->
<template name="userTemplate"><!-- 模板定义: 渲染传入的 user 数据 --><view>{{user.name}}</view>
</template>

JS 文件

// page.js
Page({// 页面初始数据定义data: {// message: 用于展示在页面中的文本信息message: 'Hello, WeChat Mini Program!',// isLoggedIn: 控制用户是否已登录的状态isLoggedIn: true,// items: 存储多个列表项的数据items: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' }],// user: 模板引用时传递的用户信息user: { name: 'John Doe' },// imageUrl: 绑定到 image 组件的图片路径imageUrl: '/images/sample.jpg'},// 事件处理函数: 处理按钮点击事件delItems(userId) {// 创建一个新的数组副本，过滤掉要删除的用户const updatedUsers = this.data.users.filter(user => user.id !== userId);// 更新数据this.setData({items: updatedUsers});// 通常使用数组方法（如 map、filter）创建数据的副本，以确保不直接修改原数据}
})

 JSON 文件

{// 当前页面所使用的自定义组件"usingComponents": {}
}