移动软件开发实验1：第一个微信小程序

姓名和学号本实验属于哪门课程中国海洋大学26夏《移动软件开发》实验名称实验1第一个微信小程序博客地址代码仓库地址https://github.com/Hwchensy/OUC-Mobile-Software-Development一、实验内容本实验设计了一个简单的猫咪主题微信小程序页面页面主要包括顶部导航栏hello girl!或hello boy!文字根据当前状态显示 或 图标一张猫咪图片一个黄色圆角按钮在基本功能的基础上本实验还增加了页面动态切换效果。用户点击按钮后程序首先让当前的文字和表情逐渐缩小并淡出随后切换girl和boy状态并让新的文字和表情从较小状态逐渐放大并淡入。页面的状态切换更加直观也增强了小程序的交互性和视觉效果。1. 创建页面结构在index.wxml中编写页面内容。首先使用view对页面进行分区域组织分别设置标题、图片和按钮。标题中的{{worlding}}与 JavaScript 中的数据进行绑定根据worlding的值动态显示girl或boy。利用wx:if和wx:else对表情进行条件判断使文字和表情能够随着数据变化而变化。图片部分通过image组件显示指定路径的猫咪图片使用modewidthFix保持图片比例。最后通过button创建点击按钮并使用bindtaponClick将按钮的点击操作与 JavaScript 中的onClick函数连接起来。viewclasspage!-- 标题 --viewclasstitleviewclasstitle-content {{animationClass}}texthello {{worlding}}!/texttextwx:if{{worlding girl}}/texttextwx:else/text/view/view!-- 图片 --viewclassimage-boximageclassmain-imagemodewidthFixsrc../../img/b5ce696092c74d777569ce5068aa1d7a.jpg/image/view!-- 按钮 --buttonclasschange-buttonbindtaponClick点击/button/view2. 设置页面数据在index.js中设置页面初始数据处理按钮点击并通过状态切换和动画实现girl与boy的动态变化。Page({data:{worlding:girl,animationClass:},onClick:function(){// 缩小淡出this.setData({animationClass:animate-out})// 300毫秒以后切换内容setTimeout((){// girl 和 boy 互相切换if(this.data.worldinggirl){this.setData({worlding:boy,animationClass:})}else{this.setData({worlding:girl,animationClass:})}// 稍微等待一下再执行进入动画setTimeout((){this.setData({animationClass:animate-in})// 动画结束后清除classsetTimeout((){this.setData({animationClass:})},400)},30)},300)}})程序开始运行时worlding girl因此页面显示hello girl! 当用户点击按钮时执行onClick函数。程序首先判断this.data.worldinggirl如果当前是girl就使用this.setData({worlding:boy})将数据修改为boy。如果当前不是girl则修改为this.setData({worlding:girl})每点击一次按钮页面就会在两个状态之间切换每点击一次按钮页面就会在两个状态之间切换。 为了使状态切换不只是简单地改变文字本实验还加入了动态动画效果。点击按钮后程序首先将 animationClass 设置为 animate-out使当前的文字和表情执行缩小和淡出动画 javascript this.setData({ animationClass: animate-out })通过setTimeout等待 300 毫秒使淡出动画完成后再修改worlding的值。此时页面由girl切换为boy或者由boy切换为girl。状态切换完成后程序将animationClass设置为animate-inthis.setData({ animationClass: animate-in })此时新的文字和表情会执行放大和淡入动画从而实现比较自然的页面切换效果。最后在动画执行完成后将animationClass恢复为空this.setData({ animationClass: })这样可以避免动画状态一直保留保证下一次点击时能够重新触发动画。3. 设置页面样式在index.wxss中主要对页面的整体布局、标题、图片、按钮以及动画效果进行了样式设计和调整设置页面整体样式通过.page设置整个页面的最小高度、内边距和背景颜色.page{min-height:100vh;padding:40rpx;box-sizing:border-box;background:#f5f6fa;}将页面背景设置为浅灰色并增加页面内边距使页面中的内容不会紧贴屏幕边缘。调整标题样式通过.title和.title-content对标题进行调整使hello girl!或hello boy!显示在页面上方并居中同时设置字体大小、字体粗细和文字颜色.title{width:100%;text-align:center;margin-top:80rpx;margin-bottom:60rpx;}.title-content{display:inline-block;font-size:48rpx;font-weight:bold;color:#333333;}标题字体更加醒目并通过上下边距与图片保持一定距离。增加文字和表情的动态效果通过.animate-out和.animate-in两个类分别控制切换前后的动画.animate-out{animation:disappear 0.3s ease-in forwards;}.animate-in{animation:appear 0.4s ease-out forwards;}disappear动画使原来的文字和表情从正常大小逐渐缩小到0.5倍同时透明度从1变为0实现缩小淡出。appear动画则让新的文字和表情从0.5倍逐渐恢复到正常大小同时透明度从0变为1实现放大淡入。keyframesdisappear{0%{transform:scale(1);opacity:1;}100%{transform:scale(0.5);opacity:0;}}keyframesappear{0%{transform:scale(0.5);opacity:0;}100%{transform:scale(1);opacity:1;}}调整图片显示效果通过.image-box实现图片水平居中通过.main-image设置图片宽度、圆角和阴影.main-image{width:90%;border-radius:24rpx;box-shadow:0 10rpx 30rpxrgba(0,0,0,0.15);}图片宽度设置为页面的90%并增加圆角和阴影使图片不会显得过于生硬同时增强页面的层次感。重新设计按钮样式对原来的默认按钮进行了重新设计将按钮设置为宽度60%、圆角50rpx并使用浅黄色#F6D365作为背景颜色button{width:60%;margin:50rpx auto;border-radius:50rpx;background-color:#F6D365;color:white;font-size:32rpx;box-shadow:0 8rpx 20rpxrgba(0,0,0,0.15);}通过圆角、黄色背景和阴影使按钮更加突出也与页面整体风格更加协调。增加按钮点击反馈新增button:active让用户点击按钮时按钮会稍微缩小并降低透明度button:active{transform:scale(0.96);opacity:0.85;}这样点击按钮时能够立即看到视觉反馈增强页面的交互感。二、问题总结与体会问题总结问题一模拟器显示内容不全navigation-bar.wxml 没被当前 index 页面使用解决方法在 index.json 注册组件在 index.wxml 使用它index.json { usingComponents: { navigation-bar: /components/navigation-bar/navigation-bar } } index.wxml navigation-bar/navigation-bar view classtitlehello {{worlding}}!/view image modewidthFix src../../img/b5ce696092c74d777569ce5068aa1d7a.jpg /image button bindtaponClick点击/button问题二点击按钮后页面文字没有直接修改解决方法页面中的worlding需要通过setData()修改。正确写法为this.setData({worlding:boy})这样修改数据后WXML 中的{{worlding}}才会同步更新。问题三点击按钮后虽然内容发生了变化但是没有明显的动画效果。最开始使用wx.createAnimation()实现动画在点击按钮后修改animationData。但是实际运行时发现页面中的girl和boy会直接切换看不到明显的缩小、淡出和放大效果。经过检查发现动画数据的设置和页面内容切换的时间比较接近导致动画还没有明显显示内容就已经完成了切换。后来将动画拆分成两个阶段首先设置animationClass为animate-out让当前内容缩小并淡出使用setTimeout等待约300ms后再修改worlding的值最后设置animationClass为animate-in让新的内容放大并淡入。这样就能够明显看到完整的切换过程。问题四修改动画时原来的内容和新的内容会出现切换不自然的问题。开始时直接修改worlding会导致girl和boy在同一时间发生变化页面看起来像是文字突然被替换没有过渡效果。解决方法在 JavaScript 中先执行this.setData({ animationClass: animate-out })让原内容先消失再修改this.setData({ worlding: boy })最后再执行this.setData({ animationClass: animate-in })使新的内容重新出现。通过先退出、再切换、后进入的方式。问题五CSS 动画写好以后点击按钮仍然没有动画。检查后发现CSS 中虽然定义了.animate-out { animation: disappear 0.3s ease-in forwards; } .animate-in { animation: appear 0.4s ease-out forwards; }但是如果 WXML 中没有将animationClass与元素的class进行绑定CSS 动画就不会被应用。因此将标题部分修改为view classtitle-content {{animationClass}}这样 JavaScript 修改animationClass后WXML 会动态添加animate-out或animate-in类从而触发对应的 CSS 动画。问题五按钮使用默认样式时页面效果比较单调。微信小程序中的button默认样式比较简单与页面整体设计不太协调。因此重新设置了按钮的宽度、圆角、颜色和阴影并将背景颜色修改为#F6D365。同时增加button:active { transform: scale(0.96); opacity: 0.85; }使按钮点击时会轻微缩小并变透明解决了点击按钮后没有明显操作反馈的问题。体会通过本次实验我进一步熟悉了微信小程序中 WXML、WXSS 和 JavaScript 三部分之间的配合对小程序的基本开发流程有了更加直观的认识。通过增加girl和boy的状态切换以及动态动画效果了解到页面不仅要实现基本功能还需要考虑用户的操作体验和页面的视觉效果。在调试过程中我遇到了动画无法正常显示、内容切换不流畅等问题通过逐步检查代码并调整动画执行顺序最终实现了预期效果。通过这次实验我对数据绑定、条件渲染和 CSS 动画有了进一步的理解理解了微信小程序基本的开发模式。WXML负责结构 WXSS负责样式 JS负责逻辑三者相互配合可以实现具有动态交互效果的微信小程序页面。