微信小程序 - 简易天气预报

预览图:

 

一、代码部分

1:WXML:

<!--pages/weather/weather.wxml-->
<view class="father_box">
  <!--上 -->
  <view class="top_box">
    <!-- 背景图片 -->
    <image class="bg-image" mode="widthFix" src="../../images/l.jpg"></image>
    <text class="pm2_5">{{city}}:{{pm2_5}}</text>
    <view class="temperature">{{weatherArray[0].temperature_curr}}</view>
    <view class="weather">{{weatherArray[0].weather}}</view>
    <view class="wind">{{weatherArray[0].wind}}</view>
    <view class="pm2_5_remark">{{pm2_5_remark}}</view>
  </view>
  <!-- 下 -->
  <view class="bottom_box">
    <view class="bottom_box_father">
      <view class="bottom_left">
        <view class="bottom_left_left">
          <view style="margin-bottom: 10rpx;">今天</view>
          <view>{{weatherArray[0].weather}}</view>
        </view>
        <view class="bottom_left_right">
          <view style="margin-bottom: 10rpx;">{{weatherArray[0].temperature}}</view>
          <view><image class="icon" mode="widthFix" src="{{weatherArray[0].weather_icon}}"></image></view>
        </view>
      </view>
      <view style="height: 120rpx;width: 3rpx;background-color: #b9b9b9;"></view>
      <view class="bottom_right">
        <view class="bottom_right_left">
          <view style="margin-bottom: 10rpx;">明天</view>
          <view>{{weatherArray[1].weather}}</view>
        </view>
        <view class="bottom_right_right">
          <view style="margin-bottom: 10rpx;">{{weatherArray[1].temperature}}</view>
          <view><image class="icon" mode="widthFix" src="{{weatherArray[1].weather_icon}}"></image></view>
        </view>
      </view>
    </view>
  </view>
</view>

2:WXSS:

/* pages/weather/weather.wxss */
page{
  height: 100%;
  width: 100%;
}
.bg-image
{ 
  width : 100%;
  position: fixed;  
  z-index: -1;  
}
.father_box{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* 上 */
.top_box{
  flex: 4;
}
.pm2_5{
  color: white;
  padding: 10rpx;
  margin-left: 20rpx;
  background-color:violet
}
.temperature{
  text-align: center;
  margin-top: 10%;
  color: white;
  font-size:100rpx;
}
.weather{
  text-align: center;
  color: white;
  font-size:40rpx;
  padding-right: 20rpx;
}
.wind{
  text-align: center;
  color: white;
  font-size:40rpx;
}
.pm2_5_remark{
  margin-top: 15%;
  text-align: center;
  color: white;
  font-size:40rpx;
}
/* 下 */
.bottom_box{
  flex: 1;
  background-color:white ;
 
}
.bottom_box_father{
  display: flex;
  height: 100%;
  width: 100%;
  margin-right: 10rpx;
  box-sizing:content-box;
  background-color: white;
  align-items: center;
  justify-content: center;
}
.bottom_left{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom_left_left{
  flex: 1;
  margin-left: 30rpx;
}
.bottom_left_right{
  flex: 1;
}
.bottom_right{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom_right_left{
  flex: 1;
  margin-left: 30rpx;
}
.icon{
  width: 60rpx;
}
.bottom_right_right{
  flex: 1;
}

3:JS:

var QQMapWX = require('../../libs/qqmap-wx-jssdk');    // 百度地图js包文件
Page({
  data: {
    city: "",
    weaid: "",    // 城市气象编号
    // 数据
    pm2_5: "",
    pm2_5_remark: "",
    weatherArray: [{
      temperature: "",
      temperature_curr: "",
      weather: "",
      wind: "",
      weather_icon:""
    }, {
      temperature: "",
      weather: "",
      weather_icon:""
    }
    ],
    pd:[false,false,false]
  },
  onLoad(e) {
    wx.showLoading({
      title: '拼命加载中...',
    })
    this.getLocationInfo()
  },
  // 获取当前城市
  getLocationInfo() {
    let _this = this

    let qqmapsdk = new QQMapWX({
      key: 'NL2BZ-6A46Q-GDY5V-GHTNI-SEL3S-Q6FM5'
    });

    wx.getLocation({
      isHighAccuracy: true,
      type: "gcj02",
      success(res) {
        let { latitude, longitude } = res
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            console.log(res.result)
            let city = res.result.address_component.city
            _this.setData({ city })

            _this.getcityId()
          },
          fail: function (res) {
            console.log(res);
          },
        });
      }
    })
  },
  // 获取城市编号
  getcityId() {
    let _this = this
    wx.request({
      url: 'http://api.k780.com/?app=weather.city&areaType=cn&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
      method: "GET",
      dataType: "json",
      success: (res) => {
        let dtList = res.data.result.dtList
        for (var key in dtList) {
          if (_this.data.city.indexOf(dtList[key].cityNm) != -1) {
            _this.setData({ weaid: dtList[key].weaId })
            break
          }
        }
        _this.SearchCityWeather()
      },
      fail: (result) => {
        wx.showToast({
          title: '获取城市编号失败',
          icon: "error"
        })
      },

    })
  },
  // 获取当前城市的天气指数
  SearchCityWeather() {
    let _this = this
    // 获取今天天气
    wx.request({
      url: 'http://api.k780.com:88/?app=weather.today&weaid=' + _this.data.weaid + '&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
      method: "GET",
      dataType: "json",
      success: (res) => {
        let resultArray = res.data.result
        console.log(resultArray)
        _this.setData({
          'weatherArray[0].temperature': resultArray.temperature,
          'weatherArray[0].temperature_curr': resultArray.temperature_curr,
          'weatherArray[0].weather': resultArray.weather + resultArray.weather_curr,
          'weatherArray[0].wind': resultArray.wind + " " + resultArray.winp
        })
      },
      fail: (result) => {
        wx.showToast({
          title: '获取当前城市天气失败',
          icon: "error"
        })
      },
      complete:()=>{
        _this.setData({'pd[0]':true})
      }
    })
    // 获取pm2.5
    wx.request({
      url: 'http://api.k780.com/?app=weather.pm25&weaId=' + _this.data.weaid + '&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
      method: "GET",
      dataType: "json",
      success: (res) => {
        let resultArray = res.data.result
        console.log(resultArray)
        _this.setData({
          pm2_5: resultArray.aqi_levnm,
          pm2_5_remark: resultArray.aqi_remark
        })
      },
      fail: (result) => {
        wx.showToast({
          title: '获取当前城市天气失败',
          icon: "error"
        })
      },
      complete:()=>{
        _this.setData({'pd[1]':true})
      }
    })
    // 获取未来天气
    wx.request({
      url: 'http://api.k780.com:88/?app=weather.future&weaid='+_this.data.weaid+'&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
      method: "GET",
      dataType: "json",
      success: (res) => {
       let resultArray = res.data.result
       console.log(resultArray)

       _this.setData({
        'weatherArray[0].weather_icon': resultArray[0].weather_icon,
        'weatherArray[1].weather_icon': resultArray[1].weather_icon,
        'weatherArray[1].temperature': resultArray[1].temperature,
        'weatherArray[1].weather': resultArray[1].weather
      })
      },
      fail: (result) => {
        wx.showToast({
          title: '获取未来城市天气失败',
          icon:"error"
        })
      },
      complete:()=>{
        _this.setData({'pd[2]':true})
      }
    })

    let Interval = setInterval(()=>{
      if(_this.data.pd[0] && _this.data.pd[1] &&_this.data.pd[2]){
        wx.hideLoading()
        console.log("关闭")
        clearInterval(Interval)
      }
    },500);
  }
})

4:下载地图包:

不了解的可以通过这个链接查看,其中有关于小程序定位的内容,本章也使用到过:微信小程序获取位置信息_微信小程序获取当前位置_鸢与浅忆的博客-CSDN博客

 5:app.json:

和page、window同级

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序获取当前定位信息"
    }
  }

二、 接口文档

该项目使用的接口为nowapi平台提供的接口,官方链接:实时天气接口 - 数据接口 - NowAPI

链接中使用的appkey、sign是免费,但每天有一个次数限制,用来做一个简单的项目足够了。

2.1、 获取城市列表

URL:http://api.k780.com/?app=weather.city&areaType=cn&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json

参数作用
app接口 此处应为:weather.city
areaTypecn:国内城市 gb:国外城市

 2.2、获取当前城市天气

URL: http://api.k780.com:88/?app=weather.today&weaid=94&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json

参数作用
weaid城市气象编号
appkey10003

 2.3、获取未来5天城市天气

URL:http://api.k780.com:88/?app=weather.future&weaid=101280601&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json


欢迎大家在评论区多多交流留言。

  • 4
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
微信小程序是一种基于微信平台的应用的开发模式,可以快速的开发出符合用户需求的小程序。在小程序的开发中,组件是一个非常重要的概念,通过组件可以实现复用性和模块化编程思想。 组件应用是小程序开发的基础。通过组件可以将某一模块化并封装起来,使得组件可以在不同的页面间得到复用,大大提升了开发效率并减少了代码冗余。微信小程序提供了丰富的自带组件,包括文本、图片、按钮、输入框等等,开发者也可以自己开发组件来满足自己的需求。实际开发中,通过组件可以快速搭建页面框架和业务逻辑。 Demo是一个演示小程序的示例程序。在小程序的实际开发过程中,一个好的Demo非常重要。通过Demo,开发人员可以更深入的了解小程序的开发流程、组件的应用和实际的业务开发等等。在Demo中,通常会包括小程序的一些基础操作,如页面跳转、数据绑定、组件的使用等。而在实际开发中,Demo还会包括一些复杂的业务场景,如支付、登录、数据列表展示等等。Demo不仅为开发者提供了学习和实践的机会,也方便了使用者了解该小程序的功能和特点。 总之,微信小程序组件的应用和Demo的开发都是小程序开发过程中非常重要的两个部分。良好的组件应用和精心设计的Demo,可以在极短的时间内实现小程序开发。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

橙子哈哈哈~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值