2026-05-17
昆明
在移动互联网浪潮的推动下，微信小程序以其“无需下载、即用即走”的轻量化体验，迅速融入人们的日常生活与商业活动。对于许多有志于投身小程序开发的初学者或创业者而言，第一个也是蕞基础的问题往往是：“微信小程序到底用什么语言制作？”这个问题看似简单，背后却涉及一个由多种语言和技术协同构成的完整技术栈。理解这些核心语言及其角色，是开启小程序开发之旅的第一步。本文将为您系统梳理微信小程序开发所涉及的主要语言，并以朴实的语言探讨它们在实际开发中的应用，希望能为您提供一份清晰、实用的技术路线图。
当我们打开一个小程序，映入眼帘的界面布局、按钮、文字和图片，主要是由两种“标记语言”来定义和描述的。
1. WXML：小程序的“骨架”
WXML（WeiXin Markup Language）是微信团队为小程序量身定制的标签语言。您可以把它理解为网页开发中的HTML（超文本标记语言）在小程序生态中的变体。它的核心作用是搭建页面的结构骨架。
基本语法：它使用一系列预定义的标签来构建组件树，例如 `` 对应一个视图容器（类似HTML的``），``用于包裹文本，``用于显示图片，``则创建按钮。开启者通过嵌套这些标签，像搭积木一样构建出页面的层级结构。 数据绑定：WXML一个雄厚的特性是数据绑定。开启者可以在.js文件中定义数据（如` { userName: '张三' }`），然后在WXML中通过双花括号`{{userName}}`的语法直接将数据渲染到页面上。当.js中的数据发生变化时，视图会自动更新，这极大地简化了开发流程。 列表与条件渲染：通过`wx:for`指令可以便捷地循环渲染一个列表数据，而`wx:if`、`wx:elif`、`wx:else`则用于根据条件控制某部分结构是否显示。这些指令使得动态页面的构建变得非常高效。 简单来说，WXML决定了页面上有什么，以及这些东西以什么样的基本结构排列。它负责的是结构，而非样式。 2. WXSS：小程序的“外衣” 如果说WXML构建了骨架，那么WXSS（WeiXin Style Sheets）就是为这副骨架披上外衣，定义其外观样式。它几乎完全继承了CSS（层叠样式表）的语法和特性，并做了一些适用于小程序的扩充。 核心功能：WXSS用于设置页面元素的颜色、字体、大小、间距、位置、背景等所有视觉样式。您可以使用类选择器（.class）、ID选择器（id）、标签选择器（view）等标准CSS选择器来定位元素并施加样式。 尺寸单位rpx：WXSS引入了一个非常重要的扩展单位：rpx（responsive pixel，响应式像素）。这是一个可以根据屏幕宽度进行自适应缩放的尺寸单位。设计稿通常以750px宽为标准，在设计稿上量出的尺寸（例如100px），在WXSS中直接写为100rpx，即可在不同宽度的手机屏幕上实现等比缩放，这精致解决了移动端多屏幕适配的难题。 样式导入：支持使用`@import`语句导入外部WXSS文件，有助于模块化和复用公共样式。 WXSS的工作就是让WXML构建的结构变得美观、布局合理，并适应不同尺寸的屏幕。它与WXML紧密配合，共同完成了小程序的静态界面呈现。 二、 逻辑交互的灵魂：JavaScript 仅有静态的界面是远远不够的，小程序需要响应用户的点击、滑动，需要处理数据、调用网络接口、操作本地存储，这些动态的、逻辑层面的功能，全部由JavaScript来承担。在小程序中，JavaScript（通常简写为JS）是驱动一切的“大脑”和“神经中枢”。 1. 页面的逻辑层 每个小程序页面通常由四个文件组成：.wxml, .wxss, .js, .json。其中.js文件就是该页面的逻辑脚本文件。在这个文件中，开启者需要调用微信小程序提供的`Page`函数来注册一个页面。 数据管理：在`Page`函数的参数对象中，`data`字段定义了页面的初始数据，这些数据会与WXML进行绑定。 生命周期函数：小程序为页面提供了完整的生命周期，如`onLoad`（页面加载时触发）、`onShow`（页面显示时触发）、`onReady`（页面初次渲染完成时触发）、`onHide`（页面隐藏时触发）、`onUnload`（页面卸载时触发）。开启者可以在这些函数中编写相应的逻辑，例如在`onLoad`中接收页面参数并请求网络数据。 事件处理函数：当用户在WXML中绑定了某个事件（如`bindtap`点击事件），对应的处理函数就定义在.js文件中。例如，一个按钮的点击处理函数`onButtonTap`，可以在此函数中修改`data`中的数据、跳转页面或调用微信API。 2. 全局的应用逻辑 除了页面逻辑，小程序还有一个顶层的应用逻辑，定义在根目录的`app.js`文件中。通过`App`函数注册小程序应用。 全局生命周期：`app.js`中可以定义应用级别的生命周期函数，如`onLaunch`（小程序初始化完成时触发）、`onShow`（小程序启动或从后台进入前台显示）、`onHide`（小程序从前台进入后台）。常在这里进行一些全局的初始化操作，如获取用户登录状态。 全局数据与方法：可以在`App`的参数对象中定义全局数据（`globalData`），这些数据在所有页面中都可以通过`getApp`方法获取和修改。也可以定义一些全局工具函数供各个页面调用。 3. 丰富的API能力 微信小程序框架通过全局对象`wx`，提供了数以百计的API（应用程序编程接口），而调用这些API的语是JavaScript。无论是发起网络请求（`wx.request`）、操作本地存储（`wx.setStorage`）、获取用户信息、调用设备能力（相机、位置、蓝牙），还是支付、分享等高级功能，都需要通过JS代码来调用这些API。正是JavaScript，赋予了小程序与用户、与设备、与服务器进行复杂交互的能力。 三、 配置与生态扩展 1. JSON配置：小程序的“说明书” JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，在小程序中主要用于各种静态配置。 全局配置：项目根目录的`app.json`文件是小程序的全局配置文件，用于设置小程序的页面路径列表（`pages`）、窗口表现（导航栏标题、背景色等）、底部`tabBar`、网络超时时间等。它告诉小程序框架有哪些页面，以及整体的窗口样式。 页面配置：每个页面目录下的`.json`文件用于配置该页面的窗口表现，它会覆盖`app.json`中相同的配置项，实现页面级别的个性化。 组件与项目配置：JSON还用于自定义组件的配置（`component.json`）以及项目配置文件`project.config.json`（主要用于IDE工具识别项目设置）。 JSON文件不参与逻辑运算，它纯粹以声明式的方式告诉小程序框架应该如何组织和展示应用。 2. 生态扩展：TypeScript与各类框架 随着项目复杂度提升，原生JavaScript在开发大型应用时可能面临类型难以维护等问题。微信小程序官方及社区也提供了更雄厚的语言和工具支持。 TypeScript：TypeScript是JavaScript的一个超集，它添加了静态类型定义。使用TypeScript开发小程序，可以在编码阶段就发现潜在的类型错误，极大地提升了代码的健壮性和可维护性。微信开启者工具提供了对TypeScript的天然支持，创建项目时即可选择TypeScript模板。 小程序框架：为了进一步提升开发效率和开发体验，业界诞生了如WePY、mpvue（基于Vue.js语法）以及目前蕞主流的Taro和uni-app等跨端开发框架。这些框架允许开启者使用Vue或React的语法和生态来编写代码，然后通过编译工具将代码转换为小程序原生的WXML、WXSS和JS。这尤其适合需要同时发布到微信小程序、支付宝小程序、H5等多端的团队。在这些框架下，您主要编写的是Vue的`.vue`单文件组件或React的JSX/TSX语法，框架的编译器会帮您处理到小程序语言的转换。 四、 如何选择与开始 回到蕞初的问题：“微信小程序用什么语言制作？”答案是一个组合：用WXML和WXSS构建界面，用JavaScript（或TypeScript）编写逻辑，用JSON进行配置。 这是一个各司其职、紧密协作的技术栈。 对于初学者和大多数常规项目，从官方原生开发模式入手是理想路径。您需要学习的就是WXML、WXSS、JavaScript和JSON这四门“语言”。微信官方文档详尽，社区资源丰富，能够帮助您快速掌握核心。当您熟悉了小程序的基本运行原理和API后，如果项目需要更强的工程化能力或有多端发布需求，再考虑引入TypeScript或选择像Taro这样的跨端框架。 小程序的开发语言体系，是微信团队在Web技术基础上，为适应其封闭、高性能的移动端环境而精心设计的一套方案。它降低了移动应用开发的门槛，让前端开启者能够利用熟悉的Web技术栈快速进入移动开发领域。理解这套语言体系，就如同掌握了建造小程序这座“数字小屋”的基本工具和材料，接下来，就是发挥您的创意与逻辑，去构建一个个服务用户、创造价值的精彩应用了。 微信小程序怎么制作 {xia.title} 推荐阅读 个人如何制作小程序 微信小程序制作服务商 微信小程序制作 商城小程序制作报价 商城小程序系统制作 哪些小程序制作经验丰富 外包小程序制作公司 如何提高小程序制作的性能 门店通小程序制作 哪里有小程序制作公司 微信小程序制作步骤 微信平台小程序制作
数据绑定：WXML一个雄厚的特性是数据绑定。开启者可以在.js文件中定义数据（如`
{ userName: '张三' }`），然后在WXML中通过双花括号`{{userName}}`的语法直接将数据渲染到页面上。当.js中的数据发生变化时，视图会自动更新，这极大地简化了开发流程。
列表与条件渲染：通过`wx:for`指令可以便捷地循环渲染一个列表数据，而`wx:if`、`wx:elif`、`wx:else`则用于根据条件控制某部分结构是否显示。这些指令使得动态页面的构建变得非常高效。
简单来说，WXML决定了页面上有什么，以及这些东西以什么样的基本结构排列。它负责的是结构，而非样式。
2. WXSS：小程序的“外衣”
如果说WXML构建了骨架，那么WXSS（WeiXin Style Sheets）就是为这副骨架披上外衣，定义其外观样式。它几乎完全继承了CSS（层叠样式表）的语法和特性，并做了一些适用于小程序的扩充。
核心功能：WXSS用于设置页面元素的颜色、字体、大小、间距、位置、背景等所有视觉样式。您可以使用类选择器（.class）、ID选择器（id）、标签选择器（view）等标准CSS选择器来定位元素并施加样式。
尺寸单位rpx：WXSS引入了一个非常重要的扩展单位：rpx（responsive pixel，响应式像素）。这是一个可以根据屏幕宽度进行自适应缩放的尺寸单位。设计稿通常以750px宽为标准，在设计稿上量出的尺寸（例如100px），在WXSS中直接写为100rpx，即可在不同宽度的手机屏幕上实现等比缩放，这精致解决了移动端多屏幕适配的难题。
样式导入：支持使用`@import`语句导入外部WXSS文件，有助于模块化和复用公共样式。
WXSS的工作就是让WXML构建的结构变得美观、布局合理，并适应不同尺寸的屏幕。它与WXML紧密配合，共同完成了小程序的静态界面呈现。
仅有静态的界面是远远不够的，小程序需要响应用户的点击、滑动，需要处理数据、调用网络接口、操作本地存储，这些动态的、逻辑层面的功能，全部由JavaScript来承担。在小程序中，JavaScript（通常简写为JS）是驱动一切的“大脑”和“神经中枢”。
1. 页面的逻辑层
每个小程序页面通常由四个文件组成：.wxml, .wxss, .js, .json。其中.js文件就是该页面的逻辑脚本文件。在这个文件中，开启者需要调用微信小程序提供的`Page`函数来注册一个页面。
数据管理：在`Page`函数的参数对象中，`data`字段定义了页面的初始数据，这些数据会与WXML进行绑定。
生命周期函数：小程序为页面提供了完整的生命周期，如`onLoad`（页面加载时触发）、`onShow`（页面显示时触发）、`onReady`（页面初次渲染完成时触发）、`onHide`（页面隐藏时触发）、`onUnload`（页面卸载时触发）。开启者可以在这些函数中编写相应的逻辑，例如在`onLoad`中接收页面参数并请求网络数据。
事件处理函数：当用户在WXML中绑定了某个事件（如`bindtap`点击事件），对应的处理函数就定义在.js文件中。例如，一个按钮的点击处理函数`onButtonTap`，可以在此函数中修改`data`中的数据、跳转页面或调用微信API。
2. 全局的应用逻辑
除了页面逻辑，小程序还有一个顶层的应用逻辑，定义在根目录的`app.js`文件中。通过`App`函数注册小程序应用。
全局生命周期：`app.js`中可以定义应用级别的生命周期函数，如`onLaunch`（小程序初始化完成时触发）、`onShow`（小程序启动或从后台进入前台显示）、`onHide`（小程序从前台进入后台）。常在这里进行一些全局的初始化操作，如获取用户登录状态。
全局数据与方法：可以在`App`的参数对象中定义全局数据（`globalData`），这些数据在所有页面中都可以通过`getApp`方法获取和修改。也可以定义一些全局工具函数供各个页面调用。
3. 丰富的API能力
微信小程序框架通过全局对象`wx`，提供了数以百计的API（应用程序编程接口），而调用这些API的语是JavaScript。无论是发起网络请求（`wx.request`）、操作本地存储（`wx.setStorage`）、获取用户信息、调用设备能力（相机、位置、蓝牙），还是支付、分享等高级功能，都需要通过JS代码来调用这些API。正是JavaScript，赋予了小程序与用户、与设备、与服务器进行复杂交互的能力。
1. JSON配置：小程序的“说明书”
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，在小程序中主要用于各种静态配置。
全局配置：项目根目录的`app.json`文件是小程序的全局配置文件，用于设置小程序的页面路径列表（`pages`）、窗口表现（导航栏标题、背景色等）、底部`tabBar`、网络超时时间等。它告诉小程序框架有哪些页面，以及整体的窗口样式。
页面配置：每个页面目录下的`.json`文件用于配置该页面的窗口表现，它会覆盖`app.json`中相同的配置项，实现页面级别的个性化。
组件与项目配置：JSON还用于自定义组件的配置（`component.json`）以及项目配置文件`project.config.json`（主要用于IDE工具识别项目设置）。
JSON文件不参与逻辑运算，它纯粹以声明式的方式告诉小程序框架应该如何组织和展示应用。
2. 生态扩展：TypeScript与各类框架
随着项目复杂度提升，原生JavaScript在开发大型应用时可能面临类型难以维护等问题。微信小程序官方及社区也提供了更雄厚的语言和工具支持。
TypeScript：TypeScript是JavaScript的一个超集，它添加了静态类型定义。使用TypeScript开发小程序，可以在编码阶段就发现潜在的类型错误，极大地提升了代码的健壮性和可维护性。微信开启者工具提供了对TypeScript的天然支持，创建项目时即可选择TypeScript模板。
小程序框架：为了进一步提升开发效率和开发体验，业界诞生了如WePY、mpvue（基于Vue.js语法）以及目前蕞主流的Taro和uni-app等跨端开发框架。这些框架允许开启者使用Vue或React的语法和生态来编写代码，然后通过编译工具将代码转换为小程序原生的WXML、WXSS和JS。这尤其适合需要同时发布到微信小程序、支付宝小程序、H5等多端的团队。在这些框架下，您主要编写的是Vue的`.vue`单文件组件或React的JSX/TSX语法，框架的编译器会帮您处理到小程序语言的转换。
回到蕞初的问题：“微信小程序用什么语言制作？”答案是一个组合：用WXML和WXSS构建界面，用JavaScript（或TypeScript）编写逻辑，用JSON进行配置。 这是一个各司其职、紧密协作的技术栈。
对于初学者和大多数常规项目，从官方原生开发模式入手是理想路径。您需要学习的就是WXML、WXSS、JavaScript和JSON这四门“语言”。微信官方文档详尽，社区资源丰富，能够帮助您快速掌握核心。当您熟悉了小程序的基本运行原理和API后，如果项目需要更强的工程化能力或有多端发布需求，再考虑引入TypeScript或选择像Taro这样的跨端框架。
小程序的开发语言体系，是微信团队在Web技术基础上，为适应其封闭、高性能的移动端环境而精心设计的一套方案。它降低了移动应用开发的门槛，让前端开启者能够利用熟悉的Web技术栈快速进入移动开发领域。理解这套语言体系，就如同掌握了建造小程序这座“数字小屋”的基本工具和材料，接下来，就是发挥您的创意与逻辑，去构建一个个服务用户、创造价值的精彩应用了。
