跳到主要内容零基础学微信小程序前端(原生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、事件名大小写一致。