中国海洋大学计算机学院2026夏季学期《移动软件开发》本科课程实验-实验一：热身运动
| 姓名和学号？ | 钟志炜，24020007172 |
|---|---|
| 本实验属于哪门课程？ | 中国海洋大学26夏《移动软件开发》 |
| 实验名称？ | 实验1：热身运动 |
一、实验内容
一、实验目的
- 下载并安装微信官方开发者工具，熟悉小程序开发环境的搭建流程。
- 掌握在开发者工具中创建一个空白小程序项目的方法，理解项目配置中 AppID、开发模式、语言、模板选择等关键参数的含义。
- 通过编写一个简单的 Hello World 交互小程序（点击按钮改变页面文字），初步认识并体会 wxml（页面结构）、wxss（页面样式）、js（页面逻辑） 三类文件在小程序开发中各自的作用。
- 熟悉使用 Typora 与 Markdown 编写实验报告，养成规范的实验记录与技术文档编写习惯。
二、实验步骤
步骤 1：安装微信微信开发者工具
访问微信官方开发者工具下载页面（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ），根据自己的操作系统下载最新稳定版，双击安装包按提示完成安装。根据个人电脑我下载的是图片所示版本
步骤 2：创建项目文件夹
在桌面新建一个空白文件夹，作为小程序项目的存放目录。
步骤 3：新建小程序项目
打开微信开发者工具，选择 "小程序" 分类，点击加号创建项目。在创建页面中依次配置：
-
项目名称：自定义填写，我填的是“zzw第一个小程序”；
-
目录：选中步骤 2 中在桌面新建的空白文件夹；
-
AppID：点击 "使用测试号"；
-
开发模式：选择 "小程序"；
-
后端服务：默认是 "不使用云服务"；
-
模板选择：在 "全部分类" 中选择"不使用模板"。
配置完成后点击 "创建"，等待项目初始化加载完成。
![image2]()
步骤 4：编写 Hello World 交互小程序
参考微信官方视频教程，在项目中手动编写代码，实现一个带有按钮的页面：初始页面显示文字（如 "hello girl"），点击按钮后文字变为 "hello boy"。在编写过程中分别在 .wxml、.wxss、.js 文件中完成页面结构、样式与交互逻辑，体会三者的分工与协作关系。
1、index.wxml:
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<view class='title'>hello {{wording}}!</view>
<view class="image-wrap">
<image mode="widthFix"src="../../images/640.gif"></image>
</view>
<button bind:tap="onClick">点击</button>
2、index.wxss:
page{
text-align: center;
font-size: 40rpx;
font-weight: bold;
}
.title{
color: red;
}
.image-wrap{
width: 100%;
display: flex;
justify-content: center;
}//图片居中
3、index.js:
const app=getApp()
Page({
data:{
wording:'world'
},
onClick:function(){
this.setData({
wording: this.data.wording==='world' ? 'boys and girls' : 'world'//实现点击更换
})
}
})
三、实验结果
效果如图所示：
1、小程序进入后默认页面：
2、点击按钮后可变换文字
二、问题总结与体会
一、问题总结
1、没有仔细查看默认有的内容盲目删除导致没有标题，进而导致了文字位置异常
如图所示，此时我按照视频教学输入了“hello world!”发现文字在页面最上面与手机上栏重合，初期通过询问大数据模型使用“padding-top: calc(env(safe-area-inset-top) + 40rpx);”避开手机状态栏，同时正文内容一起向下，实现不贴上顶栏。后面与同学交流发现最开始是有 navigation‑bar这一自定义导航栏占据上面空间使得后续文字从下方起始。
2、根据视频教学使文字居中，视频效果中图片也一起居中了但实际操作中并没有居中
如图，此时可以看到我只是在page里面设置了文本水平方向居中，没有达到视频中照片也居中的效果，后根据大数据模型的指导，得知page {text‑align:center;} 只能让行内元素居中，view、image 属于块级元素，这个样式对它不起居中效果。后面在图片外面包一层容器，实现居中。
二、体会
首先就是新建一个项目之后先看看里面默认给的有什么，一般来说默认给的肯定都是比较有用的基础的东西，作为一个初学者应该有相关的认识，在教学视频里面我看到演示者的文件里面什么都没有就直接跟着删掉了最后导致出现了一系列问题，虽然最后兜兜转转解决了但极大的耽误了进度。
其次是认识到教学演示与实际效果并不一定完全符合，网上教学资源具有滞后性，在实际学习时应该结合最新的内容，比如说图片居中，视频中在设置文字时同时实现了图片的居中，但实际复现时发现需要单独处理。
浙公网安备 33010602011771号