前期准备

  • 申请自己的微信小程序,云开发环境也弄一下(用来模拟后端增删查改数据);
  • 气象数据:看完了百度天气,数据太少了;最后使用的是和风天气鉴于和风天气的文档更新了,更新一个新的案例。 需自行注册账号,获取自己的 key(重要的事情说3遍,key , key , key ,自行去申请,谢谢~);
  • 天气来源

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

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

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

页面截图

android 如何使用和风天气的图标_天气预报小程序


android 如何使用和风天气的图标_android 如何使用和风天气的图标_02


android 如何使用和风天气的图标_天气预报小程序_03


android 如何使用和风天气的图标_和风天气api_04

部分代码展示

//授权用户位置-先判断
  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…

android 如何使用和风天气的图标_android 如何使用和风天气的图标_05


云数据库:

android 如何使用和风天气的图标_和风天气api_06

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

android 如何使用和风天气的图标_和风天气api_07