移动软件开发_实验1：热身运动

本实验属于哪门课程中国海洋大学26夏《移动软件开发》实验名称实验1热身运动代码仓库地址https://github.com/shen5920/Mobile-Software-Development/tree/main目录一、实验内容1.1 实验目的1.2 开发环境准备——下载与安装微信开发者工具1.2.1 下载微信开发者工具1.2.2 安装微信开发者工具1.3 创建属于自己的第一个小程序1.3.1 在桌面创建一个空白文件夹1.3.2 新建并配置小程序项目1.3.3 小程序项目目录结构1.4 实现 Hello World 小程序1.4.1 app.json —— 全局配置1.4.2 index.wxml —— 页面结构1.4.3 index.wxss —— 页面样式1.4.4 index.js —— 页面逻辑1.4.5 index.json —— 页面配置1.5 运行效果1.6 WXML、WXSS、JS 三种文件的作用总结二、问题总结与体会一、实验内容1.1 实验目的熟悉微信小程序官方开发者工具的下载与安装流程学会创建一个空白的小程序项目了解小程序的目录结构通过实现一个 Hello World 小程序动手编写代码体会 WXML、WXSS、JS 三种文件各自的作用。1.2 开发环境准备——下载与安装微信开发者工具1.2.1 下载微信开发者工具微信小程序需要使用微信官方提供的「微信开发者工具」进行开发。下载地址为微信开放文档打开上述网址后建议下载最新的稳定版本Stable Build然后点击自己电脑对应系统的版本Windows 64 位 / Windows 32 位 / macOS 等下载即可。1.2.2 安装微信开发者工具安装非常方便只需要双击安装包然后不停地点击「下一步」即可完成安装。安装完成以后打开官方开发者工具界面长这样首次打开需要用微信扫码登录1.3 创建属于自己的第一个小程序1.3.1 在桌面创建一个空白文件夹在桌面创建一个空白文件夹名字可以随便取本实验以 lab1文件夹为例。1.3.2 新建并配置小程序项目打开微信开发者工具点击「」号或「新建项目」选择「小程序」类型开始配置小程序项目。注意微信小程序官方最新的开发者工具界面有过多次变化所以不同版本创建项目的界面可能略有不同以下以最新版为例进行说明。在项目配置中选择「不使用模板」即从空白项目开始不套用任何模板。配置好以后点击「新建」即可创建属于自己的第一个小程序。1.3.3 小程序项目目录结构创建完成后本实验项目lab1的目录结构如下lab1/ ├── app.js // 小程序入口逻辑文件 ├── app.json // 小程序全局配置文件 ├── app.wxss // 小程序全局样式文件 ├── project.config.json // 项目工具配置文件 ├── sitemap.json // 页面收录配置SEO ├── images/ // 图片资源目录 │ ├── 1.png │ ├── 2.png │ └── nailong.png ├── components/ // 自定义组件目录 │ └── navigation-bar/ // 自定义导航栏组件默认生成 └── pages/ // 页面目录 └── index/ // index 页面 ├── index.js // 页面逻辑 ├── index.json // 页面配置 ├── index.wxml // 页面结构 └── index.wxss // 页面样式1.4 实现 Hello World 小程序本实验的 Hello World 小程序参考官方视频教程https://developers.weixin.qq.com/community/business/doc/0008ae90008ff80bd48838c5e5600d其核心功能是点击按钮改变页面里的文字。在完成基础功能后本实验对它做了一点扩展点击按钮后不仅改变文字还会切换页面上的图片实现「打开笼子 → 追逐逮捕」的交互效果。下面结合本实验的实际代码分别介绍几个核心文件的作用。1.4.1app.json—— 全局配置{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black }, style: v2, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }解释pages声明小程序所有页面的路径数组第一项就是小程序的首页这里只有一个pages/index/index页面window配置全局窗口样式navigationBarTextStyle设为black表示导航栏文字为黑色style: v2启用新版组件样式sitemapLocation指定页面收录配置文件的位置。1.4.2index.wxml—— 页面结构!--index.wxml-- navigation-bar titletest back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classcontainer view wx:if{{showTip}} classtip-text胖宝宝 你给我回来/view image modewidthFix src{{imgSrc}}/image button bindtaphandleBtnClick{{btnText}}/button /view /scroll-view解释navigation-bar自定义导航栏组件项目默认生成scroll-view可滚动区域scroll-y表示允许纵向滚动{{imgSrc}}、{{btnText}}数据绑定语法用双大括号{{}}把 JS 里data中的数据渲染到页面上wx:if{{showTip}}条件渲染只有当showTip为true时提示文字才会显示bindtaphandleBtnClick事件绑定点击按钮时会触发 JS 中的handleBtnClick函数。1.4.3index.wxss—— 页面样式.container{ padding:20rpx; display:flex; flex-direction:column; align-items:center; } .tip-text{ font-size:36rpx; color:#ff4444; margin:20rpx 0; } image{ width:90%; margin-bottom:30rpx; }解释.container使用display: flex弹性布局并配合flex-direction: column和align-items: center让内容垂直排列并水平居中rpx是小程序特有的响应式长度单位它会根据屏幕宽度自动换算750rpx 屏幕宽度保证在不同机型上显示效果一致image{ width:90% }设置图片宽度为父容器的 90%。1.4.4index.js—— 页面逻辑Page({ data: { status: 0, imgSrc: /images/1.png, btnText: 打开笼子, showTip: false }, handleBtnClick(){ if(this.data.status 0){ this.setData({ status:1, imgSrc:/images/2.png, btnText:点击追逐逮捕, showTip:true }) }else{ this.setData({ status:0, imgSrc:/images/1.png, btnText:打开笼子, showTip:false }) } } })解释Page({...})用于注册一个页面data页面的初始数据包括状态标志status、图片路径imgSrc、按钮文字btnText、提示显示标志showTiphandleBtnClick()按钮点击的处理函数。当status 0时通过this.setData({...})把图片切换成2.png、按钮文字改为「点击追逐逮捕」、显示提示文字否则恢复成初始状态实现了点击按钮切换页面内容和文字的效果this.setData()是小程序更新页面数据的唯一方式它会同步更新data并重新渲染页面。1.4.5index.json—— 页面配置{ usingComponents: { navigation-bar: /components/navigation-bar/navigation-bar } }解释usingComponents用于声明当前页面使用到的自定义组件这里注册了默认生成的navigation-bar导航栏组件。1.5 运行效果点击开发者工具上方的「编译」按钮即可在模拟器中预览小程序效果初始状态显示一张关在笼子里的图片按钮文字为「打开笼子」点击按钮后图片切换为另一张图按钮文字变为「点击追逐逮捕」并显示提示文字「胖宝宝 你给我回来」再次点击按钮恢复初始状态如此反复切换。1.6 WXML、WXSS、JS 三种文件的作用总结文件类型作用类比 Web 前端.wxml定义页面的结构负责页面上有什么HTML.wxss定义页面的样式负责页面长什么样CSS.js定义页面的逻辑和数据负责页面怎么动JavaScript简单来说WXML 负责搭骨架WXSS 负责美化外观JS 负责交互逻辑三者共同构成一个小程序页面。二、问题总结与体会遇到的问题及解决安装微信开发者工具时遇到的问题下载完安装包后最开始双击启动安装包时最先弹出报错提示「无法向 C 盘写入文件」。出现这个提示的根本原因是当前以普通权限运行的安装程序没有足够的操作系统权限无法在 C 盘的系统目录中创建、修改文件写入操作被 Windows 系统拦截安装进程异常中断。这次中途失败的安装直接破坏了本地的.exe安装文件安装包数据因此受损当之后再次双击同一个安装文件尝试运行时就触发了第二份报错——「NSIS-Error 安装程序完整性校验失败」。针对这一个问题的完整解决流程如下将这份已经损坏的安装包以及相关临时缓存文件全部彻底删除清除掉失败安装产生的所有残留文件前往官方渠道重新下载一份全新、完整的安装程序不再直接双击打开而是右键新下载好的 exe 文件选择「以管理员身份运行」。管理员权限赋予了安装程序写入 C 盘的权限不再出现写入失败安装顺利完成两个故障一并解决。点击按钮没有反应代码写好后点击页面上的按钮却没有任何反应。一开始怀疑是代码写错了于是询问 AI 寻求帮助但检查后发现代码本身并没有问题调试器也没有任何报错按照 AI 提示做了一些改动后仍然无效。最后把整个微信开发者工具完全关闭后重新启动再次点击按钮就正常了。这说明问题并不是代码逻辑错误而是开发者工具的编译缓存或运行状态异常导致的重启工具即可解决。图片路径问题一开始图片无法正常显示排查后发现是图片路径写错了——当时没有仔细查看目录结构只写了一个../导致路径层级不对、找不到图片。后来仔细核对了图片相对当前页面的位置改成了正确的相对路径../../images/1.png之后才正常显示。以后引用图片时也可以直接改用绝对路径以/开头如/images/1.png就能避免这类由目录层级引起的路径错误。页面数据不更新修改了变量后页面没有变化原因是直接给data赋值不会触发重新渲染必须通过this.setData()来更新数据。收获与体会通过本次实验我完整地走了一遍小程序开发流程从下载安装开发者工具、创建空白项目到手写 WXML、WXSS、JS 代码实现交互效果。在安装环节我还切身体会到了 Windows 系统中文件权限与程序完整性校验的重要性——普通权限无法向 C 盘系统目录写入失败的中断安装还会损坏安装包数据而「以管理员身份运行」正是解决这类权限问题的正确方式。在开发环节最大的收获是真正理解了小程序三种核心文件的分工——WXML 负责结构、WXSS 负责样式、JS 负责逻辑这种「结构-样式-逻辑」分离的思想与 Web 前端开发一脉相承。在把官方 Hello World 的改文字扩展成改图片 改文字的过程中我也掌握了数据绑定{{}}、条件渲染wx:if、事件绑定bindtap以及setData更新视图等小程序的核心机制为后续的移动软件开发打下了基础。