微信小程序实现天气类功能

最新推荐文章于 2024-08-20 14:36:57 发布

Jxufe渣渣斯

最新推荐文章于 2024-08-20 14:36:57 发布

阅读量2.1k

点赞数 3

本文链接：https://blog.csdn.net/jxufecarol/article/details/117747750

版权

参考链接：
（1）全国城市天气预报_城市天气预报查询_国内天气预报查询_天气网
https://www.tianqi.com/chinacity.html
（2）获取实时天气数据-获取数据-开发指南-微信小程序SDK | 高德地图API
https://lbs.amap.com/api/wx/guide/get-data/weather
（3）免费、稳定的天气预报API
https://blog.csdn.net/weixin_40734511/article/details/82896985
（4）微信小程序实现天气预报功能(附源码)
https://www.jb51.net/article/201861.htm
（5）微信小程序实战之天气预报
https://blog.csdn.net/u014360817/article/details/52803527
（6）微信小程序项目实战之天气预报
https://www.cnblogs.com/demodashi/p/8481610.html
（7）微信小程序案例之天气预报
https://www.cnblogs.com/zh01/p/12119137.html

一、天气API

天气网 https://www.tianqi.com/chinacity.html
微信小程序SDK 高德地图API 实时天气数据 https://lbs.amap.com/api/wx/guide/get-data/weather
国家气象局实时天气

国家气象局一周天气预报接口
http://mobile.weather.com.cn/data/forecast/101010100.html?_=1381891660081

//国家气象局
//格式说明 
var format={
   "fa":图片1,"fb"：图片2,"fc":温度1,fd：温度2,fe:风向1,ff：风向2,fg:风力1,fh：风力2,fi:日出日落}; 
//定义天气类型
var weatherArr={
   
    "10": "暴雨", 
    "11": "大暴雨", 
    "12": "特大暴雨", 
    "13": "阵雪", 
    "14": "小雪", 
    "15": "中雪", 
    "16": "大雪", 
    "17": "暴雪", 
    "18": "雾", 
    "19": "冻雨", 
    "20": "沙尘暴", 
    "21": "小到中雨", 
    "22": "中到大雨", 
    "23": "大到暴雨", 
    "24": "暴雨到大暴雨", 
    "25": "大暴雨到特大暴雨", 
    "26": "小到中雪", 
    "27": "中到大雪", 
    "28": "大到暴雪", 
    "29": "浮尘", 
    "30": "扬沙", 
    "31": "强沙尘暴", 
    "53": "霾", 
    "99": "", 
    "00": "晴", 
    "01": "多云", 
    "02": "阴", 
    "03": "阵雨", 
    "04": "雷阵雨", 
    "05": "雷阵雨伴有冰雹", 
    "06": "雨夹雪", 
    "07": "小雨", 
    "08": "中雨", 
    "09": "大雨"
}; 
//定义风向数组 
var fxArr={
   
    "0": "无持续风向", 
    "1": "东北风", 
    "2": "东风", 
    "3": "东南风", 
    "4": "南风", 
    "5": "西南风", 
    "6": "西风", 
    "7": "西北风", 
    "8": "北风", 
    "9": "旋转风"
};
//定义风力数组 
var flArr={
   
    "0": "微风", 
    "1": "3-4级", 
    "2": "4-5级", 
    "3": "5-6级", 
    "4": "6-7级", 
    "5": "7-8级", 
    "6": "8-9级", 
    "7": "9-10级", 
    "8": "10-11级", 
    "9": "11-12级"
};

中国天气 SmartWeatherAPI http://smart.weather.com.cn/wzfw/smart/weatherapi.shtml
和风天气 https://free-api.heweather.com/v5/forecast?city=yourcity&key=yourkey
心知天气（免费版只提供地级市数据） https://www.seniverse.com/doc

二、天气预报例子1

使用和风天气API

wxml文件

<view class="header">
 <view class="top">
 <view class="city">
  {
   {
   city}}
 </view>
 <view class="search">
  <input placeholder="输入城市名" bindinput="bindKeyInput" placeholder-style="color:white"></input>
  <view class="bt_search" bindtap="search">
  <icon type="search" size="18" color="white"></icon>
  </view>
 </view>
 </view>

 <view class="center">
 <view class="tmp">
  {
   {
   tmp}}°
 </view>
 <image mode="widthFix" class="cond-image" src="https://moyv.top/wechat/images/weather/{
   {imgsrc}}.png">
 </image>
 </view>
 <view class="bottom">
 <view>{
   {
   wind_dir}} {
   {
   wind_sc}}级</view>
 <view>湿度 {
   {
   hum}}%</view>
 <view>气压 {
   {
   pres}}Pa</view>
 </view>
</view>
<view class="container">
 <view class="hourly_title">24小时预报</view>
 <scroll-view scroll-x="true" class="hourly">
 <view class="h_item" wx:for="{
   {hourly}}" wx:key="index">
  <text class="h_time">{
   {
   item.time}}</text>
  <view class="h_img">
  <image mode="widthFix" src="https://moyv.top/wechat/images/weather/{
   {item.imgsrc}}.png"></image>
  </view>
  <text class="h_tmp">{
   {
   item.tmp}}°</text>
  <text class="h_wind_dir">{
   {
   item.wind_dir}}</text>
  <text class="h_wind_sc">{
   {
   item.wind_sc}}级</text>
 </view>

 </scroll-view>
 <view class="hourly_title">7天预报</view>
 <scroll-view scroll-x="true" class="daily">
 <view class="d_item" wx:for="{
   {daily_forecast}}" wx:key="index">
  <text class="d_txt">{
   {
   item.d_txt}}</text>
  <text class="d_date">{
   {
   item.d_date}}</text>
  <view class="h_img">
  <image mode="widthFix" src="https://moyv.top/wechat/images/weather/{
   {item.imgsrc_d}}.png"></image>
  </view>
  <text class="h_tmp">{
   {
   item.tmp_min}}°~{
   {
   item.tmp_max}}°</text>
  <view class="h_img">
  <image mode="widthFix" src="https://moyv.top/wechat/images/weather/{
   {item.imgsrc_n}}.png"></image>
  </view>
  <text class="d_wind_dir">{
   {
   item.wind_dir}}</text>
  <text class="d_wind_sc">{
   {
   item.wind_sc}}级</text>
 </view>

 </scroll-view>
</view>

<view class="footer">
-天气数据来自和风天气api-
</view>

wxss文件

page {
   
 background-color: #f6f6f6;
}

.header {
   
 background-color:#64c8fa; 
 /* background-image: linear-gradient(to right, #64a0f8, #64c8fa); */
 height: 450rpx;
 padding-top: 32rpx;
 text-align: center;
}

.top {
   
 display: flex;
 justify-content: space-between;
 align-content: center;
 align-items: center;
}

.city {
   
 text-align: center;
 color: white;
 display: inline-block;
 font-size: 52rpx;
 margin-left: 32rpx;