小白入门第二个微信小程序:天气查询
一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
列出实验的关键步骤、代码解析、截图。
1.注册和风天气账户,申请API
2.前往微信小程序平台后台配置服务器 ,包括两个域名:https://geoapi.qweather.com/v2/city/lookup;https://devapi.qweather.com/v7/weather/now
3.创建项目,删除模板自带的多余的文件
4.下载图片,链接:https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip
在项目中添加文件夹images和子文件夹waeather_icon,存放一组天气图标即可
5.导航栏设计,在app.json中
"pages": [
"pages/index/index"
],
"window": {
"navigationBarTitleText": "今日天气",
"navigationBarBackgroundColor": "#3883FA"
},
6.页面设计,在index.wxss中设计布局参数:
container{
height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-around;
}
在index.wxml中设计布局,先设计地区选择:
<view class='container'>
<!--区域1:地区选择器-->
<picker mode='region'>
<view>北京市</view>
</picker>
<text>19度 晴</text>
</view>
在wxss中再一次添加:
text{
font-size:80rpx;
color:#3C5F81;
}
继续迭代设计布局,在wxml中设计天气和天气图标:
<view class='container'>
<!--区域1:地区选择器-->
<picker mode='region'>
<view>北京市</view>
</picker>
<!--区域2:单行天气-->
<text>19度 晴</text>
<!--区域3:天气图标-->
<image src='/images/weather_icon/999.png'mode='widthFix'></image>
</view>
在wxss中:
image{
width:220rpx;
}
编译运行:
最后在下方添加多行天气信息:
<view class='container'>
<!--区域1:地区选择器-->
<picker mode='region'>
<view>北京市</view>
</picker>
<!--区域2:单行天气-->
<text>19度 晴</text>
<!--区域3:天气图标-->
<image src='/images/weather_icon/999.png'mode='widthFix'></image>
<!--区域4:多行天气-->
<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'>0 %</view>
<view class='box'>0 hpa</view>
<view class='box'>0 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'>0</view>
<view class='box'>0 km/h</view>
<view class='box'>0 级</view>
</view>
</view>
</view>
在wxss中:
container{
height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-around;
}
text{
font-size:80rpx;
color:#3C5F81;
}
image{
width:220rpx;
}
.detail{
width:100%;
display:flex;
flex-direction:column;
}
.bar{
display:flex;
flex-direction:row;
margin:20rpx 0;
}
.box{
width:33.3%;
text-align:center;
}
最终效果:
OK,实现完基本布局,现在来实现逻辑
7.更新省市区信息:
在wxml中:
<view class='container'>
<!--区域1:地区选择器-->
<picker mode='region'bindchange='regionChange'>
<view>{{region}}</view>
</picker>
在js中:
Page({
/**
* 页面的初始数据
*/
data: {
region:['安徽省','芜湖市','镜湖区']
},
regionChange:function(e){
this.setDate({region:e.detail.value});
},
效果实现:
8.获取实况天气:
原理:客户端选择地理位置后,首先通过https://geoapi.qweather.com/v2/city/lookup向服务端拉取地理位置的城市编号,在通过城市编号向服务端拉取天气信息。
在js中:
Page({
getWeather: function() {
var that = this;
// 第一步:通过地理位置搜索 API 获取城市编号
wx.request({
url: 'https://geoapi.qweather.com/v2/city/lookup',
data: {
location: that.data.region[2], // 使用城市名称(例如:芜湖市)
key: '8ed2b89756654fafb7f53598b88936df'
},
success: function(res) {
if (res.data && res.data.code === "200") {
var cityId = res.data.location[0].id; // 获取第一个匹配的城市编号
// 第二步:使用获取的城市编号获取天气信息
wx.request({
url: 'https://devapi.qweather.com/v7/weather/now',
data: {
location: cityId, // 使用城市编号
key: '8ed2b89756654fafb7f53598b88936df'
},
success: function(res) {
console.log(res.data);
that.setData({ now: res.data.now });
},
fail: function(error) {
console.error("获取天气信息失败:", error);
}
});
} else {
console.error("城市编号获取失败:", res.data.code);
}
},
fail: function(error) {
console.error("地理位置搜索失败:", error);
}
});
},
/**
* 页面的初始数据
*/
data: {
region: ['安徽省', '芜湖市', '镜湖区'],
now: {
temp: 0,
text: '未知',
icon: '999',
humidity: 0,
pressure: 0,
vis: 0,
windDir: 0,
windSpeed: 0,
windScale: 0
}
},
regionChange: function(e) {
this.setData({ region: e.detail.value });
this.getWeather();
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.getWeather();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
9.将数据改为动态数据,以便更新天气信息:
<view class='container'>
<!--区域1:地区选择器-->
<picker mode='region'bindchange='regionChange'>
<view>{{region}}</view>
</picker>
<!--区域2:单行天气-->
<text>{{now.temp}}°C{{now.text}}</text>
<!--区域3:天气图标-->
<image src='/images/weather_icon/{{now.icon}}.png'mode='widthFix'></image>
<!--区域4:多行天气-->
<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.windSpeed}} km/h</view>
<view class='box'>{{now.windScale}} 级</view>
</view>
</view>
</view>
ok全部完成
三、程序运行结果
四、问题总结与体会
在本次实验中,出现了多个问题亟待解决:
1.无法通过城市名称来拉取天气信息,因为参数必须是城市编号,故此需要添加一个间接层来解决这个问题,即先通过城市名称来获取城市编号。
2.编译器下方一直提示网络层渲染错误,反复修改后发现是data的默认变量的变量名与now中传来的数据并不匹配,修改后便消失了。