微信小程序实验2：个人名片制作

一、实验内容本实验参考 实验2名片小程序 | OUC AI Lab目标是完成一个专属于自己的微信小程序名片。按照实验要求小程序需要包含 AI 生成的 16:9 名片头图、个人文本介绍并支持分享给别人。在完成基本要求的基础上我又加入了个人词云、学业信息、项目经历和 GitHub 链接复制功能。1. 最终效果github链接qiqiqisi/ouc-mobile-software-development: 中国海洋大学 2026 夏《移动软件开发》课程实验与个人项目为了方便查看先展示最终完成效果。页面整体采用白底和蓝色强调色顶部为个人名片头图下面依次是自我介绍、关键词词云、更多信息、项目经历和分享按钮。页面内容超过一屏后可以自然向下滑动查看。继续下滑可以查看个人学业信息和项目经历项目区展示了移动软件开发、Django 电商平台、C 银行账户管理系统和 LaTeX 作业集并提供 GitHub 链接复制功能点击“分享我的名片”按钮后可以调起微信小程序的分享界面分享卡片使用个人名片头图作为封面2. 环境准备首先使用微信开发者工具创建小程序项目选择 JavaScript 基础模板。项目创建后可以看到默认的头像、昵称和 Hello World 页面。本实验主要使用以下文件pages/index/index.wxml 页面结构 pages/index/index.wxss 页面样式 pages/index/index.js 页面逻辑 images/card-cover.png 个人名片头图 images/cloud.png 个人词云通过这一步进一步熟悉了微信小程序页面中 WXML、WXSS 和 JavaScript 的基本分工WXML 负责页面中“有什么”WXSS 负责页面“长什么样”JavaScript 负责交互和系统能力调用。3. 显示个人名片头图按照实验要求我先制作了一张 16:9 的个人名片头图。图片以本人和小猫为主要内容并加入中国海洋大学、计算机科学与技术专业、邮箱以及海洋和代码元素。将图片保存到images/card-cover.png后在index.wxml中使用image组件显示image classcard-cover src/images/card-cover.png modewidthFix /在 WXSS 中让图片占满页面宽度.card-cover { display: block; width: 100%; }其中modewidthFix可以在宽度自适应页面的同时保持图片原来的宽高比例避免人物和文字被拉伸。4. 添加个人介绍头图下方增加了ABOUT ME / 关于我区域并使用比较自然的对话方式进行介绍而不是制作成传统简历页面。text classsection-labelABOUT ME/text text classsection-title关于我/text页面初步完成后的效果如下5. 添加个人词云为了让个人介绍不只有一段文字我又制作了一张个人关键词词云。词云中包含计算机、AI、科研、数学建模、Python、GitHub、小猫等关键词用不同字号和颜色展示个人学习方向和兴趣。将词云保存为images/cloud.png然后与头图一样使用image组件加载image classcloud-image src/images/cloud.png modewidthFix /对应的页面结构如下为了让词云白色背景能够自然融入页面页面整体也采用白色背景并通过间距、字号和蓝色强调色形成层级6. 添加“更多信息”在词云下方增加MORE INFO / 更多信息区域用两列布局展示较重要的个人学习信息。页面采用简洁的分割线而不是大量圆角卡片使信息比较清晰同时保持整体风格统一。继续完善后又在下方加入项目经历区域7. 展示个人项目项目区共展示四个项目。为了避免为每一个项目分别编写复制函数我在 WXML 中使用data-url保存不同的 GitHub 地址text classproject-link bindtapcopyLink />8. 实现名片分享实验要求名片可以分享给其他用户因此页面底部增加了分享按钮button classshare-button open-typeshare 分享我的名片 /buttonopen-typeshare表示这个按钮使用微信提供的分享能力。JavaScript 中通过onShareAppMessage()指定分享内容Page({ onLoad() { wx.showShareMenu({ menus: [shareAppMessage] }) }, ​ onShareAppMessage() { return { title: 伍紫涵的个人名片, path: /pages/index/index, imageUrl: /images/card-cover.png } } })其中wx.showShareMenu()用于开启当前页面的分享入口title设置分享卡片标题path指定好友点击分享卡片后进入的页面imageUrl设置分享卡片使用的封面图。分享功能对应的代码和调试过程如下至此实验要求中的“头图、文本描述、可以分享给别人”均已完成同时又增加了个人词云、学业信息、项目展示和链接复制等扩展内容。二、问题总结与体会1. 页面设计不断调整最开始个人介绍区域比较简单只展示了头图和文字。后来尝试加入标签式关键词但实际效果比较规整也和个人名片的整体风格不够统一。最终改成独立的词云图片并将页面调整为白底、蓝色强调和较多留白的布局。这个过程让我意识到前端开发不仅要保证代码能够运行还需要考虑信息层级、颜色、间距和图片比例。功能正确并不代表页面最终效果一定合适需要不断在模拟器中查看和调整。2. GitHub 外部链接问题项目经历中需要展示 GitHub 地址但微信小程序并不能像普通网页一样直接使用普通超链接跳转到任意外部网站。如果使用web-view还涉及业务域名配置对本次实验来说比较复杂。最后选择使用wx.setClipboardData()实现“复制 GitHub 链接”。用户点击项目链接后程序读取对应元素的data-url复制到剪贴板并使用wx.showToast()给出反馈。这个方法实现简单也比较适合实验场景。3. 实验收获相比实验1本次实验加入了图片资源、页面布局、词云、项目展示、链接复制和微信分享等功能。通过实际开发我更加明确了 WXML、WXSS 和 JavaScript 的分工也对widthFix、data-*、wx.setClipboardData()和onShareAppMessage()等小程序常用功能有了更直观的理解。