前言

跟異國(guó)他鄉(xiāng)的朋友們微信聊天的時(shí)候，經(jīng)常面臨時(shí)差的問(wèn)題。我每次想要確定對(duì)方現(xiàn)在是幾點(diǎn)，總是要口算一下，有時(shí)忘記具體時(shí)差，或者涉及跨天，還得打開(kāi)瀏覽器查一下，很不方便。有什么方法可以把朋友們所在城市的時(shí)間集中起來(lái)隨時(shí)供自己查看呢？于是想到了微信小程序。找了找市面上的時(shí)間小程序，不是功能太雜就是小廣告太多，不滿意。

為什么不自己動(dòng)手量身打造一個(gè)呢？

行動(dòng)起來(lái)。

首先快速明確需求

很簡(jiǎn)單：

1. 需要展示時(shí)間的城市初定：加州、紐約，再加北京做對(duì)比
2. 需要顯示具體的時(shí)分秒，和年月日
3. 需要實(shí)時(shí)變化
4. 在其他國(guó)家也能正確展示時(shí)間

然后創(chuàng)建項(xiàng)目開(kāi)擼

怎么創(chuàng)建和前期的準(zhǔn)備就不在這里展開(kāi)了，相信不少人都熟悉。如果不熟悉小程序開(kāi)發(fā)的可以參考官網(wǎng) 或者我的另一篇文章如何開(kāi)發(fā)微信小程序 ，上面有對(duì)如何開(kāi)發(fā)小程序的簡(jiǎn)明扼要的的介紹。

關(guān)鍵邏輯

這個(gè)小程序的核心是時(shí)間的處理。如何得到其他地區(qū)的時(shí)刻信息？

這還不簡(jiǎn)單？
先獲取本地時(shí)刻，然后加上或者減去另外一個(gè)地點(diǎn)與國(guó)內(nèi)（北京時(shí)間）的時(shí)差（小時(shí)），最多再處理一下跨天的情況，不就得到其他地點(diǎn)的時(shí)刻了？

我一開(kāi)始也是這么想的，做完覺(jué)得還挺美，準(zhǔn)備提交的時(shí)候，突然意識(shí)到問(wèn)題：我時(shí)差全是基于北京時(shí)間計(jì)算的，換在其他國(guó)家訪問(wèn)，獲取的本地時(shí)間已經(jīng)不是北京時(shí)間了，時(shí)差應(yīng)該變才對(duì)，寫(xiě)死了時(shí)差可還行？！發(fā)布一個(gè)只能在國(guó)內(nèi)使用的雞肋時(shí)間工具，可不是我的風(fēng)格！

搗鼓一陣，新方案出爐：

1. 想辦法獲得零時(shí)區(qū)的時(shí)間
2. 獲取不同地區(qū)與零時(shí)區(qū)的時(shí)差（時(shí)區(qū)）
3. 用零時(shí)區(qū)的時(shí)間加減與零時(shí)區(qū)的時(shí)差（時(shí)區(qū)），得到各地的絕對(duì)時(shí)間

1. 獲得零時(shí)區(qū)的時(shí)間

零時(shí)區(qū)，也叫中時(shí)區(qū)，位于英國(guó)格林威治本初子午線上。該時(shí)區(qū)的地方時(shí)，叫做格林威治時(shí)間，也叫世界時(shí)。

我們不能直接獲得格林威治時(shí)間，但是我們可以獲得本地與格林威治的時(shí)間差：

const diff = new Date().getTimezoneOffset() // 單位為分鐘

然后根據(jù)本地時(shí)間和時(shí)間差獲得格林威治時(shí)間：

const absTime = new Date().getTime() + diff * 60 * 1000;

2. 查詢(xún)各地時(shí)區(qū)

格林威治本初子午線將地球劃分為東西兩個(gè)半球，格林威治本初子午線為零時(shí)區(qū)，往西依次為西一區(qū)到西十一區(qū)，往東依次為東一區(qū)到東十一區(qū)，西十二區(qū)和東十二區(qū)重合成為東西十二區(qū)，一共劃分了24個(gè)時(shí)區(qū)，每個(gè)時(shí)區(qū)相差正好是1個(gè)小時(shí)。

北京是東八區(qū)，紐約是西五區(qū)，加州是西八區(qū)。

完整時(shí)區(qū)地圖：

3. 計(jì)算各地的絕對(duì)時(shí)間

東時(shí)區(qū)的時(shí)刻比零時(shí)區(qū)快，西時(shí)區(qū)的時(shí)刻比零時(shí)區(qū)慢，所以東時(shí)區(qū)為正，西時(shí)區(qū)為負(fù)，所有時(shí)間計(jì)算記得轉(zhuǎn)換為毫秒。

let localTime = new Date(absTime + timeZone * 60 * 60 * 1000);

獲取任何時(shí)區(qū)的絕對(duì)時(shí)間的完整核心代碼：

/**
 * timeZone: 東n區(qū)為正，西n區(qū)為負(fù), 單位為小時(shí)
 */
const getFullTimeInfo = (timeZone, country, spliter) => {

  //獲取本地時(shí)間與格林威治時(shí)間的時(shí)間差(注意是分鐘，記得轉(zhuǎn)換)
  const diff = new Date().getTimezoneOffset();

  //根據(jù)本地時(shí)間和時(shí)間差獲得格林威治時(shí)間
  const absTime = new Date().getTime() + diff * 60 * 1000;

  //根據(jù)格林威治時(shí)間和各地時(shí)區(qū)，得到各地時(shí)區(qū)的時(shí)間
  let localTime = new Date(absTime + timeZone * 60 * 60 * 1000)

  return {
    time: formatTime(localTime, spliter)
  };
}

發(fā)布

很快，第一版就完成了。

剛開(kāi)始這個(gè)樣子略丑，有點(diǎn)裸奔的趕腳。不過(guò)第一版最主要是核心功能，簡(jiǎn)陋的界面只是暫時(shí)的。

給當(dāng)?shù)氐呐笥褭z驗(yàn)確定時(shí)間展示正確后，提交代碼、提交審核，2天后收到審核通過(guò)的通知（吐槽騰訊的審核效率