如何用微信小程序写一个最近3天的天气

构思：1.画一个最近3天的天气界面

           2.通过调用微信定位获取当前的具体位置

          3.通过调用公共天气接口显示最新天气情况

实现：1.画出天气图标、界面

 页面代码实现

<!--pages/weather/weather.wxml-->
<image src="../../image/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="../../image/weather/{{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>

 样式代码

/* pages/weather/weather.wxss */
/**common css**/
.w {
    color: white;
}

.b {
    font-weight: bold;
}

.l {
    border: 1rpx solid #fff;
}

.center {
    display: flex;
    text-align: center;
    margin: auto 0;
}

/* .center .weathers{
  // width: 100%;
} */

/* .center .air{
  //width:100%;
} */

.hor {
    display: flex;
}

.f50 {
    font-size: 50rpx;
}

/**weather 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;
}

实现代码

// pages/weather/weather.js
//获取应用实例
const app = getApp();
const day = ["今天", "明天", "后天"];
let interstitialAd = null;
Page({
    data: {
        day: day
    },

    onShow: function () {
        const that = this;
        wx.getSetting({
            success: function (res) {
                const auth = res.authSetting['scope.userFuzzyLocation'];
                console.log(auth);
                if (!auth) {
                    wx.hideLoading();
                    wx.showModal({
                        title: '警告',
                        confirmText: '授权',
                        content: '小程序未获取到当前位置授权信息，无法展示天气数据，请前往设置页面进行授权',
                        showCancel: false,
                        success: function (res) {
                            wx.openSetting({})
                        }
                    })
                } else if (auth) {
                    wx.showLoading({
                        title: '加载中...',
                        mask: true
                    })
                    that.getLocation();
                    setTimeout(() => {
                        if (interstitialAd) {
                            interstitialAd.show().catch((err) => {
                                console.error(err)
                            })
                        }
                    }, 1000)
                }
            },
            fail: function (res) {
                console.log(res);
            }
        })
    },

    onLoad: function () {
        const that = this;
        that.getLocation();
        wx.showLoading({
            title: '加载中...',
            mask: true
        })

        if (wx.createInterstitialAd) {
            interstitialAd = wx.createInterstitialAd({adUnitId: 'adunit-e2a442b531475976'})
        }
    },

    //获取经纬度方法
    getLocation: function () {
        let temp = 0;
        const that = this;
        wx.getFuzzyLocation ({
            type: 'wgs84',
            success: function (res) {
                temp = 0;
                console.log(res);
                const latitude = res.latitude;
                const longitude = res.longitude;
                that.getCity(latitude, longitude);
            },
            fail: function (e) {
                if (temp > 3) {
                    wx.hideLoading();
                    wx.showModal({
                        title: '警告',
                        content: '小程序未获取到当前位置授权信息，无法展示天气数据，请前往设置页面进行授权',
                        showCancel: false,
                        success: function (res) {
                            wx.openSetting({})
                        }
                    })
                } else {
                    temp++;
                    that.getLocation();
                }
            }
        })
    },

    //获取城市信息
    getCity: function (latitude, longitude) {
        const that = this;
        const url = "https://api.map.baidu.com/geocoder/v2/";
        const params = {
            ak: "gwBKuLVvGyagQjHr0NakOVRZe4Z63GfL",
            output: "json",
            location: latitude + "," + longitude
        };
        wx.request({
            url: url,
            data: params,
            success: function (res) {
                console.log(res);
                const city = res.data.result.addressComponent.city;
                const district = res.data.result.addressComponent.district;
                const street = res.data.result.addressComponent.street;

                that.setData({
                    city: city,
                    district: district,
                    street: street,
                })
                that.getWeahter(city);
            },
            fail: function (res) {
            },
            complete: function (res) {
            },
        })
    },

    //获取天气信息
    getWeahter: function (city) {
        console.log("定位城市为：" + city);
        const that = this;
        const url = "https://free-api.heweather.net/s6/weather";
        const params = {
            location: city,
            key: "bdd18de10e7148c2bdef1f1b2d514ef7"
        };
        wx.request({
            url: url,
            data: params,
            success: function (res) {
                console.log(res.data.HeWeather6[0]);
                const tmp = res.data.HeWeather6[0].now.tmp;
                const txt = res.data.HeWeather6[0].now.cond_txt;
                const code = res.data.HeWeather6[0].now.cond_code;
                const qlty = res.data.HeWeather6[0].lifestyle[7].brf;
                const dir = res.data.HeWeather6[0].now.wind_dir;
                const sc = res.data.HeWeather6[0].now.wind_sc;
                const hum = res.data.HeWeather6[0].now.hum;
                const fl = res.data.HeWeather6[0].now.fl;
                const daily_forecast = res.data.HeWeather6[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
                })
                wx.hideLoading()
            },
            fail: function (res) {

            },
            complete: function (res) {

            }
        })
    }
})