一、实验目标
1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。
二、实验步骤
（一）准备工作
1.注册和风天气账号，获取key
进入和风天气官网和风天气开发服务 ~ 强大、丰富的天气数据服务，注册账号，打开控制台，来到开发管理页面：
点击创建项目，填写相关信息后就可以获得key：
2.图片素材下载
通过以下地址下载图片素材：https://gaopursuit.oss-cnbeijing.aliyuncs.com/2022/demo2_file.zip
下载完成后在项目中解压下载得到的压缩包，获得图片素材。
3.服务器域名配置
在微信小程序界面打开开发管理，将以下两个域名加入到其中：
其中链接一用来查询天气数据，链接二用来查询城市的ID号，作为链接一查询时的一个参数。
（二）项目设计——视图设计
1.导航栏设计
将app.json中的代码修改为以下代码：
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#3883FA",
"navigationBarTitleText": "今日天气"
}
}
将导航栏设置成为蓝底白字的样子：
2.页面设计
页面主要包括四个大部分：
-
picker组件，用于地区选择器
-
text组件，用于显示当前城市的温度和天气状况
-
image组件，用于显示当前城市的天气图标
-
view组件，用于分行显示湿度，气压等天气信息。
①整体设计
首先设置整体容器，在.wxml文件中编写以下代码：
<view class='container'> </view>
之后在app.wxss中设置样式，代码如下：
.container{
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
②地区选择器
地区选择器使用picker组件来实现，.wxml文件中的代码改为如下代码：
<view class='container'> <!--区域1：地区选择器-->> <picker mode="region"> <view>北京市</view> </picker> </view>
效果如图所示：
点击后会出现弹窗并可以选择地区：
③文本设计
在.wxml中加入以下代码：
<!--区域2：单行天气信息--> <text>19℃晴</text>
同时在.wxss文件中为文本设计对应的样式：
text{
font-size: 80rpx;
color: #3C5F81;
}
保持后可以得到以下效果：
④图标设计
在,wxml中添加代码：
<image src="/images/weather_icon/999.png" mode="widthFix"></image>
在.wxss文件中为图片设置对应样式：
image{
width: 220rpx;
}
当前效果如下：
⑤多行天气信息设计
这一部分需要使用view组件来展示多行天气信息。
.wxml中添加以下代码（只展示一行，其余三个部分类似）：
<view class='detail'> <view class='bar'> <view class='box'>湿度</view> <view class='box'>气压</view> <view class='box'>能见度</view> </view> </view>
在.wxss中为其设置样式：
.detail{
width: 100%;
display: flex;
flex-direction: column;
}
.bar{
display: flex;
flex-direction: row;
margin: 20rpx 0;
}
.box{
width: 33.3%;
text-align: center;
}
页面设计全部完成，此时的小程序效果如下：
（三）项目设计——代码逻辑
1.动态更新城市信息
修改picker组件中的北京市为{{region}}，将其设置为动态数据，同时为picker组件添加监听时间。
.wxml中代码修改如下:
<picker mode="region" bindchange="regionChange">
<view>{{region}}</view>
</picker>
同时在JS文件中定义对应函数：
data: {
region:['山东省','青岛市','黄岛区']
},
regionChange:function(e){
this.setData({region:e.detail.value});
},
现在就可以切换国内的任意城市了。
2.动态获取天气数据
由于使用https://devapi.qweather.com/v7/weather/now获取天气数据时需要用到城市的ID号这个数据，因此我们首先要查询对应城市的ID号，此函数共使用了两次和风天的API。
首先使用下面这段代码来查询对应城市的ID号，这个地方需要注意，需要添加adm来避免重名城市的问题，具体可以查看和风天气的官方API使用文档：城市搜索 for API | 和风天气开发服务
url: 'https://geoapi.qweather.com/v2/city/lookup',
data:{
location:that.data.region[2],
adm:that.data.region[1],
key:'开发者key'
},
利用查到的ID作为参数，再次调用和风天气的API来查询天气信息：
url: 'https://devapi.qweather.com/v7/weather/now',
data:{
location:res.data.location[0].id,
key:'开发者key'
},
之后将查到的信息通过setData函数来更新数据：
that.setData({now:res.data.now});
完整代码如下：
getWrather:function(){
var that=this;
wx.request({
url: 'https://geoapi.qweather.com/v2/city/lookup',
data:{
location:that.data.region[2],
adm:that.data.region[1],
key:'开发者key'
},
success:function(res){
console.log(res.data);
wx.request({
url: 'https://devapi.qweather.com/v7/weather/now',
data:{
location:res.data.location[0].id,
key:'开发者key'
},
success:function(res)
{
console.log(res.data);
that.setData({now:res.data.now});
}
})
}
})
},
同时在生命周期函数中调用一次onLoad函数和自定义函数regionChange中分别调用一次该函数：
regionChange:function(e){
this.setData({region:e.detail.value});
this.getWrather();
},
onLoad: function (options) {
this.getWrather();
},
达到在页面加载时和切换城市时主动获取一次数据的效果。
3.更新页面信息
首先我们可以在控制台中的appdata页面查询到对应数据的名称：
之后将所有需要更新的数据按照对应的名称修改即可，以下以湿度，气压和能见度给出示例代码：
<view class='bar'>
<view class='box'>{{now.humidity}}</view>
<view class='box'>{{now.pressure}}</view>
<view class='box'>{{now.vis}}</view>
</view>
至此便完成了整个程序的编写。
三、程序运行结果
进入页面：
修改城市地点：
更新数据：
四、问题总结与体会
问题总结
在实验过程中一共遇到了两个问题，首先是关于API的使用问题。
课程说明文档给出的API是旧版的API，在新版的API中是无法直接使用城市名称来查询对应的天气信息的，会返回code:“400”，因此我再次加入了一个API，首先利用城市名查询对应的ID，再利用返回的这个ID来查询对应城市的天气信息。
下图可以看到，首先输出的是城市的ID号，后面是利用该ID号查询到的天气信息。
第二个问题是关于重名城市的问题，这一点是我最开始没有考虑到的，但后来发现到了这个问题，在和风天气的官方文档中给出了解决方案：城市搜索 for API | 和风天气开发服务，也就是在查询时加入adm，为该城市的上级行政区划，这样就可以解决重名问题。
url: 'https://geoapi.qweather.com/v2/city/lookup',
data:{
location:that.data.region[2],
adm:that.data.region[1],
key:'开发者key'
},
实验体会
相较于第一次实验，这一次实现难度虽然提高了，但是过程要顺利地多，由于课程给出的实验文档是利用的旧版API，在调用官方API时是会出错的，在这个地方我也是一点一点摸索出了一个问题的解决方案，通过加入第二个API的使用，成功解决了这个问题，最后的实现效果也比较好，这次实验给了我一些成就感，也希望能在接下来的实验中继续探索和实践。
636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
