微信小程序

微信小程序

2025/5/8 12:40:00 来源：https://blog.csdn.net/weixin_57535054/article/details/147523830 浏览: 次关键词：微信小程序

1. `.js`（JavaScript 文件）

用途：
- 前端开发中用于实现页面逻辑、交互效果和数据处理。
- 在小程序开发中，负责页面的业务逻辑（如数据请求、事件响应）和小程序的生命周期管理。
示例场景：
- 网页中按钮点击事件触发的逻辑。
- 小程序中从服务器获取数据并渲染到页面。

2. `.json`（JSON 文件）

用途：
- 存储和传输结构化数据（键值对形式），常用于配置文件或数据交换。
- 在小程序中，用于配置页面路径、窗口样式、全局设置（如 app.json）或页面级配置（如 page.json）。

示例内容：

json

{"pages": ["pages/index/index","pages/logs/logs"],"window": {"navigationBarTitleText": "小程序示例"}
}

3. `.wxml`（WeiXin Markup Language，微信标记语言）

用途：
- 微信小程序的页面结构层，类似 HTML，用于描述页面的布局和组件。
- 通过标签（如 <view>、<text>、<image>）和模板语法（如 {{data}}、wx:if、wx:for）搭建页面结构。
特点：
- 基于 XML 语法，专为小程序设计，支持数据绑定和条件渲染。
- 与 JavaScript 逻辑层分离，通过 WXML 模板引用 JS 中的数据。

示例代码：

wxml

<view class="container"><text>当前时间：{{time}}</text><button wx:if="{{canIUse}}" bindtap="handleTap">点击我</button>
</view>

4. `.wxss`（WeiXin Style Sheet，微信样式表）

用途：
- 微信小程序的样式层，类似 CSS，用于定义页面的样式和布局（如颜色、字体、盒模型等）。
- 支持大部分 CSS 语法，并扩展了 rpx（响应式像素）等小程序特有的单位。
特点：
- 可通过类名（class）或内联样式（style）应用样式。
- 支持全局样式（app.wxss）和页面级样式（page.wxss），优先级遵循 CSS 规则。

示例代码：

wxss

.container {display: flex;flex-direction: column;align-items: center;padding: 20rpx;background-color: #f0f0f0;
}button {color: white;background-color: #1aad19;margin-top: 30rpx;
}

总结对比

文件类型	作用领域	核心功能	类比对象
`.js`	逻辑层	实现交互逻辑和数据处理	JavaScript
`.json`	配置 / 数据层	存储配置或结构化数据	JSON 格式
`.wxml`	结构层	定义页面布局和组件结构	HTML
`.wxss`	样式层	控制页面样式和视觉表现	CSS