微信小程序进阶之路我的第一个小程序实战记录 博客简介本博客旨在系统性地记录我完成首个微信小程序的学习与实战过程内容涵盖实验步骤、代码实践、问题排查以及心得体会。作者Olivia所属课程中国海洋大学26夏《移动软件开发》实验名称实验1第一个微信小程序代码仓库我的 GitHub 仓库 目录实验目标实验步骤程序运行结果问题总结与体会✨ 具体细则一、实验目标学习使用快速启动模板创建小程序的方法学习不使用模板手动创建小程序的方法熟悉在“雨课堂”里提交作业熟悉 Typora 和 Markdown 写作。二、实验步骤一下载并安装工具、注册开发者根据教程去对应地址下载并安装获取测试号后顺便再注册了开发者却没想到此处的先后顺序却埋下了后患。开发者工具下载注册开发者二创建空项目最开始考虑到简洁仅命名为 lab-1后续实验依次为 lab-2……但考虑到命名规范化最后重命名为完整的实验名称。创建项目三学习视频考虑到视频较老且无字幕学习效率较低故配置了 PotPlayer 的实时字幕去年曾因配置耗时且效果差严重影响了深度学习课程的学习进度……这次也算了结一个心结。 首先将视频爬取下来。爬取视频打开生成字幕功能按教程找到对应设置根据教程和电脑实际情况使用 N 卡且驱动已更新进行配置并下载。如图选择经过一段时间等待最终呈现效果不错。字幕效果接着完成整个视频的学习。四跟着敲代码由于第一次接触微信开发者工具即使学过前端基础语法也先跟着视频敲了一遍代码运行效果不错。初版效果之后尝试完成“再次点击后返回”的功能进行了以下修改 先通过this.data.wording获取当前变量状态再用if判断状态最后用this.setData动态赋值。即将index.js对应部分进行逻辑替换从而实现来回切换的效果。改前代码改后代码测试时发生了图片不显示的问题检查发现是后缀名不匹配截图默认后缀是 .jpg但代码里写的是 .png修改图片后缀名即可。代码中是.png改前.jpg改后.png成功显示五优化与页面设计考虑到本次实验的主要目的在于熟悉开发工具、学习使用 Typora 和 Markdown 编写报告并养成规范的文档编写习惯因此并未作过度繁杂的美化。 但重点优化了界面存在的以下几个缺点按钮太单薄重构了 CSS 样式增加背景色、阴影与 hover-class 按压反馈。标题过长/字体过大换行不美观精简了标题字数缩小字号并添加文字阴影。缺少背景图比较干瘪利用 fixed 定位铺设了本地背景图并加半透明遮罩层保障阅读性。优化缺点后再扩充一些美化和功能图片隐藏/显示新增显隐切换按钮利用wx:if控制状态点击可实现图片的动态消失与恢复。添加专属问候增设输入框组件实时捕获用户输入的名字让顶部的红色问候语实时变成 hello [输入的名字]!。六账号“转正”开发过程中遇到了报错弹窗经排查得知原因当前使用了测试号缺少云端权限需要使用正式的小程序 AppID。意外的报错由于此前已注册过开发者账号直接前往微信公众平台官网获取正式的 AppID并在开发者工具的“基本信息”栏进行修改修改appid修改后不再报错。七项目迁移与重命名为了统一管理并为后续摸索使用 Codex 辅助项目做准备我决定将整个实验移动至 Codex 控制的目录下。 流程复制整个项目文件夹粘贴至目标路径并进行重命名。迁移重命名迁移后还需要修改 JSON 文件的本地配置。起初未在project.config.json中找到存放项目名的配置项随后排查确认其存放在私有配置文件project.private.config.json中并顺利完成了修改。修改json文件回到图形化界面将原有记录删除重新导入新的项目。重新导入1重新导入2迁移成功。三、程序运行结果输入昵称得到专属欢迎清空输入后恢复默认“world”隐藏图片点击切换四、问题总结与体会问题总结在本次微信小程序初探实验中我遇到了几类典型的技术与配置问题并逐一进行了探索与解决学习环境与工具配置。 原始教程视频年代较早且无字幕导致学习效率受限。 我通过配置 PotPlayer 的实时字幕功能解决了这一问题不仅保障了本次实验以及日后其他可能应用情景的效率也顺带化解了以往学习其他课程时留下的工具配置心结。代码调试与页面渲染。 初步代码编写后遇到了图片未能正常显示的状况。 经排查发现是本地截图默认的 .jpg 后缀与代码中引用的 .png 路径不匹配这提醒我在前端开发中必须严格校验静态资源的格式与路径。 同时初版界面存在排版干瘪、换行错位等视觉问题最终通过重写代码得以完善。框架权限与项目配置。 开发中途发生 41001 报错经询问ai得知是测试号 AppID 权限受限所致通过替换为正式注册的 AppID 彻底排除了该干扰。 此外在为了后续接入 Codex 而进行的项目迁移环节中我没能按教程所说的那样在常规的project.config.json中找到项目名配置却在自己联想中想到了私有配置这加深了我对小程序配置作用域的理解也让我稍稍欣喜于自己的启发性思考能力。心得体会本次实验是我迈入微信小程序开发大门的第一步。 从最初面对陌生开发工具的局促到后来上手具体的 WXML、WXSS 等文件后感到的熟悉我更深刻地体会到了“实践”的重要性。在解决问题的过程中无论是对报错弹窗的耐心排查还是为了追求规范化而主动进行的项目迁移都极大地锻炼了我的工程思维。 同时将整个过程使用 Typora 和 Markdown 进行规范记录不仅提升了文档排版的美观度也为今后的技术博客积累和实验报告撰写打下了基础。 虽然这只是一个简单的“Hello World”但它将成为我后续学习的又一动力。 中国海洋大学 2026年夏季《移动软件开发》 实验1：第一个微信小程序
微信小程序进阶之路我的第一个小程序实战记录 博客简介本博客旨在系统性地记录我完成首个微信小程序的学习与实战过程内容涵盖实验步骤、代码实践、问题排查以及心得体会。作者Olivia所属课程中国海洋大学26夏《移动软件开发》实验名称实验1第一个微信小程序代码仓库我的 GitHub 仓库 目录实验目标实验步骤程序运行结果问题总结与体会✨ 具体细则一、实验目标学习使用快速启动模板创建小程序的方法学习不使用模板手动创建小程序的方法熟悉在“雨课堂”里提交作业熟悉 Typora 和 Markdown 写作。二、实验步骤一下载并安装工具、注册开发者根据教程去对应地址下载并安装获取测试号后顺便再注册了开发者却没想到此处的先后顺序却埋下了后患。开发者工具下载注册开发者二创建空项目最开始考虑到简洁仅命名为 lab-1后续实验依次为 lab-2……但考虑到命名规范化最后重命名为完整的实验名称。创建项目三学习视频考虑到视频较老且无字幕学习效率较低故配置了 PotPlayer 的实时字幕去年曾因配置耗时且效果差严重影响了深度学习课程的学习进度……这次也算了结一个心结。 首先将视频爬取下来。爬取视频打开生成字幕功能按教程找到对应设置根据教程和电脑实际情况使用 N 卡且驱动已更新进行配置并下载。如图选择经过一段时间等待最终呈现效果不错。字幕效果接着完成整个视频的学习。四跟着敲代码由于第一次接触微信开发者工具即使学过前端基础语法也先跟着视频敲了一遍代码运行效果不错。初版效果之后尝试完成“再次点击后返回”的功能进行了以下修改 先通过this.data.wording获取当前变量状态再用if判断状态最后用this.setData动态赋值。即将index.js对应部分进行逻辑替换从而实现来回切换的效果。改前代码改后代码测试时发生了图片不显示的问题检查发现是后缀名不匹配截图默认后缀是 .jpg但代码里写的是 .png修改图片后缀名即可。代码中是.png改前.jpg改后.png成功显示五优化与页面设计考虑到本次实验的主要目的在于熟悉开发工具、学习使用 Typora 和 Markdown 编写报告并养成规范的文档编写习惯因此并未作过度繁杂的美化。 但重点优化了界面存在的以下几个缺点按钮太单薄重构了 CSS 样式增加背景色、阴影与 hover-class 按压反馈。标题过长/字体过大换行不美观精简了标题字数缩小字号并添加文字阴影。缺少背景图比较干瘪利用 fixed 定位铺设了本地背景图并加半透明遮罩层保障阅读性。优化缺点后再扩充一些美化和功能图片隐藏/显示新增显隐切换按钮利用wx:if控制状态点击可实现图片的动态消失与恢复。添加专属问候增设输入框组件实时捕获用户输入的名字让顶部的红色问候语实时变成 hello [输入的名字]!。六账号“转正”开发过程中遇到了报错弹窗经排查得知原因当前使用了测试号缺少云端权限需要使用正式的小程序 AppID。意外的报错由于此前已注册过开发者账号直接前往微信公众平台官网获取正式的 AppID并在开发者工具的“基本信息”栏进行修改修改appid修改后不再报错。七项目迁移与重命名为了统一管理并为后续摸索使用 Codex 辅助项目做准备我决定将整个实验移动至 Codex 控制的目录下。 流程复制整个项目文件夹粘贴至目标路径并进行重命名。迁移重命名迁移后还需要修改 JSON 文件的本地配置。起初未在project.config.json中找到存放项目名的配置项随后排查确认其存放在私有配置文件project.private.config.json中并顺利完成了修改。修改json文件回到图形化界面将原有记录删除重新导入新的项目。重新导入1重新导入2迁移成功。三、程序运行结果输入昵称得到专属欢迎清空输入后恢复默认“world”隐藏图片点击切换四、问题总结与体会问题总结在本次微信小程序初探实验中我遇到了几类典型的技术与配置问题并逐一进行了探索与解决学习环境与工具配置。 原始教程视频年代较早且无字幕导致学习效率受限。 我通过配置 PotPlayer 的实时字幕功能解决了这一问题不仅保障了本次实验以及日后其他可能应用情景的效率也顺带化解了以往学习其他课程时留下的工具配置心结。代码调试与页面渲染。 初步代码编写后遇到了图片未能正常显示的状况。 经排查发现是本地截图默认的 .jpg 后缀与代码中引用的 .png 路径不匹配这提醒我在前端开发中必须严格校验静态资源的格式与路径。 同时初版界面存在排版干瘪、换行错位等视觉问题最终通过重写代码得以完善。框架权限与项目配置。 开发中途发生 41001 报错经询问ai得知是测试号 AppID 权限受限所致通过替换为正式注册的 AppID 彻底排除了该干扰。 此外在为了后续接入 Codex 而进行的项目迁移环节中我没能按教程所说的那样在常规的project.config.json中找到项目名配置却在自己联想中想到了私有配置这加深了我对小程序配置作用域的理解也让我稍稍欣喜于自己的启发性思考能力。心得体会本次实验是我迈入微信小程序开发大门的第一步。 从最初面对陌生开发工具的局促到后来上手具体的 WXML、WXSS 等文件后感到的熟悉我更深刻地体会到了“实践”的重要性。在解决问题的过程中无论是对报错弹窗的耐心排查还是为了追求规范化而主动进行的项目迁移都极大地锻炼了我的工程思维。 同时将整个过程使用 Typora 和 Markdown 进行规范记录不仅提升了文档排版的美观度也为今后的技术博客积累和实验报告撰写打下了基础。 虽然这只是一个简单的“Hello World”但它将成为我后续学习的又一动力。