JavaScriptWeChat大前端
微信小程序前端入门：从零编写第一个可交互页面
微信小程序前端开发基于 WXML、WXSS 和 JavaScript。核心差异在于组件标签、rpx 单位及运行环境 API。搭建微信开发者工具后，通过配置 pages 注册页面，利用 data 绑定数据，setData 更新视图，bindtap 处理事件。示例展示了输入框获取值与按钮点击修改文本的完整流程。常见问题包括页面未注册、事件名大小写敏感及 setData 使用规范。掌握这些基础即可构建可交互界面。
微信小程序前端开发基于 WXML、WXSS 和 JavaScript。核心差异在于组件标签、rpx 单位及运行环境 API。搭建微信开发者工具后，通过配置 pages 注册页面，利用 data 绑定数据，setData 更新视图，bindtap 处理事件。示例展示了输入框获取值与按钮点击修改文本的完整流程。常见问题包括页面未注册、事件名大小写敏感及 setData 使用规范。掌握这些基础即可构建可交互界面。
和 Web 前端（HTML+CSS+JS）相比，小程序有 3 个核心不同：
div/p/span → 小程序的 view/text，button 等组件是微信封装好的；px → 小程序的 rpx（自适应不同屏幕，1rpx = 屏幕宽度 / 750）；window/document 等 DOM API，而是用微信提供的 wx.xxx API（如 wx.showToast）。小程序前端开发最核心的工具是微信开发者工具。
小程序目录结构清晰，核心文件分为全局文件和页面文件。重点标注核心文件如下：
Page({}) 里，使用 wx.xxx API。目标：显示初始文本，有一个按钮点击修改文本，一个输入框实时获取内容。 分三步：编写页面结构（wxml）→ 编写页面样式（wxss）→ 编写页面逻辑（js）。
替换 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 里的数据渲染到页面上。
替换 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」，小程序的样式不支持 * 通配符。
替换 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 的值完全一致，大小写敏感。
点击开发者工具右上角的圈箭头按钮，模拟器里显示页面效果。
| 问题现象 | 问题原因 | 解决方法 |
|---|---|---|
| 页面白屏，调试器报「page not found」 | 新增页面后，没有在 app.json 的 pages 数组里注册 | 在 app.json 的 pages 数组里添加页面路径，比如 ["pages/index/index"] |
| 点击按钮没反应，调试器没报错 | 事件绑定函数名写错（大小写不一致），或 bindtap 写成了 bindTap | 检查 wxml 里的 bindtap 值和 js 里的函数名完全一致，严格区分大小写 |
| 修改 data 后，页面不更新 | 直接修改 this.data.xxx，没有调用 this.setData() | 必须用 this.setData({ xxx: 新值 }) 修改数据，才能触发页面重新渲染 |
| 样式不生效 | 使用了 * 通配符，或样式选择器和 wxml 里的 class 名不一致 | 去掉 * 通配符，检查选择器和 wxml 里的 class 名完全一致 |
| 输入框无法获取输入内容 | 没有绑定 bindinput 事件，或没有用 e.detail.value 取值 | 给 input 标签添加 bindinput 事件，在事件处理函数里用 e.detail.value 获取输入值 |
小程序前端核心：wxml（结构）+ wxss（样式）+ js（逻辑），和 Web 前端类似，但有专属的标签、单位和 API；核心技能：数据绑定（{{变量名}}）、事件绑定（bindtap）、setData 修改数据；新手避坑：不用 HTML 标签、不用 px 单位、修改数据用 setData、事件名大小写一致。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online