早上醒來，我不愿意回想昨天溫度多少度，只想要知道今天比昨天熱還是冷，適當(dāng)增減衣服就行了。穿衣指數(shù)什么的根本不適合我，污染指數(shù)也沒啥用，難道我能不上班嘛？

那么我的需求就是有個(gè)天氣應(yīng)用，告訴我今天和昨天天氣對(duì)比就行了。

歷史天氣接口不好找，我花了幾個(gè)小時(shí)搜了國內(nèi)外十幾個(gè)天氣API，很少有歷史天氣查詢，有的也是付費(fèi)服務(wù)。免費(fèi)天氣預(yù)報(bào)接口倒是很多。

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

說干就干。

1. 注冊(cè)小程序

小程序注冊(cè)入口在這里 http://mp.weixin.qq.com/wxopen/waregister?action=step1 填寫基本信息后，驗(yàn)證郵箱和微信，就能登錄管理后臺(tái)了。

在管理后臺(tái)填寫小程序名稱、介紹和頭像，會(huì)自動(dòng)生成小程序碼。

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

2. 使用微信開發(fā)者工具

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

假設(shè)你已經(jīng)知道了微信開發(fā)的基礎(chǔ)，代碼應(yīng)該有類似的結(jié)構(gòu)。

3. 獲取位置信息

（注：和風(fēng)天氣支持經(jīng)緯度查天氣，第3步是可選步驟）

要預(yù)報(bào)當(dāng)?shù)靥鞖?，需要知道位置，微信小程序?wx.getLocation 可以獲取經(jīng)緯度。

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

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

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

要使用接口，先要注冊(cè)騰訊lbs服務(wù)的開發(fā)者，頁面右上角用QQ號(hào)登錄，然后驗(yàn)證手機(jī)號(hào)，然后就可以調(diào)用接口了。

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

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

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


// 在 onShow 中獲取城市名
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. 查詢天氣

得到城市名后，再用城市名查詢天氣的接口，得到未來三天天氣預(yù)報(bào)。

天氣接口使用和風(fēng)天氣 http://www.heweather.com/douments/api/s6/weather-forecast 。和風(fēng)天氣的接口比較簡(jiǎn)潔，返回值也有中文描述可以直接顯示。免費(fèi)版的天氣信息足夠多。歷史天氣接口需要付費(fèi)，我們先用免費(fèi)的接口。

同上，要使用接口，需要先注冊(cè)開發(fā)者賬戶，驗(yàn)證手機(jī)。

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

wx.request({
    url:'http://free-api.heweather.com/s6/weather/forecast',
    data:{
      location:location,
      key: '和風(fēng)天氣開發(fā)者密鑰',
      rnd:new Date().getTime() // 隨機(jī)數(shù)，防止請(qǐng)求緩存
    },
    success:function(res){
      console.log(res);
    }
  })

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

5. 美化前端界面

對(duì)前端程序員來說，設(shè)計(jì)酷炫的界面有點(diǎn)難，但是基本的審美還是有的。

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

搜索結(jié)果中還發(fā)現(xiàn)一個(gè)可愛的logo，還是免費(fèi)的！只有一條要求，需要在使用時(shí)展示這個(gè)網(wǎng)站的鏈接，因?yàn)槭切〕绦?，不能外鏈，我放了文本格式的網(wǎng)站地址，就是這個(gè) http://www.freepik.com/free-vector/simple-weather-app_874144.htm 。

做好的界面。

晚上又優(yōu)化了一下代碼，還在12點(diǎn)前后做了測(cè)試，修改了幾個(gè)問題，就提交審核了。

6. 測(cè)試小程序

就算是這么小的項(xiàng)目，測(cè)試也必不可少。經(jīng)過測(cè)試發(fā)現(xiàn)和風(fēng)天氣的返回值，是未來三天的天氣數(shù)組，12月7日晚上調(diào)用返回的結(jié)構(gòu)與API一樣，包含了[12-7,12-8,12-9]的天氣。

和風(fēng)天氣接口測(cè)試

? 問題1：但是過了午夜12點(diǎn)以后，返回的仍然是[12-7,12-8,12-9]，就不能隨便的使用 arr[0] 當(dāng)作今日天氣了。

? 問題2：早上起床不到8點(diǎn)，看審核還沒通過，再調(diào)試一次看看，這次調(diào)用返回的數(shù)組只有一個(gè)天氣[12-8]，倒是有今天了，明天后天是沒有的，好在我現(xiàn)在還不需要。

7. 審核通過

八點(diǎn)又看了一下，上面的API問題不會(huì)影響程序。一個(gè)小時(shí)以后，審核通過了，

審核后，興奮的發(fā)給朋友試用?，F(xiàn)在才發(fā)現(xiàn)一個(gè)重要的問題，如果哪天沒打開，第二天就沒有昨日天氣了，需要每天都打開一次！真希望有免費(fèi)的歷史天氣接口啊，哪怕只有簡(jiǎn)化的昨日天氣也行啊。

如果你想試用，可以在微信搜“昨日天氣”小程序。如果這個(gè)需求很多，可能我會(huì)考慮買付費(fèi)的歷史天氣接口。

后記

嗯，哪天想起來這個(gè)小程序了，還不能用…… 那你比別的天氣應(yīng)用，有什么區(qū)別呢。

說起來跟別的應(yīng)用比較，微信可以直接搜天氣，手機(jī)也都有天氣app，包含昨日天氣的也很多，小程序的優(yōu)勢(shì)在哪里呢？ 看起來打開app的路徑，并不比小程序復(fù)雜啊！

React-Native版來了 怎樣用一天時(shí)間，開發(fā)發(fā)布一個(gè)天氣App