天气查询小程序-EW帮帮网

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
        });
      }
    })

4.更新页面天气信息

将wxml页面上所有临时数据都替换成{{now.属性}}的形式，实况天气数据即可实时显示。

三、程序运行结果

程序最终运行成功，成功实现切换城市得到各地实况天气

四、问题总结与体会

问题及解决方式

起初在调用request接口时失败，无法获得返回数据，后把url输入浏览器中测试数据返回结果时发现传的参数location不能直接用地区名，而要用该地区的城市ID作为参数，于是引入util.js文件获取对应的城市ID，后调用接口成功。

收获和体会

学习了如何配置服务器域名和如何调用request接口，对于页面的渲染和组件的使用变得更加熟练。

本文含有隐藏内容，请开通VIP 后查看

天气查询小程序