微信小程序原生开发入门:从零构建首个可交互页面
核心差异与准备
相比 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;
}


