我曾在本系列第二篇“H5必知必会之像素级还原设计稿”的最后写道：
……读者可能会不由自主地猜测这个系列第三篇的主题是什么？……还有可能会写一写基于某个脚手架快速从头搭建一个H5项目以及实现前端工程化……。
那么，今天我们这一篇的主题就是“快速搭建开发环境”。快速，有多快？答案：取决于你的网速。因为我们真的有这么一个脚手架：qvk。
qvk是一个集成现代前端工程化最佳实践的通用Web开发环境，可用于开发传统C/S架构的Web应用、SPA（单页应用）、H5（App内嵌页）等。
qvk脱胎于多个360前端项目，集成了开源社区中涌现的优秀框架、工具和最佳实践。qvk初始版集成以下Web框架和打包工具。
什么，这里有些新面孔？没关系，不久你就会发现它们都很友好、简单。
本文是“H5必知必会”系列第二篇。在第一篇“H5必知必会之与App交互”（https://lisongfeng.cn/index.php/2019/03/06/mobile-web-development-2-interactive-with-native-app.html）中我们提到过，所谓“H5”本来应该是HTML5的简称。但是，在中国，“H5”并不是HTML5的简称那么简单，它更多地被用于指代内嵌在手机App中的网页。无论国外有没有“H5”这个说法（应该没有），反正在国内只要说到App内嵌的网页或网页应用，你完全可以说它是“H5”。一说“H5”，产品经理、设计师、Android/iOS应用开发者、后端工程师全都明白。
不能不说，这个现象很神奇。也许，在前端行业之外人的眼里，手机屏幕上的网页就应该有一个跟大屏幕上的网页不一样的名字，这样才好区分。事实上，就算是在前端开发行业内，有这么一个词让我们瞬间就可以定位到一种应用形态，至少也是一件非常便利的好事。
那么手机上的网页跟大屏幕上的网页有什么不同呢？
首先，手机上的网页运行在手机浏览器或者App内嵌的WebView中，可以使用手机特有的硬件能力，比如GPS、加速计、陀螺仪等传感器；此外，如果加载了宿主App的JSSDK，还可以访问App暴露给网页的各种能力，比如获取登录用户的信息、拍照上传和分享，等等。
其次，手机上的网页布局设计要服从于原生App的界面（UI）设计规范，比如谷歌的扁平化设计Material Design，苹果的人机界面指南（Human Interface Guide）等；总之，手机上的网页看起来必须像原生App的界面，包括使用与原生App一致的布局组件、字体图标、配色方案，乃至交互模式等，比如要支持触摸而非鼠标点击交互。
最后，手机上的网页，特别是运行于App内的网页，构成混合移动应用的一部分，通常都需要与原生App互操作；需要H5与原生应用双方共同商定基础接口，并针对特定的交互场景确定具体的交互模式，包括单向调用还是双向调用，同步还是异步，如何传递数据和凭据，等等。
上述第三点，正是本系列第一篇文章“H5必知必会之一App交互”讨论的内容，感兴趣的同学稍后可以参考。那么今天，本文要讨论的则是上述第二点，即H5在构造页面布局时，如何逼真、像素级还原设计稿。
标题说的是官网，但实际上本文主要介绍的是展示大图的页面，也就是概述页。为简便起见，本文以下用“官网”代称“360 AI音箱官网概述页”。
这次官网的设计稿是提前4天才开始出的，最后一个页面是上线前一天下午2点给的。总之，时间非常紧，没有充裕的时间去调研多种实现方案。开发中采用了比较保守、兼容性好的技术。
说到大图，就得知道主流显示器的分辨率。京东在销显示器的分辨率如下：
维基百科2019年1月调查结果如下（https://p4.ssl.qhimg.com/t01fff3464ffc757200.png）：
| 标准 | 比例 | 宽度(px) | 高度(px) | 用户(%) |
|---|---|---|---|---|
| nHD | 16:9 | 640 | 360 | 4.26 |
| SVGA | 4:3 | 800 | 600 | 0.42 |
| XGA | 4:3 | 1024 | 768 | 3.29 |
| WXGA | 16:9 | 1280 | 720 | 3.15 |
| WXGA | 16:10 | 1280 | 800 | 3.88 |
| SXGA | 5:4 | 1280 | 1024 | 3.37 |
| HD | ~16:9 | 1360 | 768 | 1.65 |
| HD | ~16:9 | 1366 | 768 | 24.27 |
| WXGA+ | 16:10 | 1440 | 900 | 6.55 |
| 非标 | 16:9 | 1536 | 864 | 5.5 |
| HD+ | 16:9 | 1600 | 900 | 4.81 |
| WSXGA+ | 16:10 | 1680 | 1050 | 2.52 |
| FHD | 16:9 | 1920 | 1080 | 19.20 |
| WUXGA | 16:10 | 1920 | 1200 | 1.20 |
| QWXGA | 16:9 | 2048 | 1152 | 0.46 |
| 非标 | 21:9 | 2560 | 1080 | n/a |
| QHD | 16:9 | 2560 | 1440 | 2.09 |
| 非 | 21:9 | 3440 | 1440 | n/a |
| 4K UHD | 16:9 | 3840 | 2160 | n/a |
也就是说，2560像素及以下宽度屏幕的用户占86%以上。为此，官网所有大图最大宽度为2560像素。
| 图片数 | 25 |
|---|---|
| 大图数 | 15 |
| 页面体积 | 6.8MB |
接下来，本文主要从以下几方面概述官网开发涉及的技术点：
2018年11月26日发表的“360 AI音箱H5开发实践”一文中，曾简单提到“与Native交互”。本文将就此主题深入探讨H5与App交互的几种常见模式。
首先声明，本文涉及的H5与App交互协议和模式没有什么特别独到之处，相反，它们恰恰是在业界既有经验基础上结合项目实际归纳提炼出来的。因此，文中涉及的技术和代码可以看作是行业经验落地的产物，不涉秘，也不是权威做法，仅供业界同仁参考。
本文内容如下：
H5，在中国被专门用来指代开发内嵌于手机应用中的网页的技术，外国好像并没有这个说法。从技术上讲，H5是HTML5即Hyper Text Markup Language（超文本标记语言）第5版的简称。而HTML只是开发网页要用到的多种技术之一。除了HTML，还要用CSS设计界面，用JavaScript实现交互，甚至要用Node.js实现服务端逻辑。为什么H5会被用来笼统地指代这些技术呢？我猜一是因为它简单，二是移动端网页开发技术又恰好需要这么一个概念。
移动端网页运行在手机应用内嵌的浏览器引擎中，这个没有UI的内核容器统称WebView，即iPhone的UIWebView（iOS 2.0–12.0）、WKWebView（iOS 8.0+，macOS 10.10+）和Android的WebView。总之，WebView就是在手机应用中运行和展示网页的界面和接口（神奇的是，英文Interface，既可以翻译成“界面”也可以翻译成“接口”）。
H5与原生应用的交互都是通过原生应用中的WebView实现的。通过这个环境，H5可以调用原生应用注入其中的原生对象的方法，原生应用也可以调用H5暴露在这个环境中的JavaScript对象的方法，从而实现指令与数据的传输。
比如，在Android应用中，WebView类有一个公有方法addJavascriptInterface，签名为：
public void addJavascriptInterface (Object object, String name)调用这个方法可以向WebView中以指定的名称name注入指定的Java对象object。这样，WebView中的JavaScript就可以通过name调用object的方法。比如：
class JsObject {
@JavascriptInterface
public String toString() { return "injectedObject"; }
}
webview.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsObject(), "injectedObject");
webView.loadData("", "text/html", null);
webView.loadUrl("javascript:alert(injectedObject.toString())");在iOS或macOS中，需要通过创建WKWebView类的实例在应用中嵌入网页，交互过程类似。
为什么本地开发要使用HTTPS？
因为有很多Web API必须在HTTPS环境下才可以使用。比如，Clipboard API and events（https://www.w3.org/TR/clipboard-apis）中的navigator.clipboard对象是通过扩展Navigator接口定义的：
partial interface Navigator {
[SecureContext, SameObject] readonly attribute Clipboard clipboard;
};在此，partial的意思就是扩展Navigator接口，给它增加一个Clipboard类型的只读成员属性clipboard。[SecureContext, SameObject]中的两个关键字是“扩展属性”（extended attribute），在这里修饰接口成员clipboard。SecureContext表示`navigator只能在“安全上下文”中暴露clipboard属性，SameObject表示每次访问navigator.clipboard必须都返回相同的值。（参见：https://heycam.github.io/webidl/#SecureContext和https://heycam.github.io/webidl/#SameObject。）
关于“安全上下文”，W3C的Secure Contexts文档（https://w3c.github.io/webappsec-secure-contexts/）中有详细解释。根据MDN，全站HTTPS和通过http://localhost交付的网页是安全的。可以通过window.isSecureContext属性来检测当前上下文是否安全。
if (window.isSecureContext) {
navigator.clipboard.writeText('Write this to clipboard!').then(ok => true, err => false)
}另外还有一个重要原因，就是有时候HTTP的本地请求可能会被HTTPS服务器拒绝。
无论如何，我们在开发实践中都有可能碰到将本地Web服务HTTPS化的需求。这时候，我们可以创建自己私钥并签名一个根证书，并在开发环境中配置安装和信任自己的根证书。然后再通过这个根证书和私钥签发相应域名的SSL证书。
好吧，开始干吧。