微信小程序组件

常位于同一个目录下，且具有相同的文件名（后缀不同），例如 index.js, index.json, index.wxml, index.wxss。小程序框架会自动将它们关联起来。

1. .js 文件 - 逻辑层

作用：处理页面的业务逻辑、数据、生命周期、用户交互事件等。 它是页面的“大脑”。

• 数据处理：定义页面的初始数据 (data 对象)，并通过 setData 方法修改数据，驱动视图更新。

• 生命周期函数：监听页面的生命周期，如页面加载 (onLoad)、显示 (onShow)、初次渲染完成 (onReady)、隐藏 (onHide)、卸载 (onUnload) 等，以便在特定时机执行相应的代码。

• 事件处理：定义用户交互（如点击、输入、滑动等）后触发的函数。

• API 调用：调用微信小程序提供的丰富 API，如网络请求 (wx.request)、获取用户信息 (wx.getUserProfile)、本地存储 (wx.setStorage)、支付等。

简单来说：.js 文件负责“做什么”和“怎么做”。

示例代码 (index.js)：

// index.js
Page({
  // 页面的初始数据
  data: {
    message: 'Hello World!',
    count: 0
  },

  // 生命周期函数--监听页面加载
  onLoad(options) {
    console.log('页面加载了')
  },

  // 自定义事件处理函数
  onTapButton() {
    // 修改数据，视图会自动更新
    this.setData({
      count: this.data.count + 1
    })
  }
})

---

2. .wxml 文件 - 视图层

作用：描述页面的结构和布局。 它相当于网页中的 .html 文件，是小程序的“骨架”。

• 标签语言：使用一套由微信自定义的标签组件（如 <view>, <text>, <image>, <button>）来搭建页面结构，而不是 HTML 的 <div>, <span>, <img> 等。

• 数据绑定：使用 Mustache 语法（双大括号 {{ }}）将 .wxml 中的组件和 .js 文件中的 data 数据进行绑定。当数据发生变化时，视图会自动更新。

• 列表渲染：使用 wx:for 指令来循环渲染一个列表数据。

• 条件渲染：使用 wx:if, wx:elif, wx:else 指令来按条件显示或隐藏组件。

• 事件绑定：使用 bindtap, bindinput 等属性来绑定用户事件（如点击、输入）到 .js 文件中定义的事件处理函数。

简单来说：.wxml 文件负责“长什么样”和“有什么内容”。

示例代码 (index.wxml)：

<!-- index.wxml -->
<view class="container">
  <!-- 数据绑定：显示 js 中 data 的 message 变量 -->
  <text>{{message}}</text>

  <!-- 显示 js 中 data 的 count 变量 -->
  <text>你点击了 {{count}} 次</text>

  <!-- 事件绑定：点击按钮触发 js 中的 onTapButton 方法 -->
  <button bindtap="onTapButton">点击我+1</button>

  <!-- 条件渲染 -->
  <view wx:if="{{count >= 5}}">恭喜你点击了5次以上！</view>

  <!-- 列表渲染 -->
  <view wx:for="{{['A', 'B', 'C']}}" wx:key="*this">
    当前项：{{index}} - {{item}}
  </view>
</view>

---

3. .wxss 文件 - 样式层

作用：描述页面的样式和外观。 它相当于网页中的 .css 文件，是小程序的“皮肤”和“衣服”。

• 样式规则：基本遵循 CSS 的语法和规范，包括选择器、属性、值等。

• 扩展特性：

  • 尺寸单位 rpx： responsive pixel，可以根据屏幕宽度进行自适应，使得在不同尺寸的屏幕上元素可以等比缩放。

  • 样式导入：使用 @import 语句可以导入外部的 .wxss 文件，有利于代码模块化和复用。

简单来说：.wxss 文件负责“好不好看”和“什么颜色、多大、放在哪”。

示例代码 (index.wxss)：

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx; /* 使用 rpx 单位 */
}

text {
  font-size: 16px;
  color: #333;
  margin-bottom: 20rpx;
}

button {
  background-color: #07c160;
  color: white;
}

---

4. .json 文件 - 配置层

作用：对页面或整个小程序进行静态配置。 它负责“如何配置”。

• 页面级配置 (页面名.json)：用于配置当前页面的窗口表现，如导航栏标题、背景色、是否允许下拉刷新等。这些配置只能覆盖 app.json 中 window 下的全局配置，而无法覆盖 app.json 中的其他配置（如 tabBar）。

• 全局配置 (app.json)：这是项目根目录下的特殊配置文件，用于配置小程序的全局属性，包括页面路径列表、窗口表现、底部 tab 栏、网络超时时间等。

简单来说：.json 文件负责“如何配置”，它不处理逻辑，只进行静态设置。

示例代码 (index.json)：

json

{
  "usingComponents": {}, // 声明本页面需要使用的自定义组件
  "navigationBarTitleText": "首页", // 设置本页面的导航栏标题
  "enablePullDownRefresh": true // 开启本页面的下拉刷新功能
}

---

总结与关系

文件类型	角色	职责	类比Web
.js	大脑	处理逻辑、数据、生命周期、事件	JavaScript
.wxml	骨架	构建页面结构、数据绑定、列表/条件渲染	HTML
.wxss	皮肤	定义页面样式、布局、外观	CSS
.json	配置单	静态配置页面或全局窗口行为	无直接对应，可理解为配置元数据

文件进行协同工作：

1. 用户打开小程序，框架首先读取 app.json 了解全局配置和页面路径。

2. 加载一个页面（如 index）时，框架会找到 index 目录下的四个文件。

3. 首先解析 index.json，获取该页面的特定配置。

4. 同时，执行 index.js 中的逻辑，初始化数据 (data)。

5. 将 index.js 中的 data 数据传递给 index.wxml，结合其模板结构，渲染出最终的页面结构。

6. index.wxss 中的样式规则被应用到 index.wxml 的组件上，完成页面的美化。

7. 当用户点击按钮（在 .wxml 中绑定），会触发 .js 中对应的事件处理函数。

8. 函数通过 setData() 修改数据，数据变化后，视图层 (．wxml) 会自动更新，显示出新的内容。