微信小程序项目实战之天气预报

缺乏、安全感 2022-05-31 08:48 225阅读 0赞

# 概述 #

微信小程序项目实战之天气预报

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/10634.html][http_www.demodashi.com_demo_10634.html] ####

#### 一、准备工作 ####

1、注册微信小程序

![QQ截图20170717112223.png][QQ_20170717112223.png]

2、注册和风天气账号

![QQ截图20170717112355.png][QQ_20170717112355.png]

3、注册百度地图开放平台（小程序应用）

![QQ截图20170717112300.png][QQ_20170717112300.png]

4、在小程序设置中设置request合法域名

![QQ截图20170717112727.png][QQ_20170717112727.png]

#### 二、程序实现 ####

项目代码截图：

![image.png][]

具体实现如下：

1、前端页面的实现

<image src="../../assets/day.jpg" class="bg"></image>
    <view class="container">
    
      <view class="nowWeather">
        <view class="city w">{
         {city}} {
         {district}}</view>
        <view class="road w">{
         {street}}</view>
        <view class="temp w b">{
         {tmp}}°</view>
        <view class="weather w">{
         {txt}} | 空气 {
         {qlty}}</view>
      </view>
    
      <view class="weahterDetail">
        <view class="">
          <view class="w center">{
         {dir}}</view>
          <view wx:if="{
         {sc == '微风'}}" class="w b center f50">微风</view>
          <view wx:else class="w b center f50">{
         {sc}}级</view>
        </view>
        <view class="l"></view>
        <view class="">
          <view class="w center">相对湿度</view>
          <view class="w b center f50">{
         {hum}}%</view>
        </view>
        <view class="l"></view>
        <view class="">
          <view class="w center">体感温度</view>
          <view class="w b center f50">{
         {fl}}°</view>
        </view>
      </view>
    
    </view>
    
    
    <view wx:for="{
         {daily_forecast}}" wx:for-index="i" wx:for-item="item">
      <view class="hor forcast">
        <view class="center">{
         {day[i]}}</view>
        <view class="hor">
          <image class="img" src="../../assets/icons/{
         {item.cond.code_d}}.png"></image>
          <view class="center">{
         {item.cond.txt_d}}|{
         {qlty}}</view>
        </view>
        <view class="center">{
         {item.tmp.min}}°/ {
         {item.tmp.max}}°</view>
      </view>
    </view>

2、css实现

/**index.wxss**/
    
    /**common css**/
    .w{
      color: white;
    }
    .b{
      font-weight: bold;
    }
    
    .l{
      border: 1rpx solid #fff;
    }
    
    .center{
      text-align: center;
      margin: auto 0;
    }
    
    .hor{
      display: flex;
    }
    
    .f50{
      font-size: 50rpx;
    }
    
    /**index css**/
    
    
    .bg {
      width: 100%;
      height: 700rpx;
    }
    
    .temp{
      font-size: 170rpx;
    }
    
    .container {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      padding: 0;
      margin: 0;
      height: 700rpx;
      display: block;
    }
    
    .nowWeather{
      padding: 60rpx;
    }
    
    .weahterDetail{
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      position: absolute;
      bottom: 50rpx;
    }
    
    .forcast{
      padding: 30rpx;
      margin-left: 16rpx;
      margin-right: 16rpx;
      border-bottom: 1rpx solid #eee;
      justify-content: space-around;
    }
    
    .img{
      width: 60rpx;
      height: 60rpx;
      margin-right: 16rpx;
    }

3、js实现动态数据绑定

//index.js
    //获取应用实例
    var app = getApp()
    var day = ["今天","明天","后天"];
    Page({
      data: {
        day : day,
      },
    
      onLoad: function () {
        console.log('onLoad')
        var that = this
    
        that.getLocation();
      },
    
      //获取经纬度方法
      getLocation: function () {
        var that = this
        wx.getLocation({
          type: 'wgs84',
          success: function (res) {
            var latitude = res.latitude
            var longitude = res.longitude
            console.log("lat:" + latitude + " lon:" + longitude);
    
            that.getCity(latitude, longitude);
          }
        })
      },
    
      //获取城市信息
      getCity: function (latitude, longitude) {
        var that = this
        var url = "https://api.map.baidu.com/geocoder/v2/";
        var params = {
          ak: "1G50Crx5QIKWy5o4R5Q1ONFSgmFIxfIR",
          output: "json",
          location: latitude + "," + longitude
        }
        wx.request({
          url: url,
          data: params,
          success: function (res) {
            var city = res.data.result.addressComponent.city;
            var district = res.data.result.addressComponent.district;
            var street = res.data.result.addressComponent.street;
    
            that.setData({
              city: city,
              district: district,
              street: street,
            })
    
            var descCity = city.substring(0, city.length - 1);
            that.getWeahter(descCity);
          },
          fail: function (res) { },
          complete: function (res) { },
        })
      },
    
      //获取天气信息
      getWeahter: function (city) {
        var that = this
        var url = "https://free-api.heweather.com/v5/weather"
        var params = {
          city: city,
          key: "894fc2a749104d679fa022c3e71afe83"
        }
        wx.request({
          url: url,
          data: params,
          success: function (res) {
            var tmp = res.data.HeWeather5[0].now.tmp;
            var txt = res.data.HeWeather5[0].now.cond.txt;
            var code = res.data.HeWeather5[0].now.cond.code;
            var qlty = res.data.HeWeather5[0].aqi.city.qlty;
            var dir = res.data.HeWeather5[0].now.wind.dir;
            var sc = res.data.HeWeather5[0].now.wind.sc;
            var hum = res.data.HeWeather5[0].now.hum;
            var fl = res.data.HeWeather5[0].now.fl;
            var daily_forecast = res.data.HeWeather5[0].daily_forecast;
            that.setData({
              tmp: tmp,
              txt: txt,
              code: code,
              qlty: qlty,
              dir: dir,
              sc: sc,
              hum: hum,
              fl: fl,
              daily_forecast: daily_forecast
            })
          },
          fail: function (res) { },
          complete: function (res) { },
        })
      }
    
    })

#### 三、运行效果 ####

导入到微信web开发者工具，运行即可：

运行后，界面如下：

![QQ截图20170714144814.png][QQ_20170714144814.png]

#### 注：本文著作权归作者，由demo大师（[http://www.demodashi.com][http_www.demodashi.com]）宣传，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_10634.html]: http://www.demodashi.com/demo/10634.html
[QQ_20170717112223.png]: /images/20220531/63e1ae0f5bc04738af2861d60fb5fcc9.png
[QQ_20170717112355.png]: /images/20220531/4314cb38a3b048158b14472ad0d97ea9.png
[QQ_20170717112300.png]: /images/20220531/e917456550ff48c9823b10838168efa4.png
[QQ_20170717112727.png]: /images/20220531/5e968203b746408690e372682a1ab7f6.png
[image.png]: /images/20220531/ae0d765c9b5d4abc8ce01cb4aa1c0685.png
[QQ_20170714144814.png]: /images/20220531/acb77fb8388749efaecf8cb8b080d5e9.png
[http_www.demodashi.com]: http://www.demodashi.com/