跳到主要内容零基础学微信小程序前端（原生JS）：从0到1写第一个可交互页面 | 极客日志Python
零基础学微信小程序前端（原生JS）：从0到1写第一个可交互页面
**目录** 一、小程序前端的核心差异 二、前期准备：微信开发者工具搭建 三、核心知识点：小程序前端的目录结构 四、实操：写第一个可交互页面 1\. 编写页面结构（index.wxml） 2\. 编写页面样式（index.wxss） 3\. 编写页面逻辑（index.js） 五、运行测试：看看效果 六、新手常见问题&解决方法 七、入门总结 * * 一、小程序前端的核心差异 和你熟悉的 Web 前端…
DevOpsTeam66K 浏览 微信扫一扫，关注极客日志
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
相关免费在线工具
- curl 转代码
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
- Markdown 转 HTML
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
- HTML 转 Markdown
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
- JSON 压缩
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
3. 熟悉工具界面：创建成功后，会自动进入开发者工具界面，主要分为三个部分（新手重点关注）：
- 模拟器：实时显示小程序的运行效果，和手机上看到的一致；
- 编辑器：编写代码的地方，默认会生成一个基础模板；
- 调试器：类似浏览器的控制台，用来打印日志、排查错误，非常重要。
三、核心知识点：小程序前端的目录结构
刚创建好项目，看到一堆文件可能会懵，其实小程序的目录结构很清晰，核心就两类文件：全局文件和页面文件，新手先记住这几个核心文件即可，不用纠结其他自动生成的文件。
- index.wxml：页面结构，相当于Web的HTML，但不能用div、p、span这些标签，只能用小程序官方提供的组件，比如view（类似div）、text（类似span）、button（按钮）等；
- index.wxss：页面样式，相当于Web的CSS，但有一个关键区别——单位用rpx（自适应单位），而不是px，rpx能自动适配不同尺寸的手机屏幕，1rpx = 屏幕宽度/750，不用自己做适配；
- index.js：页面逻辑，用原生JS编写，但不能用window、document等DOM API，小程序提供了专属的wx.xxx API（比如弹窗、跳转），所有页面逻辑都要包裹在Page({})里。
四、实操：写第一个可交互页面
接下来就是最核心的部分，从零编写一个可交互的页面，目标很简单：显示一段初始文本，有一个按钮，点击按钮可以修改文本，还有一个输入框，能实时获取输入内容，点击按钮时一并显示输入的内容。
全程分三步：编写页面结构（wxml）→ 编写页面样式（wxss）→ 编写页面逻辑（js），每一步都贴完整代码，加详细注释，方便大家复制实操。
1. 编写页面结构（index.wxml）
替换pages/index/index.wxml里的默认内容，代码如下（每一行都加了注释，新手能看懂）：
<view> <text>{{msg}}</text> <input placeholder="请输入内容（可选）" bindinput="inputHandler" value="{{inputValue}}" /> <button bindtap="clickHandler">点击修改文本</button> </view>
这里的核心是「数据绑定」，用**{{变量名}}**的方式，把js里的数据渲染到页面上，后续我们修改js里的变量，页面就会同步更新。
2. 编写页面样式（index.wxss）
替换pages/index/index.wxss里的默认内容，重点用rpx单位，样式尽量简单，贴合新手水平：
.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: 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; }
样式这里没什么复杂的，都是基础的CSS属性，重点记住**「不用px用rpx」**，还有小程序的样式不支持*通配符，刚开始我试了用*重置样式，结果没生效，后来查了资料才知道这个限制。
3. 编写页面逻辑（index.js）
这是最核心的部分，替换pages/index/index.js里的默认内容，代码如下，注释详细，重点讲解数据绑定和事件处理：
// Page()是小程序页面的核心函数，所有页面逻辑都必须包裹在这个函数里 Page({ // 1. 页面初始数据：所有要渲染到页面的变量都存放在这里 // 相当于Web里的data，通过{{变量名}}绑定到wxml页面 data: { msg: "Hello 微信小程序！", // 初始文本，会显示在页面上 inputValue: "" // 输入框的初始值，为空 }, // 2. 按钮点击事件处理函数（对应wxml里的bindtap="clickHandler"） // 函数名必须和bindtap的值完全一致，注意大小写 clickHandler() { // ① 弹出成功提示（小程序内置API，wx.showToast） wx.showToast({ title: '点击成功！', // 提示文本 icon: 'success', // 提示图标（success是绿色对勾，loading是加载中，none是无图标） duration: 1500 // 提示显示时长，单位是毫秒 }); // ② 修改页面数据：重点！必须用this.setData()，不能直接this.data.msg = xxx // 直接修改this.data不会更新页面视图，只有setData才能触发页面重新渲染 this.setData({ msg: "你点击了按钮！输入的内容是：" + this.data.inputValue }); }, // 3. 输入框输入事件处理函数（对应wxml里的bindinput="inputHandler"） // 实时获取输入框的内容，更新到data里的inputValue inputHandler(e) { // e是事件对象，e.detail.value是小程序输入框获取值的固定方式 this.setData({ inputValue: e.detail.value }); }, // 4. 页面生命周期函数：页面加载时自动执行（不用手动调用） // 可以在这里做一些初始化操作，比如请求后端数据 onLoad(options) { console.log("首页加载完成！"); // 在调试器的Console里可以看到这条日志 } });
- 修改页面数据必须用this.setData()，不能直接赋值（比如this.data.msg = "新文本"，这样页面不会更新）；
- 事件绑定的函数名必须和wxml里bindtap的值完全一致，大小写敏感，比如我刚开始把clickHandler写成了clickhandler，点击按钮没反应，排查了好久才发现是大小写错了。
五、运行测试：看看效果
写完代码后，点击开发者工具右上角的圈箭头按钮，模拟器里就会显示我们写的页面，效果如下：
- 初始状态：显示「Hello 微信小程序！」，下方是输入框，最下方有一个绿色按钮；
- 输入测试：在输入框里输入「这是tt测试」；
- 点击按钮：弹出的「点击成功！」提示，同时页面上的文本变成「你点击了按钮！输入的内容是：这是tt测试」；
- 调试日志：打开调试器的「Console」面板，能看到「首页加载完成！」的日志，方便我们排查错误。
到这里，我们的第一个可交互的小程序页面就完成了！是不是很有成就感？作为零基础新手，能写出这样一个简单的页面，已经迈出了一大步。
六、新手常见问题&解决方法
在实操过程中，我遇到了几个新手常犯的错误，整理出来，帮大家避坑：
页面白屏，调试器报「page not found」
新增页面后，没有在app.json的pages数组里注册
在app.json的pages数组里添加页面路径，比如["pages/index/index"]，顺序越靠前，默认显示哪个页面
事件绑定函数名写错（大小写不一致），或bindtap写成了bindTap
检查wxml里的bindtap值和js里的函数名完全一致，严格区分大小写
直接修改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、事件名大小写一致。
