天气查询小程序

jia_929

于 2022-09-11 14:16:06 发布

阅读量344

点赞数

文章标签：小程序 javascript

本文链接：https://blog.csdn.net/m0_51750799/article/details/126804802

版权

GitHub仓库地址：GitHub - Lsy0929/weatherdemo: 移动软件开发实验2

一、实验目标

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

二、实验步骤

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

1.准备工作

1.API密钥申请：注册并登录和风天气官方网址，查看控制台找到key密钥。

2.服务器域名配置：进入微信公众平台，在开发设置中添加服务器域名地址

2.项目创建

创建空白文件夹，新建项目weatherDemo

3.页面配置

1.删除多余的文件和代码

2.创建其他文件，在硬盘的项目文件中新建文件夹images及二级目录weather_icon，将事先下载好的75个天气图标存入其中

4.视图设计

1.导航栏设计：在app.json的window属性中将导航栏标题文本改为“今日天气”，背景色改为蓝色。

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#3883FA",
    "navigationBarTitleText": "今日天气",
    "navigationBarTextStyle":"black"
  }

2.页面设计

将页面分为4个区域，写出对应的wxml和wxss代码：

地区选择器
显示当前城市的温度和天气状态的文字说明
显示当前城市的天气图标
分多行显示更多信息

5.逻辑实现

1.更新省、市、区信息，为<picker>组件追加自定义bingChange事件，在js中加入region数据和regionChange函数，使可以切换到国内任意省、市、区。

data: {
    region:['湖南省','湘潭市','湘乡市']
},
regionChange:function(e){
    this.setData({region:e.detail.value});
  }

2.  获取选择地区的城市ID，引入util.js文件，实现由地区名获取locationID

var getid = require('../../util.js');
that.setData({
      locationid:getid.getLocationID(that.data.region[1])
    });

3.获取实况天气数据，编写getWeather函数在其中使用wx.request接口获取所选区域的天气信息，在onLoad和regionChange函数中分别进行调用，将返回得到的信息存入js的data数据中

wx.request({
      url: '<https://devapi.qweather.com/v7/weather/now>',
      data:{
        location:that.data.locationid,
        key:'4086eb0abd5d49379b95791f34a5b5c4'
      },
      success:function(res){
        console.log(res.data);
        that.setData({
          now:res.data.now
        });
      }
    })