天气查询微信小程序

企业开发 2023-04-06 23:21:45 阅读次数: 0

2022年夏季《移动软件开发》实验报告

一、实验目标

1、掌握服务器域名配置和临时服务器部署；2、掌握 wx.request 接口的用法。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1、创建项目

在填好了项目名称、目录、AppID等信息后，点击确定创建项目

此时项目创建完成后的初始界面如下：
在这里插入图片描述

2、创建页面文件和删除、修改文件

项目创建完毕后，将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号。然后再删除utils文件夹及其内部所有内容，删除pages文件夹下的logs目录及其内部所有内容，删除index.wxml和index.wxss中的全部代码，删除index.js中的全部代码，并且输入关键词page找到第二个选项按回车键让其自动补全函数。再删除app.wxss中的全部代码，删除app.js中的全部代码，并且输入关键词app找到第一个选项按回车键让其自动补全函数。

这些工作都做好了之后如下图所示：
在这里插入图片描述

3、创建存放天气图标的文件夹

接下来创建用于存放天气图标素材文件夹，命名为images，然后再images文件夹新建二级目录weather_icon文件夹，然后将图标文件全部复制、粘贴进去。完成后的目录结构如下图所示：
在这里插入图片描述

4、导航栏设计
修改app.json文件，将页面的导航栏标题文本改为“今日天气”、将背景颜色改为蓝色(#3883FA)。

该代码片段如下：

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#3883FA",
    "navigationBarTitleText": "今日天气",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

其中，“navigationBarTitleText”: “今日天气”,是将页面的导航栏标题文本改为“今日天气”，“navigationBarBackgroundColor”: “#3883FA”,是将背景颜色改为蓝色(#3883FA)

更改好了之后预览效果如下图所示：

在这里插入图片描述

5、页面设计

首先需要对整体容器进行设计，这就需要定义页面容器()，然后在index.wxml文件中加入以下代码片段：

<view class='container'>
</view>

然后在app.wxss中设置容器样式，代码片段如下：

.container{
  height: 100vh;                  /*高度为100视窗，写成100%无效*/
  display: flex;                  /*flex布局模型*/
  flex-direction: column;         /*垂直布局*/
  align-items: center;            /*水平方向居中*/
  justify-content: space-around;  /*调整间距*/
}

其中，height: 100vh;是设置高度为100视窗，display: flex; 是设置flex布局模型flex-direction: column; 是垂直布局，align-items: center;是设置水平方向居中，justify-content: space-around;是调整间距

然后我们再设计地区选择器
设计地区选择器需要使用组件，用户点击组件可切换选择其他城市。
在index.wxml中加入以下代码片段

<view class='container'>
  <!--区域1：地区选择器-->
  <picker mode='region'>
    <view>北京市</view>
  </picker>
</view>

该地区选择器的默认城市是北京市

然后我们对界面进行文本的设计，这就需要使用 组件实现一个单行天气信息，包括当前城市的温度和天气状况。
在index.wxml文件中加入以下代码片段： 

<!--区域2：单行天气信息-->
  <text>19℃ 晴</text>

默认显示的单行天气信息是“19℃ 晴”

然后在index.wxss加入以下代码片段：

text{
  font-size: 80rpx;     /*改变文本的字体大小*/
  color: #3C5F81;     /*改变字体的颜色*/
}

其中，font-size: 80rpx; 是改变文本的字体大小，color: #3C5F81;是改变字体的颜色

此时，小程序的预览效果如下图所示：
在这里插入图片描述

做好了这些，就需要设计天气图标
设计天气图标需要使用组件
在index.wxml加入以下代码片段：

  <!--区域3：天气图标-->
  <image src='/images/weather_icon/999.png' mode='widthFix'></image>

默认是N/A的天气图标，表示未查询到天气状态。

然后在index.wxss文件中加入以下代码片段：

image{
  width: 220rpx;
}

调整天气图标的大小，使之更为美观

此时小程序的预览效果如下图所示：
在这里插入图片描述

然后设计多行天气信息显示
这就需要使用组件展示多行天气信息。
在index.wxml文件加入以下代码片段：

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

此时还没有在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;
}

此时在界面中对各个模块进行了大小、边距、位置等的调整

此时微信小程序的预览效果如下图所示：
在这里插入图片描述

6、逻辑实现

因为我们不仅仅是对一个城市进行查询天气，所以我们需要按照需要来更新省、市、区信息
首先我们需要将组件中的“北京市”修改为{ {region}},然后为组件追加自定义bindchange事件，用于监听选项变化。
在index.wxml修改以下代码片段：

  <picker mode="region" bindchange='regionChange'>
    <view>{
   
   {region}}</view>
  </picker>

由于地区选择器的返回结果是数组的形式，所以在JS文件的data中定义region为包含了省、市、区3个项目的数组，所以我们将初始初始修改为安徽省芜湖市镜湖区
在index.js修改以下代码片段：

data: {
    region:['安徽省','芜湖市','镜湖区']
  },

  regionChange: function(e) {
    this.setData({region: e.detail.value});
  },

此时微信小程序的预览效果如下图所示：

在这里插入图片描述

这时候我们开始设计获取实况天气数据
在JS文件中使用自定义函数getWeather进行实况天气数据的获取。由于非直辖市无法查询到具体的区，所以后续的天气查询以城市作为查询依据。

按照原文档的方法，无法获取到城市信息， 因为和风天气的获取方法改变了， 所以需要先用URL获取到城市ID，再用城市ID获取城市信息

在index.js中修改以下代码片段：

  getWeather:function(){
    var that = this;
    wx.request({
      url:'https://geoapi.qweather.com/v2/city/lookup?',
      data:{
        location:that.data.region[2],
        key:'这里写你的key'
      },
      success:function(res){
        console.log(res.data)
        that.setData({
          Place_ID : res.data.location[0].id
        })
        wx.request({
          url: 'https://devapi.qweather.com/v7/weather/now?',
          data:{
            location:that.data.Place_ID,
            key:'这里写你的key'
          },
          success:function(res){
            console.log(res.data.now)
            that.setData({
              now : res.data.now
            })
          }
        })
      }
    })
  },

下面是控制台的显示效果：

在这里插入图片描述

最后，我们只需要更新页面天气信息即可

将WXML页面上所有的临时数据都替换成{now.属性}的形式
在index.wxml修改以下代码片段：

<view class="container">
  <!--区域1：地区选择器-->
  <picker mode="region" bindchange='regionChange'>
    <view>{
   
   {region}}</view>
  </picker>

<text>{
   
   {now.temp}}℃ {
   
   {now.text}}</text>

<image src='/images/weather_icon/{
   
   {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.windSpeed}} km/h</view>
    <view class="box">{
   
   {now.windScale}} 级</view>
  </view>
</view>

</view>

在index.js文件中修改以下代码片段：

data: {
    region:['安徽省','芜湖市','镜湖区'],
    now:{
      temp:0,
      text:'未知',
      icon:0,
      humidity:0,
      pressure:0,
      vis:0,
      windDir:0,
      windSpeed:0,
      windScale:0
    }
  },

最后就可以了

下面是微信小程序的最终显示效果：

在这里插入图片描述

三、程序运行结果

列出程序的最终运行结果及截图。
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

四、问题总结与体会

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

1、实验过程中遇到的问题及解决方法

问题1：在更新城市天气信息那一部分，控制台无法显示有关信息，只有错误代码400

解决方法：按照老师给的文档方法来做，无法获取到城市信息， 因为和风天气的获取方法改变了， 需要先用URL获取到城市ID，再用城市ID获取城市信息，最后得到解决。

问题2：像温度、湿度等有关天气信息的英文代码也已经发生了改变，一开始没有注意，按照原文档给的来写，报错

解决方法：仔细看了控制台关于天气信息的输出信息才发现有关天气信息的英文代码发生了改变，就按照控制台的英文代码来修改之后就完成了

2、收获和体会

①一开始我按照实验文档和学习视频一步步来做，结果因为和风天气很多东西发生了改变，所以实验没有成功，后来自己一个人摸索才得以解决，这启发着我时代的变化是无处不在的，特别是在计算机领域，我们能做的就是不断提高自己解决问题的能力，同时对于现有的知识不能盲从，应该有自己的思考，敢于怀疑。

②通过这次的实验，我掌握了服务器域名配置和临时服务器部署，掌握了 wx.request 接口的用法，对微信小程序有了更深一步的了解。

③这次实验在查找bug上花费了很多时间，但是还是得以解决，这启发着我，计算机学习的道路上困难重重，但是只要我们有毅力坚持下去就会有好的回报。

3、对课程安排的建议：

已经发生了改变，一开始没有注意，按照原文档给的来写，报错

解决方法：仔细看了控制台关于天气信息的输出信息才发现有关天气信息的英文代码发生了改变，就按照控制台的英文代码来修改之后就完成了

2、收获和体会

①一开始我按照实验文档和学习视频一步步来做，结果因为和风天气很多东西发生了改变，所以实验没有成功，后来自己一个人摸索才得以解决，这启发着我时代的变化是无处不在的，特别是在计算机领域，我们能做的就是不断提高自己解决问题的能力，同时对于现有的知识不能盲从，应该有自己的思考，敢于怀疑。

②通过这次的实验，我掌握了服务器域名配置和临时服务器部署，掌握了 wx.request 接口的用法，对微信小程序有了更深一步的了解。

③这次实验在查找bug上花费了很多时间，但是还是得以解决，这启发着我，计算机学习的道路上困难重重，但是只要我们有毅力坚持下去就会有好的回报。

3、对课程安排的建议：

​ 如果老师能按照和风天气的变化对实验文档做一些调整就更好了。

猜你喜欢

转载自blog.csdn.net/weixin_51734087/article/details/126408721
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022