一、小程序前端的核心差异
和 Web 前端(HTML+CSS+JS)相比,小程序有 3 个核心不同:
- 标签不同:HTML 的
div/p/span→ 小程序的view/text,button等组件是微信封装好的; - 单位不同:Web 的
px→ 小程序的rpx(自适应不同屏幕,1rpx = 屏幕宽度 / 750); - 运行环境不同:小程序运行在微信内置的渲染引擎,而非浏览器,所以没有
window/document等 DOM API,而是用微信提供的wx.xxxAPI(如wx.showToast)。
二、前期准备:微信开发者工具搭建
小程序前端开发最核心的工具是微信开发者工具。
- 下载安装:访问微信公众平台开发者工具页面,下载对应系统(Windows/Mac)的版本安装。
- 新建测试项目:打开开发者工具,登录微信账号,点击「+ 新建项目」,按提示填写:
- 项目名称:自定义
- 项目路径:选择本地空文件夹
- AppID:新手可选择「测试号」(无需审核即可本地开发)
- 其他选项:取消勾选「云服务」,点击「创建」。

- 熟悉工具界面:
- 模拟器:实时显示小程序运行效果
- 编辑器:编写代码的地方
- 调试器:类似浏览器控制台,用于打印日志、排查错误

三、核心知识点:小程序前端的目录结构
默认项目目录包含全局文件和页面文件。核心文件如下:

重点说明 3 个核心文件的作用:
- index.wxml:页面结构,相当于 Web 的 HTML,但只能用小程序官方提供的组件,如 view、text、button 等;
- index.wxss:页面样式,相当于 Web 的 CSS,单位用 rpx(自适应单位),而不是 px;
- index.js:页面逻辑,用原生 JS 编写,不能直接用 window、document 等 DOM API,所有页面逻辑都要包裹在
Page({})里。
四、实操:写第一个可交互页面
目标:显示一段初始文本,有一个按钮,点击按钮可以修改文本,还有一个输入框,能实时获取输入内容,点击按钮时一并显示输入的内容。




