微信小程序进阶之路：我的第一个小程序实战记录
📖 博客简介
本博客旨在系统性地记录我完成首个微信小程序的学习与实战过程，内容涵盖实验步骤、代码实践、问题排查以及心得体会。
作者：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”，但它将成为我后续学习的又一动力。
