中国海洋大学移动软件开发实验二

2024年夏季《移动软件开发》实验报告

姓名：----- 学号：------------

姓名和学号？	-------------
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验2：天气查询小程序
博客地址？
Github仓库地址？	https://gitee.com/dio-trump/software_dev

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

1、掌握服务器域名配置和临时服务器部署；2、掌握 wx.request 接口的用法。

二、实验步骤

1、准备步骤

1、注册和风天气账号，并申请API密钥

2、配置服务器域名

2、开始开发小程序

1、创建项目并对其原有模板进行初始化

1、删除utils文件夹
2、删除pages文件夹下的logs目录
3、删除index.wxml和index.wxss中的全部代码
4、删除index.js中的全部代码，并输入关键词page选择自动补全生成模板
5、删除app.wxss中的全部代码
6、删除app.js中的全部代码，并且输入关键词app自动补齐生成模板

2、更改app.json中的window属性设置导航栏

1、将标题文字设置为天气查询

2、背景颜色设置为天蓝色

3、设置主页面

主要分为四个区域，第一个区域使用一个picker组件用于选择地区，第二个区域使用text组件用于显示气温以及天气类型，第三个区域用于显示代表天气类型的图片，第四个区域用于更详细的参数如相对湿度、大气压强、能见度等。

4、设置主页面内容的大小位置以及格式

主要对第四个区域进行设置

5、利用实验文档中给出的获取天气图片的网站，将其下载到本地并移动到项目中。

6、编辑index.js文件

设置初始参数，注意weather.icon需要设置默认值，不然编译时会报错

changeRegion函数

getweather函数，第一次请求会根据地点名称获取对应的位置信息，第二次请求会根据刚刚获取的位置信息获取天气信息

三、程序运行结果

四、问题总结与体会

本次实验中我成功完成了自己开发的第二个小程序，即天气查询小程序。在这个过程中主要遇到的问题包括配至服务器后依然无法正常请求，解决方法是重启等待一段时间，另外一个问题是对data设置默认值时忘记对icon设置默认值导致编译时出现错误。