中国海洋大学计算机学院2026夏季学期《移动软件开发》本科课程实验-实验二：名片小程序

姓名：钟志炜 学号：24020007172

姓名和学号？	钟志炜，24020007172
本实验属于哪门课程？	中国海洋大学26夏《移动软件开发》
实验名称？	实验2：名片小程序

一、实验内容

一、实验目的

1. 以名片小程序为案例，初步学习、了解微信小程序前端开发。
2. 掌握使用 AI 工具生成图片的方法，制作个人名片头图。
3. 学会完成个人介绍类微信小程序，实现可对外分享的个人名片。
4. 熟悉 Typora 工具与 Markdown 写作，能够编写实验报告并导出 PDF。

二、实验步骤

1. AI 生成名片头图

   • 使用 AI 绘图工具，设置图片比例为16:9 横版；

   • 输入个人特征、风格描述作为提示词，生成个人专属名片头图；

     

2. 开发微信名片小程序

   • 观看配套教学视频，参考官方文档链接学习小程序开发流程；
   • 搭建个人名片小程序页面：页面上半部分放置上一步 AI 生成的 16:9 名片头图；
   • 自定义页面下半部分内容，编写个人相关文本描述，完成个人介绍小程序；
   • 调试完成可用于分享的个人名片小程序。

3. 撰写实验报告

   • 使用给定模板填写姓名、学号、课程、实验名称；
   • 填写实验内容，记录实验遇到的问题、解决方法，填写收获体会以及课程建议

三、实验结果

1、平台编译效果与手机预览效果展示：

2、分享功能实现：

二、问题总结与体会

一、问题总结

1、关于实现分享功能相关问题：

在开发初期，我对小程序分享功能存在理解误区，一度认为只有将小程序提交审核并正式发布，才能够把页面分享给其他人查看使用。在主动和授课老师沟通交流之后，我了解到该功能并不是本次课程的硬性要求，只需正常使用预览以及真机调试模式，便可以完成页面的分享演示，满足课程作业的展示需求。

2、页面美化相关问题：

最开始我严格对照课程提供的教学视频，一步步完成基础页面搭建，但最终呈现出来的页面效果比较简陋，部分交互逻辑存在缺陷，滑动等效果也无法正常实现。之后我借助 AI 工具辅助修改调试代码，补齐滚动滑动交互，不断调整细节参数，对整体布局与视觉样式进行优化，让页面完成美化升级。

3、电脑编译与手机预览效果差异问题：

本项目开启navigationStyle: "custom"自定义导航栏，原先依靠safeArea.top与env(safe‑area‑inset‑top)计算状态栏偏移。该方案在电脑模拟器运行正常，但在 OPPO 安卓真机上相关安全区域取值返回 0，造成导航栏内容上移，标题直接顶到状态栏区域，出现界面重叠。后续修改组件navigation‑bar.js，改用稳定的statusBarHeight，结合胶囊按钮接口getMenuButtonBoundingClientRect反推导航栏实际高度，实现标题与右上角操作按钮垂直对齐，固定表头不再被状态栏遮挡，需要编译后通过真机预览验证修复效果。

二、体会

本次小程序个人介绍页面开发，让我切实体会到理论到实践转换的不易。刚开始写代码时，经常遇到标签闭合错误、样式布局错乱、真机与模拟器效果不一致等各类问题，很多设想的效果无法顺利实现。面对困惑时，我一方面主动向老师请教，厘清功能需求边界，避免做无用功；另一方面借助工具辅助排查代码，反复调试样式与交互。

开发过程也让我明白，真机预览和模拟器存在差异，很多在电脑上正常的效果，放到手机上就会出现问题，需要多维度测试验证。这次实践锻炼了我的排错能力，也培养了我严谨的代码书写习惯，懂得遇到问题先梳理思路，再逐步定位解决，收获颇丰。