OUC软件开发实验2

实验2：天气查询小程序

本实验来自于周文洁老师的《微信小程序开发实战》第五章。主要介绍使用小程序网络API的相关应用制作一款天气查询小程序。学习目标为：1、掌握服务器域名配置和临时服务器部署；2、掌握 wx.request 接口的用法。

注意事项：
1、本实验中，需要使用和风天气API，需要注册用户，大家请自行阅读和风天气官方文档：https://dev.qweather.com/docs/api/weather/weather-now/
2、实验中需要的天气图片、utils.js下载地址为：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip
3、因为要向和风天气发送请求，如果保持登录状态将无法发送请求，切换为游客模式即可。

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

5.1准备工作

先访问和风天气官方主页，申请密钥

5.2 项目创建

这部分和实验1一样

5.3 页面配置

5.3.1 创建页面文件

5.3.2 删除和修改文件

这两步操作方法和实验1一样

5.3.3 创建其他文件

本项目还需要一个文件夹用于存放天气图标素材images文件夹，将图片素材导入后

5.4 视图设计

5.4.1 导航栏设计

修改app.json文件

5.4.2 页面设计

首先定义页面容器()，WXML

接着逐一对四块区域进行定义修改

在wxml中的修改：

<view class="container">
    <!--区域1：地区选择器-->
    <picker mode="region">
    <view>北京市</view>
    </picker>
    <!--区域2：单行天气信息-->
    <text>19℃晴</text>
    <!--区域3：天气图标-->
    <image src="/images/weather_icon_s1_bw/999.png"mode='widthFix'></image>
    <!--多行天气信息-->
    <view class="detail">
    <view class="bar">
    <view class="box">温度</view>
    <view class="box">气压</view>
    <view class="box">能见度</view>
    </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>

在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;

}



.datail{

  width: 100%;

  display: flex;

  flex-direction: column;

}



.bar{

  display: flex;

  flex-direction: row;

  margin: 20rpx 0;

}



.box{

  width: 33.3%;

  text-align: center;

}

得到的结果

5.5 逻辑实现

5.5.1 更新省、市、区信息

修改原先组件中的“北京市”为{{region}}，为其追加自定义bindchange事件，在js中设置初始化城市信息

5.5.2 获取实况天气数据

在js文件中使用自定义函数getweather进行实况天气的获取

默认状态下：

三、程序运行结果

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

问题：

1.首先是布局上，出现了错位

后面检查发现是格式定义出问题

2.访问接口有问题

查询之后，发现在城市查询中，没有写上getWeather

3.APPdata并没有像设想一样获取到数据

后面重新改回console.log(res.data)，发现还是读取到了相关数据

源码分享