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

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

与 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. 下载安装：访问微信公众平台开发者工具页面，下载对应系统（Windows/Mac）的版本安装。
2. 新建测试项目：打开开发者工具，登录微信账号，点击「+ 新建项目」：
   • 项目名称：自定义（例如 mini-frontend-demo）；
   • 项目路径：选择本地空文件夹；
   • AppID：新手选择「测试号」（无需审核即可本地开发）；
   • 其他选项：取消勾选「云服务」，点击「创建」。
3. 熟悉工具界面：
   • 模拟器：实时显示小程序运行效果；
   • 编辑器：编写代码的地方；
   • 调试器：类似浏览器控制台，用于打印日志和排查错误。

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

默认项目目录包含全局文件和页面文件，核心文件如下：

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

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

目标：显示初始文本，有一个按钮修改文本，一个输入框获取内容，点击按钮时一并显示。

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 内容：

/* 页面容器 */
.page-container {
  : rpx;
  : flex;
  : column;
  : center;
}

 {
  : rpx;
  : ;
  : rpx;
}

 {
  : rpx;
  : rpx;
  : rpx;
  : ;
  : ;
  : rpx;
  : rpx;
}

 {
  : rpx;
  : rpx;
  : rpx solid ;
  :  rpx;
  : rpx;
  : rpx;
}