微信小程序案例之天氣預報

 前言

這倆年微信小程序特別火，就抽空在網上找了個天氣案例自己學習了下，這個案例稍微做了些調整，所以就和大家一起分享下吧~~~~~。

小程序案列本人參考網址：https://www.cnblogs.com/demodashi/p/8481610.html

步驟

1.注冊微信小程序。

2.注冊和風天氣賬號。

3.注冊百度地圖開發平台應用。

4.微信小程序平台設置合法request域。

5.微信工具開發編碼實現。

6.微信小程序平台提交審核發布。

一、准備工作

1.注冊微信小程序

注冊微信小程序賬號就不用多說了，按照注冊步驟一步步來就行了，網上一大把教程。

注冊教程：https://kf.qq.com/faq/170109iQBJ3Q170109JbQfiu.html

2.注冊和風天氣賬號

獲取天氣情況，和風天氣網址：https://dev.heweather.com/

1）免費注冊和風賬號

2）創建應用，不清楚的可以點擊->如何添加應用

 

 

 

2）和風API接口方式，注冊完可以登錄看下，寫的還是挺詳細的

 

 3.注冊百度地圖開發平台應用

獲取城市定位參數，百度地圖網址：http://lbsyun.baidu.com/

1）注冊賬號后，點擊控制台->應用管理->我的應用->創建應用

 

 2)創建應用，輸入應用名稱及注冊微信小程序的APPID號，點擊確定。

 

4.微信小程序平台設置合法request域

 

 

 5.微信工具開發編碼實現

1）項目結構

 

 

 2）index.wxml

<!--index.wxml-->
<image src="../images/bj4.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:key="item" wx:for-items="{{daily_forecast}}" wx:for-index="i">
  <view class="hor forcast">
   <view class="day">{{day[i]}}</view>
    <view class="hor">
     <image class="img" src="../images/icons/{{item.cond_code_d}}.png"></image>
      <view class="center">{{item.cond_txt_d}}|{{qlty}}</view>
    </view>
    <view class="tmp">最低{{item.tmp_min}}°/ 最高{{item.tmp_max}}°</view>
  </view>
</view>
<view class='notice-wrap' hidden='{{hideNotice}}'>
  <image class="img" style="position:absolute;" src="../images/icons/gg2.png"></image>
　　<view class='tongzhitext'>
　　　　<text class="tongzhi-text">{{notice}}</text>
　　</view>
　　<!--<view bindtap='switchNotice' class="closeView">x</view>-->
</view>

3)index.js

//index.js
//獲取應用實例
var app = getApp()
var day = ["今天", "明天", "后天"];
Page({
  data: {
    //初始化數據
    hideNotice: false,
    day: day,
  },

  onLoad: function () {
    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
        that.getCity(latitude, longitude);
      }
    })
  },
  //獲取城市信息
  getCity: function (latitude, longitude) {
    var that = this
    var url = "https://api.map.baidu.com/reverse_geocoding/v3/";
    var params = {
      ak: "創建申請百度地圖key",

      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.net/s6/weather"
    var params = {
      location: city,
      key: "創建申請和風天氣key"
    }
    wx.request({
      url: url,
      data: params,
      success: function (res) {
        var tmp = res.data.HeWeather6[0].now.tmp;
        var txt = res.data.HeWeather6[0].now.cond_txt;
        var code = res.data.HeWeather6[0].now.cond_code;
        var vis = res.data.HeWeather6[0].now.vis;
        var dir = res.data.HeWeather6[0].now.wind_dir;
        var sc = res.data.HeWeather6[0].now.wind_sc;
        var hum = res.data.HeWeather6[0].now.hum;
        var fl = res.data.HeWeather6[0].now.fl;
        var notice = res.data.HeWeather6[0].lifestyle[2].txt;
        var daily_forecast = res.data.HeWeather6[0].daily_forecast;
        that.setData({
          tmp: tmp,
          txt: txt,
          code: code,
          vis: vis,
          dir: dir,
          sc: sc,
          hum: hum,
          fl: fl,
          daily_forecast: daily_forecast,
          notice: notice
        })
        that.getWeahterAir(city);
      },
      fail: function (res) { },
      complete: function (res) { },
    })
  },
  //獲取空氣質量
  getWeahterAir: function (city) {
    var that = this
    var url = "https://free-api.heweather.net/s6/air"
    var params = {
      location: city,
      key: "創建申請和風天氣key"
    }
    wx.request({
      url: url,
      data: params,
      success: function (res) {
        var qlty = res.data.HeWeather6[0].air_now_city.qlty;
        that.setData({
          qlty: qlty,
        })
      },
      fail: function (res) { },
      complete: function (res) { },
    })
  },
  //下拉刷新
  onPullDownRefresh: function () {
    var that = this
    that.getLocation();
    //下拉刷新后回彈
    wx.stopPullDownRefresh();
  },
  // 點擊關閉公告
  /*switchNotice: function () {
    this.setData({
      hideNotice: true
    })
  },*/
}
)

4)index.wxss

/**index.wxss**/
 
/**common css**/
.w{
  color: white;
}
.b{
  font-weight: bold;
}
 
.l{
  border: 1rpx solid #fff;
}
 
.center{
  text-align: center;
  margin: auto 0;
}

 .day{
  text-align: center;
  margin: auto 0;
  width: 20%;
}
 .tmp{
  text-align: center;
  margin: auto 0;
  width: 50%;
  margin-left: 25rpx;
}
.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;

}


.img{
  width: 60rpx;
  height: 60rpx;
  margin-right: 16rpx;
}


@keyframes remindMessage {
  0% {
    -webkit-transform: translateX(90%);
  }

  100% {
    -webkit-transform: translateX(-180%);
  }
}

.tongzhitext {
  /* margin-right:80rpx; */
  margin-left: 60rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 22px;
}

.tongzhi-text {
  font-size: 30rpx;
  animation: remindMessage 14s linear infinite;
  width: 100%;
  color: #000000;
  display: block;
  margin-top: 5rpx;
}

.notice-wrap {
  background: rgb(245, 241, 240);
  width: 100%;
  height: 60rpx;
  line-height: 10rpx;
  color: #d09868;
  font-size: 28rpx;
}

.closeView {
  width: 45rpx;
  height: 45rpx;
  line-height: 45rpx;
  position: absolute;
  right: 20rpx;
  top: 5rpx;
  text-align: center;
  font-size: 35rpx;
}

5)index.json

{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

項目保存后，可用手機微信掃描預覽看下效果

 

 

6.微信小程序平台提交審核發布

1）點擊上傳按鈕

 

 2）微信公眾平台提交審核，靜等幾個小時，審核通過后點擊提交發布，微信搜索小程序名稱就可以看到啦~~~

 

注：背景圖片可以自己更新，icons包里的天氣小圖標可以在和風官網天氣狀況和圖標打包下載。

圖標網址：https://dev.heweather.com/docs/refer/condition