一、申请和风天气的API密钥

登录和风天气

创建成功后可得到自己的key

二、域名的配置

每一个小程序在与指定域名地址进行网络通信前都必须将该域名地址添加到管理员后台白名单中

需对域名地址https://devapi.qweather.com进行服务器配置

登录微信公众平台，在开发管理--开发设置中修改request合法域名

配置完成后可以在微信开发者工具中查看是否成功添加

三、创建项目

实验中需要的天气图片、utils.js下载地址为：

https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip

在项目中新建一个images文件夹用于存放天气图标

将该压缩包中的images中的三个任选一个解压到项目文件images内

utils解压到项目文件目录中

其他同实验1手动创建小程序

1. 页面设计

app.json

页面上主要包括四个区域

区域1：地区选择器,用户可以自行选择查询的省、市、区;
区域2：显示当前城市的温度和天气状态的文字说明;
区域3：显示当前城市的天气图标;
区域4：分多行显示其他天气信息, 例如湿度、气压、能见度和风向等。

注意：面板之间需要有一定的间隔距离

页面整体<view>组件

区域1：<picker>组件
区域2：<text>
区域3：<image>
区域4：<view>，并定义class='detail'
区域4内单元行：4个<view>组件，并定义class='bar'
区域4内单元格：每行3个<view>组件，并定义class='box'

1. 整体容器设计

index.wxss

2. 区域1（地区选择器）设置

需要使用<picker>组件来实现地区选择器，用户可点击自行选择其他城市

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

3. 区域2（文本）设计

区域2实现一个单行天气信息，包括当前城市的温度和天气状况

index.wxml

  <!--区域2：单行天气信息--><text>29°C晴</text>

index.wxss

text{font-size: 80rpx;color: #3C5F81;
}

4. 区域3（天气图标）设计

图标样式 wxss

image{width: 220rpx;
}

WXML

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

5. 区域4（多行天气信息）设计

使用<view>组件展示多行信息

wxml

 <!--区域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">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

/*区域4单元行样式*/
.bar{display: flex;flex-direction: row;margin: 20rpx;
}
/*区域4单元格样式*/
.box{width: 33.3%;text-align: center;
}

5. 逻辑实现

1. 更新省、市、区信息

首先修改<picker>组件中的"北京市"为{{region}},然后为<picker>组件追加自定义bindchange事件，用于监听选项变化

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

注意：地区选择器返回结果为数组形式

在JS文件中data定义region为包含了省，市，区3个项目的数组

  data: {region:['安徽省','芜湖市','镜湖区']}，regionChange:function(e){this.setData({region:e.detail.value});},

2.获取实况天气数据

先根据城市或地区的中文名称获取位置ID

在JS文件中使用自定义函数getWeather获取天气信息

utils.js文件用来获取位置ID,文件内的自定义函数getLocationID(location_name)用于获取城市ID,需要将utils文件引入到page之前

var util = require('../../utils/util.js')
Page({
.
.
.

index.js

/*** 更新省、市、区信息*/regionChange:function(e){this.setData({region:e.detail.value});this.getWeather();},
/*** 获取实况天气数据*/getWeather: function(){var that = this;var location_name=util.getLocationID(that.data.region[1])wx.request({url:'https://devapi.qweather.com/v7/weather/now',data:{location:location_name,key:'8cb048f2235e4705bce70ed5ea5d5e06'},success:function(res){console.log(res.data)}})},
*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getWeather();},

3. 更新页面天气信息

将WXML页面上所有的临时数据都替换成{{now.属性}}的形式

<view class="container"><!--区域1：地区选择器--><picker mode="region" bindchange = 'regionChange'><view>{{region}}</view></picker><!--区域2：单行天气信息--><text>{{now.temp}}°C{{now.text}}</text><!--区域3：天气图标--><image src="/images/weather_icon_s1_color/{{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}} 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>

注意，在网速受限时可能无法立即获取到实时数据，需要在JS文件中的data部分为now规定初始数据，这样当无法获取实时数据时，页面会显示data中的数据

 /*** 页面的初始数据*/data: {region:['安徽省','芜湖市','镜湖区'],now:{tmp:0,cond_txt:'未知',cond_code:'999',hum:0,pres:0,vis:0,wind_dir:0,wind_spd:0,wind_sc:0}},

运行结果：

微信小程序实践——实验2天气查询小程序相关推荐

通过微信公众号给npy发送天气的小程序
通过微信公众号给npy发送天气的小程序操作步骤: 模仿抖音上的给女朋友发送天气的小程序 1.免费虚拟主机(自带域名) https://profreehost.com/ 3.微信公众号测试号平台(个人 ...
微信小程序之天气查询小案例
本次小项目是关于微信小程序-动态查询天气(墨迹天气Api) 此次案例分为以下几个准备方面: 一.准备方面: (1)如何发起请求?查看文档:RequestTask | 微信开放文档 (2)如何获取定位信 ...
【Pyqt实战】全国天气查询小程序（含UI界面，python代码）
文章目录第一步:UI界面设计第二步:获取天气参数第三步:编写主程序代码今天用Pyqt做了个全国天气查询的小程序,可以查询全国各地区当前的天气情况,主要包括温度.风力.风向以及湿度这几个天气参数 ...
【5】天猫精灵开放平台实验—基于天气查询模板创建开发屏显页面技能
文章目录天猫精灵开放平台实验-基于模板创建开发屏显页面技能一.前提准备二.登录天猫精灵开放平台 (一)创建新技能 1.创建语音技能 2.填写基本信息 (二)创建后端服务 1.创建后端服务 2.关 ...
树莓派练手小项目---基于树莓派构建天气查询系统，实现内容的网页自动化检索功能
目录一.写在前面二.基于树莓派构建天气查询系统三.基于树莓派实现网页内容的自动化检索四.有关于树莓派的其他小提醒,小技巧 Author:qyan.li Date:2022.6.19 Topic ...
ouc2022移动软件开发实验二：天气查询小程序
一.实验目标 1.掌握服务器域名配置和临时服务器部署:2.掌握 wx.request 接口的用法. 二.实验步骤 1."和风天气"密钥申请 "和风天气"有着可以 ...
实验2：天气查询小程序
一.实验目标 1.掌握服务器域名配置和临时服务器部署:2.掌握 wx.request 接口的用法. 二.实验步骤申请api密钥并申请为开发者在应用管理中创建应用,选择web api并申请key值 ...
python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
python天气查询小程序加背景图_Python查询天气小程序
输入城市名,打印查询结果 #!/usr/bin/env python #encoding:utf-8 #By eathings import urllib import urllib2 import ...
初学小程序之制作电影介绍查询小程序遇到的问题和解决办法
tabar标签和标题的设置,去下载小图标,进行添加.代码如下: "tabBar": {"color": "black","sele ...

微信小程序实践——实验2天气查询小程序