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

核心是「数据绑定」，用 {{变量名}} 的方式把 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」面板，能看到「首页加载完成！」的日志。

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

七、入门总结

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