OUC26夏移动软件开发-实验1姓名马一诺 学号项目内容姓名和学号马一诺本实验属于哪门课程中国海洋大学26夏《移动软件开发》实验名称实验1热身运动GitHub源码链接https://github.com/1-qaz-2-wsx/ouc26-mobile-dev/tree/main/lab1博客链接https://blog.csdn.net/2604_96828618/article/details/164025493?spm1011.2415.3001.10575sharefrommp_manage_link一、实验内容1. 安装微信开发者工具首先访问微信开发者工具官方下载页面根据计算机的操作系统下载稳定版安装包并完成安装。微信开发者工具提供了代码编辑、编译预览、模拟器和调试器等功能是本实验开发和测试小程序的主要工具。2. 创建第一个微信小程序项目在本地创建空白项目目录并在微信开发者工具中选择“小程序”项目类型填写项目名称和目录后完成创建。本实验最终代码保存在lab1/code1文件夹中。3. 设计“or”切换小程序本实验在基础 Hello World 案例上进行扩展制作一个可以循环切换小动物图片和问候文字的小程序。初始页面显示hello dog和腊肠犬图片点击not me按钮后按以下顺序切换hello orange cat和橘猫图片hello black cat和黑猫图片hello white cat和白猫图片再次回到hello dog和腊肠犬图片。四张图片分别保存在code1/img文件夹中img/ ├── sausage-hotdog.jpg ├── orange-cat.jpg ├── black-cat.jpg └── white-cat.jpg3.1 页面导航和整体结构页面使用项目自带的navigation-bar组件设置顶部导航并使用scroll-view作为可滚动的主体区域navigation-bar titleor back{{false}} color#4a3828 background#fff8ea /navigation-bar scroll-view classscrollarea scroll-y enhanced show-scrollbar{{false}} view classpage-container !-- 页面内容 -- /view /scroll-viewtitle设置导航栏标题back{{false}}表示当前页面是首页不显示返回按钮。scroll-y允许页面纵向滚动避免内容在小屏幕设备中显示不完整show-scrollbar{{false}}隐藏滚动条使页面更加简洁。3.2 使用数据绑定显示当前宠物在index.js的data中建立pets数组每个元素同时保存问候文字、图片路径和对应表情。这样可以保证切换时文字和图片始终一一对应。data:{pets:[{wording:hello dog,image:/img/sausage-hotdog.jpg,emoji:},{wording:hello orange cat,image:/img/orange-cat.jpg,emoji:},{wording:hello black cat,image:/img/black-cat.jpg,emoji:⬛},{wording:hello white cat,image:/img/white-cat.jpg,emoji:}],currentIndex:0,currentPet:{wording:hello dog,image:/img/sausage-hotdog.jpg,emoji:}}currentIndex保存当前宠物在数组中的下标初始值为0所以程序第一次打开时显示数组中的腊肠犬。currentPet保存当前需要展示的完整宠物对象。WXML 使用双大括号进行数据绑定view classgreeting-row text classpet-emoji{{currentPet.emoji}}/text text classtitle{{currentPet.wording}}/text /view image classpet-image modeaspectFill src{{currentPet.image}} /image当currentPet发生变化时页面中的表情、问候文字和图片会自动更新。modeaspectFill让图片在保持原始比例的同时铺满固定大小的图片区域多余部分自动裁剪3.3 实现按钮点击和循环切换按钮使用bindtap将点击事件绑定到changePet函数button classchange-button bindtapchangePet hover-classbutton-hover not me /button其中bindtapchangePet表示点击按钮时执行 JavaScript 中的同名函数hover-class用于设置按钮按下时的视觉反馈。循环切换逻辑如下changePet(){constnextIndex(this.data.currentIndex1)%this.data.pets.lengththis.setData({currentIndex:nextIndex,currentPet:this.data.pets[nextIndex]})}每次点击后当前下标加1再对数组长度取模。this.setData()用来修改页面数据并通知小程序重新渲染相关 WXML 内容。不能只直接修改this.data否则界面不会可靠地同步更新。3.4 使用列表渲染制作状态指示点图片下方设置四个状态指示点用来提示当前处于第几张图片view classindicator-list view wx:for{{pets}} wx:keywording classindicator {{index currentIndex ? indicator-active : }} /view /viewwx:for{{pets}}会根据宠物数组循环创建四个view。系统自动提供的index表示当前循环下标当它等于currentIndex时元素会额外获得indicator-active样式使当前指示点变长并改变颜色。.indicator { width: 13rpx; height: 13rpx; margin: 0 8rpx; border-radius: 50%; background: #dccbb8; } .indicator-active { width: 36rpx; border-radius: 8rpx; background: #d48852; }3.5 背景和宠物卡片设计页面整体使用米白、浅橙和棕色组成的暖色风格与猫狗图片的轻松主题保持一致。背景由两个径向渐变和一个线性渐变叠加而成.scrollarea { flex: 1; overflow-y: auto; background: radial-gradient(circle at 12% 18%, rgba(255, 197, 92, 0.24) 0, rgba(255, 197, 92, 0.24) 90rpx, transparent 92rpx), radial-gradient(circle at 88% 82%, rgba(133, 196, 157, 0.20) 0, rgba(133, 196, 157, 0.20) 130rpx, transparent 132rpx), linear-gradient(160deg, #fff8ea 0%, #f9edda 100%); }主体内容放在半透明白色卡片中并通过圆角、边框和阴影增强层次.pet-card { width: 100%; padding: 42rpx 34rpx 38rpx; border: 2rpx solid rgba(151, 112, 75, 0.12); border-radius: 38rpx; background: rgba(255, 255, 255, 0.88); box-shadow: 0 22rpx 55rpx rgba(106, 77, 48, 0.16); }按钮采用胶囊形圆角和橙色渐变并设置阴影与按压反馈.change-button { width: 72%; border: none; border-radius: 999rpx; background: linear-gradient(135deg, #e49a63, #cb704b); color: #ffffff; box-shadow: 0 10rpx 24rpx rgba(198, 105, 69, 0.28); } .button-hover { opacity: 0.82; transform: scale(0.98); }页面尺寸主要使用微信小程序提供的rpx单位。屏幕宽度会被换算为750rpx所以图片、间距、文字和圆角可以根据不同设备宽度自动缩放。4. 最终运行效果二、问题总结与体会1. 实验中遇到的问题及解决方法1不同图片尺寸导致页面布局变化。四张图片的宽高比例并不完全一致如果使用widthFix切换图片时展示区域高度会发生改变。解决方法是在.image-frame中设置统一的宽高再给图片设置width: 100%、height: 100%和modeaspectFill。这样图片会保持比例并填满容器切换时页面结构更加稳定。2两个状态的三元运算无法满足四个状态循环。基础案例可以通过三元表达式在girl和boy之间切换但本实验需要依次展示四组文字和图片。使用对象数组统一保存每只宠物的数据通过“下标加一后对数组长度取模”的方式完成循环。3顶部区域可能被状态栏遮挡。使用自定义navigation-bar组件处理系统状态栏和胶囊按钮区域页面主体放在导航栏下方的滚动容器中相比直接添加固定顶部内边距更适合不同设备。2. 实验收获与体会通过本次实验我熟悉了微信小程序的基本流程理解了 WXML、WXSS、JavaScript 和 JSON 配置文件之间的分工。WXML 负责页面结构和数据绑定WXSS 负责外观及移动端布局JavaScript 负责数据与交互逻辑JSON 负责页面配置和组件注册。