| 姓名和学号？ | 池晋原，24020007016 |
|---|---|
| 本实验属于哪门课程？ | 中国海洋大学26夏《移动软件开发》 |
| 实验名称？ | 实验2：名片小程序 |
| 博客地址？ | https://www.half-awake.top/ |
| 代码仓库地址？ | https://github.com/HalfAwake-destiny/Mobile-software-development |
一、实验内容
本次实验的主要内容是创建一个个人名片小程序。名片首页展示个人头图、姓名、学院、自我简介和兴趣爱好，页面底部提供“访问我的博客”按钮；单击按钮后跳转到博客页面，通过 web-view 组件在小程序内直接打开实验一中登记的个人博客（half-awake.top）。通过本次实验，初步掌握了自定义组件的创建与引用、页面间跳转以及 web-view 组件和业务域名的配置方法。
1. 编写名片页面结构
在 pages/index/index.wxml 中编写名片首页结构，页面从上到下依次包含头图、姓名、学院、“关于我”简介、“兴趣爱好”列表和底部的跳转按钮。其中头图使用 image 组件并设置 mode="aspectFill" 保证图片铺满裁剪；兴趣爱好部分引入自定义组件 hobby-list，通过 items="{{hobbies}}" 传入数据；底部按钮通过 bindtap="openBlog" 绑定点击事件，用于跳转到博客页。
2. 设置名片页面样式
在 pages/index/index.wxss 中设置名片的整体样式。头图设置为固定高度的圆角卡片并添加阴影，姓名和学院纵向排列、字号区分主次，各栏目之间用细分隔线隔开，底部按钮使用深色背景、白色文字，并通过 hover-class 在按下时降低透明度，形成按压反馈。
3. 抽取并使用自定义组件
本次实验将重复性较高的部分抽取为自定义组件。hobby-list 组件通过 properties 接收外部传入的 items 数组，再用 wx:for 循环渲染每一项兴趣爱好，包含图标、名称和备注。兴趣爱好数据保存在 pages/index/index.js 的 data 中。组件需要先在页面配置文件 pages/index/index.json 的 usingComponents 中声明，然后才能像普通标签一样在 WXML 中使用。项目中的 navigation-bar 自定义导航栏组件也以同样方式引入。
4. 实现按钮跳转与博客页
在 pages/index/index.js 中定义按钮事件 openBlog，使用 wx.navigateTo 跳转到博客页面：
openBlog() { wx.navigateTo({ url: '/pages/blog/blog', })}wx.navigateTo 会把新页面压入页面栈，因此博客页可以通过左上角返回按钮回到名片页。博客页 pages/blog/blog.wxml 中只放置一个 web-view 组件，src 指向个人博客地址：
<web-view src="https://www.half-awake.top"></web-view>web-view 会自动铺满整个页面，用于在小程序内展示网页内容。
5. 配置业务域名并编译运行
web-view 组件加载的网页域名必须在小程序管理后台配置后才能正常访问。登录小程序管理后台（mp.weixin.qq.com），在“开发管理 → 开发设置 → 业务域名”中添加 www.half-awake.top。
完成配置后保存代码并重新编译。模拟器中名片首页能够正常显示头图、姓名、简介、兴趣爱好列表和底部按钮；单击“访问我的博客”按钮后，页面跳转到博客页，web-view 中正常加载出个人博客首页，说明组件渲染、页面跳转和域名配置均已生效。
二、问题总结与体会
实验过程中遇到的第一个问题是点击按钮跳转博客时被拦截。最初博客页打开后无法正常加载网页，原因是 web-view 组件对加载的域名有白名单限制，未配置的域名会被微信拦截。后来在小程序管理后台的“业务域名”设置中添加博客域名并完成校验，同时在开发阶段勾选开发者工具中的“不校验合法域名”选项，跳转功能才恢复正常。这让我认识到，小程序出于安全考虑对外部网页有严格的域名校验，上线前必须提前完成业务域名配置。
第二个问题是自定义导航栏的适配。app.json 中设置 navigationStyle: custom 后，系统默认导航栏被隐藏，顶部状态栏和右上角胶囊按钮的位置需要自行处理。导航栏组件通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的位置，再结合设备信息计算安全区高度，避免了标题被状态栏遮挡的问题。
第三个问题是 web-view 组件的渲染方式。web-view 会自动铺满整个页面，无法与名片内容混排在同一页面，因此需要单独建立一个只包含 web-view 的博客页，再通过 wx.navigateTo 跳转过去；同时博客页的渲染模式需要与全局 Skyline 模式区分，单独设置为 WebView 渲染，保证网页正常加载。
通过本次实验，我掌握了自定义组件的创建和使用方法：组件通过 Component 定义，用 properties 接收外部数据，页面在 JSON 中通过 usingComponents 声明后即可在 WXML 中引用，配合 wx:for 可以方便地渲染列表数据。页面跳转方面，我理解了 wx.navigateTo 与页面栈的关系，以及 web-view 组件用于承载网页的能力边界。把名片页和个人博客串联起来之后，小程序不再只是一个静态展示页，而是成为入口和网页内容的组合，这为后续实验打下了基础。