微信小程序前端入门：从零编写第一个可交互页面

一、小程序前端的核心差异

和 Web 前端（HTML+CSS+JS）相比，小程序有 3 个核心不同：

1. 标签不同：HTML 的 div/p/span → 小程序的 view/text，button 等组件是微信封装好的；
2. 单位不同：Web 的 px → 小程序的 rpx（自适应不同屏幕，1rpx = 屏幕宽度 / 750）；
3. 运行环境不同：小程序运行在微信内置的渲染引擎，而非浏览器，所以没有 window/document 等 DOM API，而是用微信提供的 wx.xxx API（如 wx.showToast）。

二、前期准备：微信开发者工具搭建

小程序前端开发最核心的工具是微信开发者工具。

1. 下载安装：访问 微信公众平台开发者工具页面，下载对应系统版本安装。
2. 新建测试项目：打开开发者工具，登录微信账号，点击「+ 新建项目」。填写项目名称、路径，AppID 选择「测试号」，取消勾选「云服务」，点击「创建」。
3. 熟悉工具界面：主要包括模拟器（显示运行效果）、编辑器（编写代码）、调试器（打印日志、排查错误）。

三、核心知识点：小程序前端的目录结构

小程序目录结构清晰，核心文件分为全局文件和页面文件。重点标注核心文件如下：

• index.wxml：页面结构，相当于 Web 的 HTML，使用小程序官方组件（如 view、text、button）。
• index.wxss：页面样式，相当于 Web 的 CSS，单位用 rpx（自适应单位）。
• index.js：页面逻辑，用原生 JS 编写，包裹在 Page({}) 里，使用 wx.xxx API。

四、实操：写第一个可交互页面

目标：显示初始文本，有一个按钮点击修改文本，一个输入框实时获取内容。 分三步：编写页面结构（wxml）→ 编写页面样式（wxss）→ 编写页面逻辑（js）。

1. 编写页面结构（index.wxml）

替换 pages/index/index.wxml 里的默认内容：

<!-- 容器视图，类似 Web 的 div，用来包裹所有内容 -->
<view>
  <!-- 文本组件，{{msg}}是数据绑定，取值来自 index.js 里的 data.msg -->
  <text>{{msg}}</text>
  <!-- 输入框组件，bindinput 绑定输入事件，实时获取输入内容 -->
  <input placeholder="请输入内容（可选）" bindinput="inputHandler" value="{{inputValue}}" />
  <!-- 按钮组件，bindtap 绑定点击事件 -->
  <button bindtap="clickHandler">点击修改文本</button>
</view>

核心是「数据绑定」，用 {{变量名}} 的方式把 js 里的数据渲染到页面上。

2. 编写页面样式（index.wxss）

替换 pages/index/index.wxss 里的默认内容：

/* 页面容器：设置内边距、居中对齐，flex 布局方便垂直排列 */
.page-container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 文本样式：设置字体大小、颜色，margin-bottom 控制与按钮的间距 */
.content-text {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 40rpx;
}
/* 按钮样式：设置宽高、背景色、圆角 */
.operate-btn {
  width: 600rpx;
  height: 80rpx;
  line-height: 50rpx;
  background-color: #07c160;
  color: #fff;
  border-radius: 40rpx;
  margin-bottom: 30rpx;
}
/* 输入框样式：设置边框、内边距 */
.input-box {
  width: 600rpx;
  height: 80rpx;
  border: 1rpx solid #eee;
  padding: 0 20rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
}

重点记住「不用 px 用 rpx」，小程序的样式不支持 * 通配符。

3. 编写页面逻辑（index.js）

替换 pages/index/index.js 里的默认内容：

// Page() 是小程序页面的核心函数
Page({
  // 1. 页面初始数据
  data: {
    msg: "Hello 微信小程序！",
    inputValue: ""
  },
  // 2. 按钮点击事件处理函数
  clickHandler() {
    wx.showToast({
      title: '点击成功！',
      icon: 'success',
      duration: 1500
    });
    this.setData({
      msg: "你点击了按钮！输入的内容是：" + this.data.inputValue
    });
  },
  // 3. 输入框输入事件处理函数
  inputHandler(e) {
    this.setData({
      inputValue: e.detail.value
    });
  },
  // 4. 页面生命周期函数
  onLoad(options) {
    console.log("首页加载完成！");
  }
});

重点：修改页面数据必须用 this.setData()，不能直接赋值；事件绑定的函数名必须和 wxml 里 bindtap 的值完全一致，大小写敏感。

五、运行测试：看看效果

点击开发者工具右上角的圈箭头按钮，模拟器里显示页面效果。

1. 初始状态：显示「Hello 微信小程序！」，下方是输入框，最下方有一个绿色按钮；
2. 输入测试：在输入框里输入内容；
3. 点击按钮：弹出提示，同时页面上的文本变成「你点击了按钮！输入的内容是：...」；
4. 调试日志：打开调试器的「Console」面板，能看到「首页加载完成！」的日志。

六、新手常见问题&解决方法

问题现象	问题原因	解决方法
页面白屏，调试器报「page not found」	新增页面后，没有在 app.json 的 pages 数组里注册	在 app.json 的 pages 数组里添加页面路径，比如 ["pages/index/index"]
点击按钮没反应，调试器没报错	事件绑定函数名写错（大小写不一致），或 bindtap 写成了 bindTap	检查 wxml 里的 bindtap 值和 js 里的函数名完全一致，严格区分大小写
修改 data 后，页面不更新	直接修改 this.data.xxx，没有调用 this.setData()	必须用 this.setData({ xxx: 新值 }) 修改数据，才能触发页面重新渲染
样式不生效	使用了 * 通配符，或样式选择器和 wxml 里的 class 名不一致	去掉 * 通配符，检查选择器和 wxml 里的 class 名完全一致
输入框无法获取输入内容	没有绑定 bindinput 事件，或没有用 e.detail.value 取值	给 input 标签添加 bindinput 事件，在事件处理函数里用 e.detail.value 获取输入值

七、入门总结

小程序前端核心：wxml（结构）+ wxss（样式）+ js（逻辑），和 Web 前端类似，但有专属的标签、单位和 API；核心技能：数据绑定（{{变量名}}）、事件绑定（bindtap）、setData 修改数据；新手避坑：不用 HTML 标签、不用 px 单位、修改数据用 setData、事件名大小写一致。