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

姓名钟志炜 学号24020007172姓名和学号钟志炜24020007172本实验属于哪门课程中国海洋大学26夏《移动软件开发》实验名称实验2名片小程序一、实验内容一、实验目的以名片小程序为案例初步学习、了解微信小程序前端开发。掌握使用 AI 工具生成图片的方法制作个人名片头图。学会完成个人介绍类微信小程序实现可对外分享的个人名片。熟悉 Typora 工具与 Markdown 写作能够编写实验报告并导出 PDF。二、实验步骤AI 生成名片头图使用 AI 绘图工具设置图片比例为16:9 横版输入个人特征、风格描述作为提示词生成个人专属名片头图开发微信名片小程序观看配套教学视频参考官方文档链接学习小程序开发流程搭建个人名片小程序页面页面上半部分放置上一步 AI 生成的 16:9 名片头图自定义页面下半部分内容编写个人相关文本描述完成个人介绍小程序调试完成可用于分享的个人名片小程序。撰写实验报告使用给定模板填写姓名、学号、课程、实验名称填写实验内容记录实验遇到的问题、解决方法填写收获体会以及课程建议三、实验结果1、平台编译效果与手机预览效果展示2、分享功能实现二、问题总结与体会一、问题总结1、关于实现分享功能相关问题在开发初期我对小程序分享功能存在理解误区一度认为只有将小程序提交审核并正式发布才能够把页面分享给其他人查看使用。在主动和授课老师沟通交流之后我了解到该功能并不是本次课程的硬性要求只需正常使用预览以及真机调试模式便可以完成页面的分享演示满足课程作业的展示需求。2、页面美化相关问题最开始我严格对照课程提供的教学视频一步步完成基础页面搭建但最终呈现出来的页面效果比较简陋部分交互逻辑存在缺陷滑动等效果也无法正常实现。之后我借助 AI 工具辅助修改调试代码补齐滚动滑动交互不断调整细节参数对整体布局与视觉样式进行优化让页面完成美化升级。3、电脑编译与手机预览效果差异问题本项目开启navigationStyle: custom自定义导航栏原先依靠safeArea.top与env(safe‑area‑inset‑top)计算状态栏偏移。该方案在电脑模拟器运行正常但在 OPPO 安卓真机上相关安全区域取值返回 0造成导航栏内容上移标题直接顶到状态栏区域出现界面重叠。后续修改组件navigation‑bar.js改用稳定的statusBarHeight结合胶囊按钮接口getMenuButtonBoundingClientRect反推导航栏实际高度实现标题与右上角操作按钮垂直对齐固定表头不再被状态栏遮挡需要编译后通过真机预览验证修复效果。二、体会本次小程序个人介绍页面开发让我切实体会到理论到实践转换的不易。刚开始写代码时经常遇到标签闭合错误、样式布局错乱、真机与模拟器效果不一致等各类问题很多设想的效果无法顺利实现。面对困惑时我一方面主动向老师请教厘清功能需求边界避免做无用功另一方面借助工具辅助排查代码反复调试样式与交互。开发过程也让我明白真机预览和模拟器存在差异很多在电脑上正常的效果放到手机上就会出现问题需要多维度测试验证。这次实践锻炼了我的排错能力也培养了我严谨的代码书写习惯懂得遇到问题先梳理思路再逐步定位解决收获颇丰。