微信官方小程序基础教程 - 代码构成
2026-03-15 04:32:06
微信官方小程序基础教程 - 代码构成
微信小程序由四种主要类型的文件构成，每种文件在小程序的开发和运行中扮演着不同的角色。以下是对这些文件的详细说明：
JSON 配置文件
app.json：这是小程序的全局配置文件，位于项目根目录。它定义了小程序的所有页面路径、窗口表现、网络超时时间、底部 tab 栏等。例如，pages 字段列出了小程序的所有页面路径，window 字段则用于设置小程序所有页面的顶部背景颜色、文字颜色等。
project.config.json：这是开发者工具的配置文件，同样位于项目根目录。它记录了开发者在工具中的个性化配置，如界面颜色、编译配置等。这样，当开发者更换电脑或重新安装工具时，只需载入同一个项目的代码包，开发者工具就能自动恢复到之前的个性化配置。
page.json：这是页面级别的配置文件，如 pages/logs/logs.json。它允许开发者为每个页面独立定义一些属性，如顶部颜色、是否允许下拉刷新等，从而覆盖全局配置中的相应设置。
WXML 模板文件
WXML（WeiXin Markup Language）是小程序的模板语言，类似于 HTML，用于描述页面的结构。它包含了一系列标签和属性，如 view、button、text 等，这些标签是小程序提供的基本组件。WXML 还支持数据绑定（使用 {{ }} 语法）和条件渲染（使用 wx:if 等属性），使得开发者可以更灵活地控制页面的显示逻辑。
WXSS 样式文件
WXSS（WeiXin Style Sheets）是小程序的样式语言，类似于 CSS，用于描述页面的样式。它支持 CSS 的大部分特性，并做了一些扩充和修改，如新增了 rpx 尺寸单位，以适应不同屏幕尺寸的设备。WXSS 也分为全局样式（app.wxss）和局部样式（page.wxss），前者作用于整个小程序，后者仅作用于当前页面。
JS 脚本逻辑文件
JS 文件是小程序的逻辑层文件，用于处理用户的交互和页面的逻辑。开发者可以在 JS 文件中定义页面的生命周期函数、事件处理函数等。通过调用小程序提供的 API，JS 文件还可以实现获取用户信息、本地存储、微信支付等功能。例如，在 QuickStart 例子中，pages/index/index.js 就调用了 wx.getUserInfo 来获取微信用户的头像和昵称，并通过 setData 方法将数据更新到页面上。
综上所述，微信小程序由 JSON 配置文件、WXML 模板文件、WXSS 样式文件和 JS 脚本逻辑文件四种主要类型的文件构成。它们各自承担着不同的角色，共同协作以实现小程序的功能和界面展示。
热门标签
