微信小程序-天气预报案例之和风天气API-云开发版

小程序-天气预报，在现实生活中是非常常用的，我们平时都可以通过自己的手机上面或网上进行查看天气等等；

鉴于有些小伙伴对云开发不熟悉，学习请移步到我的另外一篇文章 天气预报之和风天气-简易版，这个demo可以应用到自己的小程序模块上。

前期准备

• 申请自己的微信小程序，云开发环境也弄一下（用来模拟后端增删查改数据）；
• 气象数据：看完了百度天气，数据太少了；最后使用的是和风天气。鉴于和风天气的文档更新了，更新一个新的案例。 需自行注册账号，获取自己的 key（重要的事情说3遍，key , key , key ,自行去申请，谢谢~）；
• 版本对比：具体使用自行查阅文档哈…
• 小程序合法域名配置：(必需)
  https://devapi.qweather.com
  https://geoapi.qweather.com

天气来源

我用的是开发版（项目用到接口有：实况天气，7天预报，24小时内的预报，生活指数lifestyle，城市搜索find，热门城市top等等）。

授权-位置：
具体看一下微信小程序文档

数据存储：
具体看一下云开发文档

页面截图

部分代码展示

  //授权用户位置-先判断
  autoUserLocation() {
    let that = this;
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.userLocation']) {
          console.log('位置未授权')
          wx.setStorageSync('isLocation', false);
          wx.authorize({
            scope: 'scope.userLocation',
            success(res) {
              that.getWxLocation();
            },
            fail(res) {
              console.log('~~取消位置授权~~')
              wx.setStorageSync('myLocation', '');
              wx.setStorageSync('isLocation', false);
              wx.showModal({
                title: '定位失败',
                content: '请允许”使用我的地理位置“后，再查看定位城市信息，默认为您展示广州的天气信息。',
                showCancel: false,
                confirmText: '好的',
                success(res) {
                  if (res.confirm) {
                    if (that.isCancleCallback) {
                      that.isCancleCallback(true);
                    }
                  }
                }
              })
            }
          })
        } else {
          console.log('位置已授权')
          that.getWxLocation();
        }
      }
    })
  },

//获取今日天气
 getWeather(location) {
   var params = {};
   params.location = location;
   params.key = globalData.key;
   util.showLoading('加载中...')
   util.requestAjax.get('https://devapi.qweather.com/v7/weather/now', params)
     .then((res) => {
       if (res.data.code != 200) {
         return
       }
       const now = res.data.now;
       this.setData({
         weatherInfo: now,
         weekday: util.formatWeek(now.obsTime)
       })
       util.hideLoading();
       wx.stopPullDownRefresh();
     }).catch((err) => {})
   this.getHour(params);
   this.getSeven(params);
   this.getLifeStyle(params);
   this.dayNight();
 },

  //获取我的地址
  getMyCityWeater() {
    let that = this;
    util.showLoading('加载中...');
    db.collection('cityWeather').where({
      _openid: that.data.openid
    }).get({
      async success(res) {
        var result = res.data;
        if (result.length <= 0) {
          util.hideLoading();
          return
        }
        var myCityList = result[0].cityList;
        await myCityList.forEach(async (item) => {
          let val = await that.getWeather(item.location);
          item.temp = val.temp;
          item.time = util.formatHourMinute(val.obsTime);
          item.isTouchMove = false;
          that.setData({
            myCityList: myCityList,
            loading: false
          })
        })
        util.hideLoading();
        wx.stopPullDownRefresh();
      },
      fail(err) {
        console.log(err)
      }
    })
  },

这里的app.js…

云数据库：

云存储-图片文件夹地址如下图：

小程序二维码

• 如上配置不懂的可留言或私信哦，谢谢~
• 仅供学习参考，不作商业用途~

源码会持续更新到公众号，需要可以关注一下哦…

简易版：天气预报之和风天气案例-简易版

想学习vue可移步到：vue相关的技术

想学习小程序可移步到：小程序相关的技术