2024年夏季《移动软件开发》实验报告
一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
1. 在和风天气网站注册账号并申请API
和风天气开发服务 ~ 强大、丰富的天气数据服务 (qweather.com)
点击免费注册,注册后登录账号
进入开发服务控制台
在项目管理界面创建key
2. 为微信小程序配置服务器域名
管理——>开发管理——>服务器域名修改
3. 下载和风天气矢量图标,放在项目合适位置
和风天气图标 ~ 开源、漂亮的天气图标库,支持SVG和Web Font,兼容和风天气API,适用于任何需要天气图标的项目。 (qweather.com)
在项目根目录创建文件夹image,将下载的图片放入。
4. 设计页面整体布局
我按照要求将页面分为四个区域。具体代码如下:
<view class='container'>
<!-- 区域1:地区选择器 -->
<picker mode='region' bindchange='regionChange'>
<view class='region-picker'>
<view class='cityInfo'>{{region}}</view>
</view>
</picker>
<!-- 区域2:单行天气信息 -->
<view class='weather-info'>
<view class="tempNumber">{{now.temp}}℃</view>
<view class="weatherText">{{now.text}}</view>
</view>
<!-- 区域3:天气图标 -->
<image src='/images/{{now.icon}}.svg' class='weather-icon'></image>
<!-- 区域4:多行天气信息 -->
<view class='detail'>
<view class="bar">
<view class='box1'>湿度</view>
<view class='box1'>气压</view>
<view class='box1'>能见度</view>
</view>
<view class="bar">
<view class='box2'>{{now.humidity}}%</view>
<view class='box2'>{{now.pressure}}hPa</view>
<view class='box2'>{{now.vis}}km</view>
</view>
<view class="bar">
<view class='box1'>风向</view>
<view class='box1'>风速</view>
<view class='box1'>风力</view>
</view>
<view class="bar">
<view class='box2'>{{now.windDir}}</view>
<view class='box2'>{{now.windSpeed}}km/h</view>
<view class='box2'>{{now.windScale}}级</view>
</view>
</view>
</view>
5. 调整wxss样式细节,让小程序界面更加美观
为了确保小程序的界面美观且易于阅读,我对样式进行了精细调整。以下是具体的样式设置:
/**index.wxss**/
page {
height: 100vh;
display: flex;
flex-direction: column;
background-color: whitesmoke;
}
text {
font-size: 60rpx;
color: #0A74DA;
}
.cityInfo {
font-size: 50rpx;
color: black;
}
.weather-info {
display: flex;
align-items: center; /* 垂直居中 */
}
.tempNumber {
font-size: 120rpx;
font-weight: bolder;
color: #0A74DA;
margin-right: 20rpx;
}
.weatherText {
font-size: 80rpx;
color: #0A74DA;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
image {
width: 330rpx;
}
.detail {
width: 100%;
background-color: #ffffff;
padding: 20rpx;
border-radius: 15rpx;
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}
.bar {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 20rpx 0;
}
.box1, .box2 {
width: 32%;
text-align: center;
}
.box1 {
color: #0A74DA;
font-weight: bold;
font-size: 40rpx;
}
.box2 {
color: #333;
font-size: 30rpx;
}
6. JS中接入API,实现对相应城市天气状况的更新
在JS中,我通过和风天气的API获取天气数据并更新页面。以下是实现的代码:
data: {
region:['安徽省','芜湖市','镜湖区'],
id: 101271801,
now: {
tmp: 0,
cond_txt:'未知',
cond_code:'999',
hum: 0,
pres: 0,
vis: 0,
wind_dir: 0,
wind_spd: 0,
wind_sc: 0
}
},
regionChange: function(e) {
this.setData({region: e.detail.value})
this.getId(this.data.region[1])
},
getId: function(city) {
city = city.slice(0, -1)
let that = this
wx.request({
url: 'https://geoapi.qweather.com/v2/city/lookup?',
data: {
location: city,
key: "89c39afe9e284d50aeb734802a56cbff"
},
success: function(res) {
that.setData({id: res.data.location[0].id})
that.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: "89c39afe9e284d50aeb734802a56cbff"
},
success: function(res) {
console.log(res.data)
that.setData({now: res.data.now})
}
})
},
使用wx.request
发起HTTP请求,从和风天气API获取城市ID和天气信息。
通过regionChange
方法更新选择的城市并调用getId
方法获取对应的城市ID。
在getWeather
方法中请求当前天气数据,并通过setData
更新页面显示的天气信息。
三、程序运行结果
四、问题总结与体会
问题:由于API版本变化,出现了连接问题。
课程文档中给出的URL已经过时,需要更新。
解决方法: 阅读和风天气官方api文档,采用最新的请求的URL解决问题。
开发文档 | 和风天气开发服务 (qweather.com)
四、问题总结与体会
问题:由于API版本变化,出现了连接问题。
课程文档中给出的URL已经过时,需要更新。
解决方法: 阅读和风天气官方api文档,采用最新的请求的URL解决问题。
开发文档 | 和风天气开发服务 (qweather.com)
总结体会: 本次实验中,我学会了如何在小程序中集成第三方API。在设计天气查询小程序的界面时,我学会了如何使用微信小程序的样式表进行布局和美化。遇到问题就去看官方文档是个好习惯。