小程序常用的模板语法

前端-七木2024-08-27 13:15

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": {}
}