本文是“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点给的。总之，时间非常紧，没有充裕的时间去调研多种实现方案。开发中采用了比较保守、兼容性好的技术。

基本数据

说到大图，就得知道主流显示器的分辨率。京东在销显示器的分辨率如下：

• 3840×2160
• 3840×1080
• 3440×1440
• 2560×1440
• 2560×1080
• 1920×1200
• 1920×1080

维基百科2019年1月调查结果如下（https://p4.ssl.qhimg.com/t01fff3464ffc757200.png）：

也就是说，2560像素及以下宽度屏幕的用户占86%以上。为此，官网所有大图最大宽度为2560像素。

接下来，本文主要从以下几方面概述官网开发涉及的技术点：

• 呈现大图
• 弹性文字
• HTML结构
• CSS布局
• 自定义字体
• 固定页脚

- 阅读剩余部分 -

2018年11月26日发表的“360 AI音箱H5开发实践”一文中，曾简单提到“与Native交互”。本文将就此主题深入探讨H5与App交互的几种常见模式。

首先声明，本文涉及的H5与App交互协议和模式没有什么特别独到之处，相反，它们恰恰是在业界既有经验基础上结合项目实际归纳提炼出来的。因此，文中涉及的技术和代码可以看作是行业经验落地的产物，不涉秘，也不是权威做法，仅供业界同仁参考。

本文内容如下：

• 概述
• 基础接口
• 单向调用
• 双向调用
• 实现模式
• 哪方主导

1. 概述

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证书。

好吧，开始干吧。

- 阅读剩余部分 -

如果我问：你知道“剪贴板”（clipboard）吗？

恐怕没人不知道。我们每天都不知道自己要在电脑或手机上“复制”、“粘贴”多少回。每次“复制”、“粘贴”的背后，都会用到“剪贴板”。

根据“维基百科”：

The clipboard is a data buffer used for short-term data storage and/or data transfer between documents or applications used by cut, copy and paste operations and provided by the operating system.

翻译一下：

剪贴板是一种数据缓存，用于文档或应用间短期数据的存储/转移，在用户执行剪切、复制和粘贴操作时会用到，由操作系统提供。

这里最重要的一点在于，“剪贴板”是“由操作系统提供”的，因此它是系统级的一个软件特性。

对于前端开发者来说，如果我问：你知道怎么操作“剪贴板”吗？

很多人的第一反应可能是：使用clipboard.js吧……

clipboard.js的原理

clipboard.js（https://clipboardjs.com/）是在Github上有24000多个星，其流行程度可见一斑。关于这个库的用法，大家可以自己去看，我们这里主要分析其实现原理，以便了解目前操作剪贴板的主流技术。

简单来说，clipboard.js利用了两个已有的Web API（前者属于HTML5，后者属于HTML Editing API）：

• HTMLInputElement.select()
• document.execCommand()

相应地，原理也只有两步。

- 阅读剩余部分 -