微信小程序前端开发入门：从零构建第一个可交互页面

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;
}

注意：小程序的样式不支持 * 通配符。

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()
    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、事件名大小写一致。