2024年夏季《移动软件开发》实验报告
一、实验目标
- 掌握服务器域名配置和临时服务器部署；
- 掌握
wx.request接口的用法。
二、实验步骤
（一）准备工作
1. API 密钥申请
使用可以提供全球气象数据服务接口的和风天气 API，官方网址为：https://qweather.com
点击“天气 API”，跳转至 https://dev.qweather.com/，进行账户注册
进入账户的开发服务控制台，创建免费订阅项目，并获取该项目的个人认证 key，该信息在小程序发出网络请求时会作为身份识别的标识一并发送给和风天气的第三方服务器。
至此，开源API的申请就已经完成
2. API 调用方法
访问官方文档了解各类关键词的使用方法：https://dev.qweather.com/docs/
如果要查询某地址的天气状况，要调用两次API
- 首先需要查询城市ID，URL：https://geoapi.qweather.com/v2/city/lookup?{查询参数}
- 利用查到的城市ID以及个人认证KEY查询天气，URL：https://devapi.qweather.com/v7/weather/now?{查询参数}
例如，如果查询青岛天气，首先访问https://geoapi.qweather.com/v2/city/lookup?location=qingdao&key=0b82b9a90aab4810beaf27fcfe57a1cc得到城市ID：101120201
然后访问https://devapi.qweather.com/v7/weather/now?location=101120201&key=0b82b9a90aab4810beaf27fcfe57a1cc，查询天气
3. 服务器域名配置
小程序在与指定域名地址进行网络通信前，必须将该域名地址添加到管理员后台白名单中。本示例需要对域名地址 https://geoapi.qweather.com以及https://devapi.qweather.com 进行配置。
开发者登录 mp.weixin.qq.com 进入后台，选择【设置】—【开发设置】—【服务器域名】添加或修改所需的服务器域名地址。
配置完成后，小程序开发工具中即可与指定的服务器域名地址进行网络通讯。
（二）项目创建
创建空白文件夹test2，效果如下，单击创建完成项目创建
（三）页面配置
删除和修改文件
1 删除 logs 页面，此操作在 app.json 中进行
2 删除 utils 文件夹、删除 pages 路径下存储 logs 界面的 logs 文件夹
3 删除 index.wxml 和 index.wxss 全部代码
4 删除 index.js 中全部代码，输入 page 选中自动补全选项 Page 函数
5 删除 app.wxss 所有代码
6 删除 app.js 中所有代码，输入 app 选中自动补全选项 App 函数
7 创建image文件夹存放天气图标素材
（四）视图设计
1. 导航栏设计
小程序默认导航栏为黑底白字，可在 app.json 中自定义导航栏标题和背景颜色。更新后的 app.json 文件代码如下：
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarTitleText": "今日天气",
"navigationBarBackgroundColor": "#3883FA"
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
2.页面设计
页面包含四个区域：
- 地区选择器：用户可选择查询的省市区；
- 当前城市的温度和天气状态文字说明；
- 当前城市的天气图标；
- 显示其他天气信息，如湿度、气压、能见度、风向等。
计划使用的组件如下：
- 页面整体：
<view>组件，定义class='container'； - 区域 1：
<picker>组件； - 区域 2：
<text>组件； - 区域 3：
<image>组件； - 区域 4：
<view>组件，定义class='detail'； - 区域 4 内单元行：4 个
<view>组件，定义class= 'bar'； - 区域 4 内单元格：每行 3 个
<view>组件，定义class='box'。
1. 整体容器设计
在 WXML 中定义页面容器：
<view class='container'>
</view>
在 app.wxss 中设置容器样式。
2. 区域 1（省市区选择器）设计
使用 <picker> 组件实现省市区选择器，WXML 代码如下：
<picker>
...
</picker>
3. 区域 2（文本）设计
使用 <text> 组件显示当前城市的温度和天气状况。
4. 区域 3（天气图标）设计
使用 <image> 组件展示当前城市的天气图标。
5. 区域 4（多行天气信息）设计
使用 <view> 组件展示多行天气信息，代码如下：
<view class='detail'>
<view class='bar'>
<view class='box'>湿度</view>
<view class='box'>气压</view>
<view class='box'>能见度</view>
</view>
...
</view>
（五）逻辑实现
1. 更新省市区信息
为 <picker> 组件追加 bindchange 事件，用于监听选项变化，代码如下：
<view class='container'>
<picker mode='region' bindchange='regionChange'>
<view>{{region}}</view>
</picker>
由于地区选择器的返回结果是数组的形式，所以在JS文件的数据中定义区域为包含了省市、区3个项目的数组,初始城市信息自定义为青岛市黄岛区。
Page({
data: {
region:['山东省','青岛市','黄岛区'],
id: 101220301,
},
regionChange: function(e) {
this.setData({region: e.detail.value})
this.getId(this.data.region[1])
}}
2. 获取实况天气数据
在 JS 文件中使用 getWeather 函数获取实况天气数据，代码如下：
getWeather: function() {
console.log(this.data.id)
let that = this
wx.request({
url: 'https://devapi.qweather.com/v7/weather/now',
data: {
location: that.data.id,
key: "0b82b9a90aab4810beaf27fcfe57a1cc"
},
success: function(res) {
console.log(res.data)
that.setData({now: res.data.now})
}
})
},
3. 更新页面天气信息
将页面上所有临时数据替换为 {{now.属性}} 的形式，设置初始数据如下：
WXML代码片段修改如下：
<view class='container'>
<picker mode='region' bindchange='regionChange'>
<view>{{region}}</view>
</picker>
<text> {{now.temp}}℃ {{now.text}}</text>
<image src='/images/{{now.icon}}.png' mode='widthFix'></image>
<view class='detail'>
<view class="bar">
<view class='box'>湿度</view>
<view class='box'>气压</view>
<view class='box'>能见度</view>
</view>
<view class="bar">
<view class='box'>{{now.humidity}}%</view>
<view class='box'>{{now.pressure}}hPa</view>
<view class='box'>{{now.vis}}km</view>
</view>
<view class="bar">
<view class='box'>风向</view>
<view class='box'>风速</view>
<view class='box'>风力</view>
</view>
<view class="bar">
<view class='box'>{{now.windDir}}</view>
<view class='box'>{{now.windScale}}km/h</view>
<view class='box'>{{now.windSpeed}}级</view>
</view>
</view>
</view>
JS代码片段修改如下
data: {
region:['山东省','青岛市','黄岛区'],
id: 101220301,
now: {
temp: 0,//温度
text:'未知',//内容
icon:'999',//天气代码
humidity: 0,//湿度
pressure: 0,
vis: 0,
windDir: 0,
windScale: 0,
windSpeed: 0
}
},
（六）界面优化
为了使界面更美观，可以通过以下方式优化样式：
- 增加整体布局的层次感：通过适当的padding和margin控制组件间的间距，提升用户体验。
- 调整字体和配色：使用更符合现代设计的颜色和字体大小，增加视觉效果。
- 优化组件布局：为每个区域增加圆角、阴影效果，使界面看起来更具层次感。
WXSS代码片段修改如下：
.container {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20rpx;
background-color: #F0F4F8;
}
text {
font-size: 70rpx;
color: #2A4B6D;
margin: 20rpx 0;
}
image {
width: 220rpx;
border-radius: 20rpx;
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
margin: 20rpx 0;
}
.detail {
width: 90%;
display: flex;
flex-direction: column;
padding: 20rpx;
background-color: #FFFFFF;
border-radius: 20rpx;
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}
.bar {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 20rpx 0;
}
.box {
width: 30%;
text-align: center;
font-size: 30rpx;
color: #4A4A4A;
padding: 10rpx 0;
border-bottom: 1px solid #E0E0E0;
}
三、程序运行结果
四、问题总结与体会
心得体会：在这次实验中，我学习并实现了一个基于微信小程序的天气查询应用。整个实验过程让我对微信小程序的开发有了更深入的理解，尤其是在以下几个方面收获颇多：
-
小程序的网络API使用：
本次实验的核心是使用wx.request接口进行网络请求，获取实时的天气数据。我学习并掌握了如何配置服务器域名、如何调用API，以及处理API返回的数据。这让我理解了在前端开发中如何与第三方服务进行数据交互，也提升了我在实际开发中解决跨域问题的能力。 -
视图设计与用户体验：
在设计小程序页面时，我不仅要考虑功能实现，还要注重用户体验。我尝试了不同的布局和样式，最终使得应用在视觉上更加美观、功能上更加便捷。这也培养了我在开发中对用户需求的敏感度，懂得在功能与体验之间找到平衡。 -
综合开发能力的提升：
通过本次实验，我的开发能力得到了全方位的提升。我从API的申请和使用，到项目的搭建，再到最后的逻辑实现和调试，逐步完成了整个项目的开发流程。这个过程不仅强化了我的编码能力，还让我对微信小程序的整体架构有了更深刻的理解。
扫一扫
968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
