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

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

核心差异与准备

相比 Web 前端，小程序在标签、单位和运行环境上有显著区别。HTML 的 div/p/span 需替换为小程序组件如 view/text；单位推荐使用 rpx 以适配不同屏幕；运行环境基于微信渲染引擎，无 window/document，需使用 wx.xxx API。

开发前需安装微信开发者工具。登录账号后新建项目，选择'测试号'即可开始本地开发，无需审核。界面主要分为模拟器、编辑器和调试器三部分，新手重点关注模拟器的实时效果和调试器的日志输出。

目录结构解析

默认项目包含全局文件和页面文件。核心关注三个文件：

• index.wxml：页面结构，类似 HTML，但仅限官方组件。
• index.wxss：页面样式，注意使用 rpx 单位。
• index.js：页面逻辑，数据绑定和事件处理在此编写。

实战：编写第一个可交互页面

目标很简单：显示文本，通过按钮修改文本，并获取输入框内容。

1. 页面结构 (index.wxml)

替换默认内容，利用数据绑定将 JS 变量渲染到视图：

<!-- 容器视图 -->
<view>
  <!-- 文本组件，{{msg}} 来自 JS 的 data -->
  <text>{{msg}}</text>
  <!-- 输入框，bindinput 实时获取值 -->
  <input placeholder="请输入内容" bindinput="inputHandler" value="{{inputValue}}" />
  <!-- 按钮，bindtap 绑定点击事件 -->
  <button bindtap="clickHandler">点击修改文本</button>
</view>

这里的核心是 {{变量名}} 语法，实现 JS 数据到页面的同步更新。

2. 页面样式 (index.wxss)

使用 rpx 单位确保自适应，避免使用 px。注意小程序不支持 * 通配符重置样式。

/* 页面容器 */
.page-container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 文本样式 */
.content-text {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 40rpx;
}
/* 按钮样式 */
.operate-btn {
  width: 600rpx;
  height: rpx;
  : ;
  : ;
  : rpx;
}