小程序模板网

开发一个时间小程序

2020-05-15 白天寿

前言

跟异国他乡的朋友们微信聊天的时候,经常面临时差的问题。我每次想要确定对方现在是几点,总是要口算一下,有时忘记具体时差,或者涉及跨天,还得打开浏览器查一下,很不方便。有什么方法可以把朋友们所在城市的时间集中起来随时供自己查看呢?于是想到了微信小程序。找了找市面上的时间小程序,不是功能太杂就是小广告太多,不满意。

为什么不自己动手量身打造一个呢?

行动起来。

首先快速明确需求

很简单:

  1. 需要展示时间的城市初定:加州、纽约,再加北京做对比
  2. 需要显示具体的时分秒,和年月日
  3. 需要实时变化
  4. 在其他国家也能正确展示时间

然后创建项目开撸

怎么创建和前期的准备就不在这里展开了,相信不少人都熟悉。如果不熟悉小程序开发的可以参考官网 或者我的另一篇文章如何开发微信小程序 ,上面有对如何开发小程序的简明扼要的的介绍。

关键逻辑

这个小程序的核心是时间的处理。如何得到其他地区的时刻信息?

这还不简单?
先获取本地时刻,然后加上或者减去另外一个地点与国内(北京时间)的时差(小时),最多再处理一下跨天的情况,不就得到其他地点的时刻了?

我一开始也是这么想的,做完觉得还挺美,准备提交的时候,突然意识到问题:我时差全是基于北京时间计算的,换在其他国家访问,获取的本地时间已经不是北京时间了,时差应该变才对,写死了时差可还行?!发布一个只能在国内使用的鸡肋时间工具,可不是我的风格!

捣鼓一阵,新方案出炉:

  1. 想办法获得零时区的时间
  2. 获取不同地区与零时区的时差(时区)
  3. 用零时区的时间加减与零时区的时差(时区),得到各地的绝对时间

1. 获得零时区的时间

零时区,也叫中时区,位于英国格林威治本初子午线上。该时区的地方时,叫做格林威治时间,也叫世界时。

我们不能直接获得格林威治时间,但是我们可以获得本地与格林威治的时间差:

const diff = new Date().getTimezoneOffset() // 单位为分钟

然后根据本地时间和时间差获得格林威治时间:

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

2. 查询各地时区

格林威治本初子午线将地球划分为东西两个半球,格林威治本初子午线为零时区,往西依次为西一区到西十一区,往东依次为东一区到东十一区,西十二区和东十二区重合成为东西十二区,一共划分了24个时区,每个时区相差正好是1个小时。

北京是东八区,纽约是西五区,加州是西八区。

完整时区地图:

 

开发一个时间小程序(图1)

3. 计算各地的绝对时间

东时区的时刻比零时区快,西时区的时刻比零时区慢,所以东时区为正,西时区为负,所有时间计算记得转换为毫秒。

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

获取任何时区的绝对时间的完整核心代码:

/**
 * timeZone: 东n区为正,西n区为负, 单位为小时
 */
const getFullTimeInfo = (timeZone, country, spliter) => {

  //获取本地时间与格林威治时间的时间差(注意是分钟,记得转换)
  const diff = new Date().getTimezoneOffset();

  //根据本地时间和时间差获得格林威治时间
  const absTime = new Date().getTime() + diff * 60 * 1000;

  //根据格林威治时间和各地时区,得到各地时区的时间
  let localTime = new Date(absTime + timeZone * 60 * 60 * 1000)

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

发布

很快,第一版就完成了。

 

开发一个时间小程序(图2)

刚开始这个样子略丑,有点裸奔的赶脚。不过第一版最主要是核心功能,简陋的界面只是暂时的。

给当地的朋友检验确定时间展示正确后,提交代码、提交审核,2天后收到审核通过的通知(吐槽腾讯的审核效率



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/25188.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询