本实验属于哪门课程中国海洋大学26夏《移动软件开发》实验名称实验2个人名片小程序代码仓库地址https://github.com/shen5920/Mobile-Software-Development/tree/main目录一、实验内容1.1 实验目的1.2 使用 AI 生成个人名片头图1.3 制作个人名片小程序1.4 代码实现与解释1.4.1 app.json —— 全局配置设置导航栏标题1.4.2 index.wxml —— 页面结构1.4.3 index.wxss —— 页面样式1.5 运行效果二、问题总结与体会一、实验内容1.1 实验目的进一步熟悉小程序前端开发的基本流程学会使用 AI 工具生成专属的个人名片头图16:9制作一个属于自己的名片小程序包含头图和文本描述。1.2 使用 AI 生成个人名片头图推荐使用 AI 工具生成专属于自己的名片头图16:9 横版可以在提示词中添加自己的特点描述。本实验使用「豆包」AI 工具进行生成。在豆包中输入的提示词大意如下我是中国海洋大学信息学部 软件工程专业的沈卓娜 给我设计一个专属于自己的图片介绍图像比例为 16:9。后续又根据ai的建议提供了一些个人信息丰富图片内容1.3 制作个人名片小程序参考官方视频教程按照步骤完成自己的小程序https://developers.weixin.qq.com/community/business/doc/000c869e5c46586bd688cd6175fc0d小程序页面的整体结构为上半部分是 AI 生成的名片头图下半部分是自定义的个人介绍内容。本实验项目的目录结构如下实验2/ ├── app.js // 小程序入口逻辑文件 ├── app.json // 小程序全局配置文件 ├── app.wxss // 小程序全局样式文件 ├── project.config.json // 项目工具配置文件 ├── sitemap.json // 页面收录配置 ├── img/ │ └── szn.png // AI 生成的名片头图16:9 └── pages/ └── index/ ├── index.js // 页面逻辑 ├── index.json // 页面配置 ├── index.wxml // 页面结构 └── index.wxss // 页面样式1.4 代码实现与解释1.4.1app.json—— 全局配置设置导航栏标题{ pages: [ pages/index/index ], window: { backgroundTextStyle: light, navigationBarBackgroundColor: #fff, navigationBarTextStyle: black, navigationBarTitleText: 沈卓娜个人名片 }, style: v2, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }解释pages声明小程序所有页面数组第一项pages/index/index为首页navigationBarTitleText设置导航栏标题为「沈卓娜个人名片」navigationBarBackgroundColor与navigationBarTextStyle设置导航栏背景为白色、文字为黑色。1.4.2index.wxml—— 页面结构!--index.wxml-- scroll-view classscrollarea scroll-y view classco-ntainer image modewidthFix src/img/szn.png/image ​ view classintro-card view classcard-title view classtitle-bar/view text个人简介/text /view ​ view classtag-group view classtag软件工程专业 · 本科/view view classtag中共预备党员/view view classtag班级团支书/view /view ​ view classintro-text 沈卓娜就读于中国海洋大学信息科学与工程学部软件工程专业入学以来始终秉持扎实笃行的态度在学业、学生工作与思想层面同步精进。 /view view classintro-text 专业学习上深耕编程语言、数据结构、系统开发等核心内容主动拓展技术视野重视实践能力打磨稳步筑牢专业根基。 /view view classintro-text 学生工作中立足团支书岗位统筹团务管理、主题团日与班级思想建设在服务集体的过程中提升组织协调能力发挥先锋模范作用。 /view ​ view classmotto text classmotto-text“海纳百川取则行远”/text text classmotto-desc—— 成长标尺笃行不怠/text /view /view ​ /view /scroll-view解释scroll-view scroll-y可纵向滚动的容器方便在手机上滑动查看完整名片image modewidthFix src/img/szn.png上半部分显示 AI 生成的名片头图modewidthFix表示宽度固定、高度按比例自适应保证 16:9 头图不变形.intro-card下半部分的个人简介卡片包含.card-title.title-bar带竖条装饰的「个人简介」标题.tag-group/.tag三个身份标签专业、政治面貌、职务.intro-text三段个人介绍文字.motto座右铭「海纳百川取则行远」。1.4.3index.wxss—— 页面样式/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; margin: 0; padding: 0; background-color: #f5f7fa; } ​ .scrollarea { flex: 1; width: 100%; } ​ image { width: 100%; display: block; } ​ .intro-card { margin: 24rpx 24rpx; padding: 40rpx 36rpx; background: #ffffff; border-radius: 20rpx; box-shadow: 0 4rpx 20rpx rgba(22, 93, 255, 0.08); border: 1rpx solid #e8f0ff; } ​ .card-title { display: flex; align-items: center; font-size: 36rpx; font-weight: 600; color: #1a3b7a; margin-bottom: 28rpx; } ​ .title-bar { width: 8rpx; height: 32rpx; background: linear-gradient(180deg, #4a90d9, #165dff); border-radius: 4rpx; margin-right: 16rpx; } ​ .tag-group { display: flex; flex-wrap: wrap; gap: 16rpx; margin-bottom: 32rpx; } ​ .tag { padding: 8rpx 20rpx; background: #eef5ff; color: #165dff; font-size: 24rpx; border-radius: 30rpx; } ​ .intro-text { font-size: 28rpx; line-height: 1.9; color: #333; margin-bottom: 20rpx; text-align: justify; } ​ .motto { margin-top: 36rpx; padding: 24rpx; background: linear-gradient(90deg, #f0f7ff, #f8fbff); border-radius: 12rpx; text-align: center; border-left: 6rpx solid #4a90d9; } ​ .motto-text { display: block; font-size: 30rpx; font-weight: 500; color: #165dff; letter-spacing: 2rpx; } ​ .motto-desc { display: block; font-size: 22rpx; color: #7794c2; margin-top: 8rpx; }解释page设置页面整体高度为 100vh、浅灰背景色#f5f7fa作为名片内容的底色image { width:100% }让头图占满整行宽度.intro-card白色圆角卡片配合box-shadow阴影和border边框形成悬浮的卡片效果.title-bar用linear-gradient渐变做出标题左侧的蓝色竖条装饰.tag圆角胶囊形标签浅蓝底 深蓝字用于突出身份信息.motto座右铭区域浅蓝渐变背景 左侧蓝色描边居中显示整体配色以蓝色#165dff、#4a90d9为主与头图风格保持统一。1.5 运行效果编译运行后小程序顶部导航栏显示「沈卓娜个人名片」页面整体分为上下两部分上半部分AI 生成的 16:9 个人名片头图下半部分个人简介卡片包含「个人简介」标题、三个身份标签、三段介绍文字以及校训等二、问题总结与体会遇到的问题及解决渲染引擎配置错误运行时报错控制台报错create skylineWindow 12 failed Unexpected native error原生错误页面无法正常渲染启动。分析原因app.json中默认开启了 Skyline 新一代渲染引擎renderer: skyline以及配套的 glass-easel 组件框架而 Windows 端的开发者工具对 Skyline 的兼容性较差同时页面中的自定义导航栏标签与 Skyline 渲染模式不兼容最终触发了窗口创建失败。解决方法移除所有 Skyline 专属配置项恢复小程序默认的 WebView 渲染模式报错随即消失、页面恢复正常渲染。WXML 代码语法与结构错误类名拼写错误标题的字号、加粗样式完全不生效。排查发现是view clastitle中的class拼写漏写了字母s导致 CSS 选择器无法匹配到对应元素样式自然失效。标签嵌套不闭合页面结构错乱、滚动区域行为异常。排查发现是container和body两层 view 容器只闭合了一层导致 DOM 结构不完整。收获与体会通过本次实验我完成了一个专属于自己的名片小程序。相比实验1本次实验让我进一步体会到一个小程序页面同样遵循「结构WXML— 样式WXSS— 逻辑JS」的分工而 WXSS 中的rpx响应式单位、flex弹性布局、圆角阴影等 CSS 技巧配合 AI 生成的头图就能做出视觉上颇为精致的个人名片。在调试过程中我还积累了排查页面问题的经验遇到报错先看控制台的错误信息如 Skyline 渲染引擎报错样式不生效时检查类名是否拼写正确、标签是否闭合页面出现莫名空白时则逐段检查 margin、padding 等样式属性。这些排查思路对后续开发很有帮助。