微信天气查询小程序

最新推荐文章于 2024-09-26 09:04:46 发布

lysall

最新推荐文章于 2024-09-26 09:04:46 发布

阅读量754

点赞数 10

文章标签：微信小程序 apache

本文链接：https://blog.csdn.net/lysall/article/details/141367384

版权

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

姓名：刘演森学号：22020007064

姓名和学号	刘演森，22020007064
本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称	实验2：天气查询小程序
博客地址	https://blog.csdn.net/lysall?type=blog
Github仓库地址？	XXXXXXX

一、实验目标

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

二、实验步骤

注册和风天气账号获取key

小程序服务器域名的配置，我们需要使用到api接口有：https://geoapi.qweather.com/v2/city/lookup，获取城市id，https://geoapi.qweather.com/v2/city/lookup，获取城区天气。

完成页面布局

首先重复我们上次实验一的步骤试实现无模板创建小程序，其次下载我们本次实验需要用到的天气logo放到我们创建的项目内以备后续的使用。

从上到下完成页面布局，从最开始的顶部我们渲染成蓝底白字,app.json代码如下。

"window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "今日天气",
    "navigationBarBackgroundColor": "#3883fa"
  },

到我们的主页app显示一共分为四个区域，第一部分是我们城区名字，下面是我们的温度及其天气，在下面是当天天气的图标，最底部是其他天气的参数。下面是预计渲染结果。

城区名字我们使用到组件，用户可以选择城市地区。

<!--区域1 -->
<picker mode="region" bindchange="regionChange">
    <view>{{region}}</view>
  </picker>

区域2我们显示温度及其天气

<!--区域2 -->
<text>{{now.temp}}℃ {{now.text}}</text>

区域3则是我们的天气图标

<!--区域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}}</view>
     <view class="box">{{now.vis}}</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}}</view>
     <view class="box">{{now.windScale}}</view>
    </view>
  </view>

最后是逻辑实现

我们先要设置我们的初始参数

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

调用我们api接口获取我们天气数据

getWeather:function(){
      var that = this;
      wx.request({
        url:'https://devapi.qweather.com/v7/weather/now',
        data:{
          location:that.data.IDlocation,
          key:'201a0a4182e64b3badbe6092d6ffa709'
        },
        success:function(res){
          var re = res.data
          that.setData({now:re.now});
          console.log(re.now)
        }
      })
    },

以上就是我们本次实验的主要内容，其他的渲染参数我们这里就不做过多的赘述。