微信小程序获取今日天气预报代码 小程序获取七日天气

Posted 2021-02-15 ccjin

代码是天气api的小程序demo, 粘贴上js和wxml就可以运行看效果了, 有问题的加我qq 445899710, 可提供源代码, 效果如图

如果是测试, 请勾选配置 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

如果正式使用, 请添加安全域名两个 (ip.tianqiapi.com 和 tianqiapi.com)

index.js代码

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    weather: [],//实况天气
    weatherweek:[],//七日天气
  },
  onLoad: function () {
    this.getapi();
    this.weatherweekday();
  },
  getapi:function(){
    var _this = this;
    // 获取IP地址
    wx.request({
      url: ‘https://ip.tianqiapi.com/‘,
      data: {
      },
      method: ‘POST‘,
      header: {
        ‘content-type‘: ‘application/x-www-form-urlencoded‘
      },
      success: function (res) {
        console.log(res);
        // 根据IP获取天气数据
        _this.weathertoday(res.data.ip);
      }
    });
  },
  // 天气api实况天气
  weathertoday:function(ip){
    var _this = this;
    wx.request({
      url: ‘https://www.tianqiapi.com/api/?version=v6‘,
      data: {
        ‘ip‘: ip
      },
      method: ‘GET‘,
      header: {
        ‘content-type‘: ‘application/x-www-form-urlencoded‘
      },
      success: function (res) {
        _this.setData({
          weather: res.data
        });
        console.log(_this.data.weather)
      }
    });
  },
  // 天气api实况天气
  weatherweekday: function (ip) {
    var _this = this;
    wx.request({
      url: ‘https://www.tianqiapi.com/api/?version=v1‘,
      data: {
        ‘ip‘: ip
      },
      method: ‘GET‘,
      header: {
        ‘content-type‘: ‘application/x-www-form-urlencoded‘
      },
      success: function (res) {
        _this.setData({
          weatherweek: res.data
        });
        console.log(_this.data.weatherweek)
      }
    });
  }
})

　　

wxml代码

<!--index.wxml-->
<view class=‘container‘>
  <view class=‘padb‘ style=‘font-size:20px; font-weight:bold;‘>天气api - 小程序示例</view>
  <view class=‘padb‘ style=‘font-size:16px; font-weight:bold;‘>{{weather.city}}实况天气预报</view>
  <view>气象台 {{weather.update_time}} 更新</view>
  <view class=‘padb‘>{{weather.tem}}℃ {{weather.wea}}</view>
  <view class=‘padb‘>
    <image mode="widthFix" src="https://cdn.huyahaha.com/tianqiapi/skin/qq/{{weather.wea_img}}.png" style="width:120rpx;" />
  </view>
  <view class=‘padb‘>{{weather.win}} {{weather.win_speed}} {{weather.win_meter}}</view>
  <view class=‘padb‘>湿度: {{weather.humidity}}</view>
  <view class=‘padb‘>能见度: {{weather.visibility}}</view>
  <view class=‘padb‘>气压: {{weather.pressure}}hPa</view>
  <view class=‘padb‘>空气质量 {{weather.air_level}}</view>
  <view class=‘padb‘>{{weather.air_tips}}</view>
 <view class=‘padb‘ style=‘font-size:16px; font-weight:bold;‘>{{weather.city}}七日天气</view>
<block wx:for=‘{{weatherweek.data}}‘ wx:key=‘key_list‘>
<view class=‘padb‘>{{item.day}} - {{item.wea}} - {{item.win[0]}} - {{item.tem1}}/{{item.tem2}}</view>
</block>
  <view class=‘padb‘ style=‘font-size:14px; color:#666;‘>TianqiAPI.com</view>
</view>
 

 

CSS代码

.container {
  height: 100%;
  text-align:center; background:#f6f8f8; padding:20rpx;font-size:16px;
} 
.padb{padding-bottom: 15rpx;}