怎樣用一天時間，開發上架一個(gè)天氣小程序

發表時間：2021-3-31

發布人：葵宇科技

浏覽次數：45

早上醒來，我不願意回想昨天溫度多少(shǎo)度，隻想要知道今天比昨天熱還是冷(lěng)，适當增減衣服就行了。穿衣指數什麼的根本不适合我，污染指數也沒啥用，難道我能不上班嘛？

那麼我的需求就是有個(gè)天氣應用，告訴我今天和(hé)昨天天氣對比就行了。

曆史天氣接口不好找，我花(huā)了幾個(gè)小時搜了國内外十幾個(gè)天氣API，很少(shǎo)有曆史天氣查詢，有的也是付費服務。免費天氣預報接口倒是很多。

為一個(gè)沒有幾個(gè)人用的小程序付費購買接口太奢侈了，這時想到一個(gè)絕妙的（笨）方法：查詢到今天天氣以後，緩存起來，明天再來看就有昨日天氣了！

說幹就幹。

1. 注冊小程序

小程序注冊入口在這裡 https://mp.weixin.qq.com/wxopen/waregister?action=step1 填寫基本信息後，驗證郵箱和(hé)微信，就能登錄管理後台了。

在管理後台填寫小程序名稱、介紹和(hé)頭像，會自動(dòng)生成小程序碼。

在開發設置頁面可(kě)以看到AppID(小程序ID)，記住這個(gè) AppID。

2. 使用微信開發者工具

微信開發者工具在這裡下(xià)載 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 下(xià)載後，用微信掃碼打開，創建項目，這需要填入剛才的AppID。

假設你(nǐ)已經知道了微信開發的基礎，代碼應該有類似的結構。

3. 獲取位置信息

（注：和(hé)風天氣支持經緯度查天氣，第3步是可(kě)選步驟）

要預報當地天氣，需要知道位置，微信小程序有 wx.getLocation 可(kě)以獲取經緯度。

wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
  }
})

但是天氣查詢的接口很多都不支持經緯度查詢。我們需要用經緯度查城市名，這次使用騰訊地圖的API。

我們需要的接口就是這個(gè)頁面 http://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html 中(zhōng)的 reverseGeocoder，用經緯度可(kě)以獲取詳細的城市信息，但是我們隻需要城市名就可(kě)以了。

要使用接口，先要注冊騰訊lbs服務的開發者，頁面右上角用QQ号登錄，然後驗證手機号，然後就可(kě)以調用接口了。

在小程序中(zhōng)使用前，要在小程序設置界面，開發設置中(zhōng)添加request合法域名： http://apis.map.qq.com 。

// 先在項目中(zhōng)引入微信小程序JavaScript SDK
var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');

// onLoad中(zhōng)，實例化API核心類
  qqmapsdk = new QQMapWX({
    key: 'QQ lbs 開發者密鑰'
  });


// 在 onShow 中(zhōng)獲取城市名
qqmapsdk.reverseGeocoder({
  location: {
    latitude: latitude, // 使用 wx.getLocation 的返回值
    longitude: longitude
  },
  success: function (res) {
    console.log(res);
    if(res.status == 0){
      // 獲取到城市名
      let city_name = res.result.ad_info.city;
    }
  },
  fail: function (res) {
    console.log(res);
  },
  complete: function (res) {
  //  console.log(res);
  }
});

4. 查詢天氣

得到城市名後，再用城市名查詢天氣的接口，得到未來三天天氣預報。

天氣接口使用和(hé)風天氣 https://www.heweather.com/douments/api/s6/weather-forecast 。和(hé)風天氣的接口比較簡潔，返回值也有中(zhōng)文(wén)描述可(kě)以直接顯示。免費版的天氣信息足夠多。曆史天氣接口需要付費，我們先用免費的接口。

同上，要使用接口，需要先注冊開發者賬戶，驗證手機。

在小程序中(zhōng)使用前，要在小程序設置界面，開發設置中(zhōng)添加request合法域名： http://free-api.heweather.com 。

wx.request({
    url:'https://free-api.heweather.com/s6/weather/forecast',
    data:{
      location:location,
      key: '和(hé)風天氣開發者密鑰',
      rnd:new Date().getTime() // 随機數，防止請求緩存
    },
    success:function(res){
      console.log(res);
    }
  })

拿到天氣以後在本地做緩存，最多隻存兩天的記錄。

5. 美化前端界面

對前端程序員來說，設計酷炫的界面有點難，但是基本的審美還是有的。

用關(guān)鍵詞 “simple weather app” 在 Google 搜圖片，出來的看起來舒服的界面，借用一下(xià)配色。

搜索結果中(zhōng)還發現一個(gè)可(kě)愛的logo，還是免費的！隻有一條要求，需要在使用時展示這個(gè)網站(zhàn)的鍊接，因為是小程序，不能外鍊，我放了文(wén)本格式的網站(zhàn)地址，就是這個(gè) https://www.freepik.com/free-vector/simple-weather-app_874144.htm 。