WXML 文件
html
<!-- 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)
html
<!-- template.wxml -->
<template name="userTemplate">
<!-- 模板定义: 渲染传入的 user 数据 -->
<view>{{user.name}}</view>
</template>
JS 文件
javascript
// 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 文件
javascript
{
// 当前页面所使用的自定义组件
"usingComponents": {}
}