本文是“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类的实例在应用中嵌入网页，交互过程类似。

- 阅读剩余部分 -

“360 AI音箱”即将发布，移动应用也在紧张有序地开发中。本文将介绍“360 AI音箱”移动应用H5部分的实践，主要包括：

• 项目环境搭建
• 与Native交互
• 自定义中文字体
• 表单输入
• Docker部署

360 AI音箱应用H5部分简介

应用主要分4大版块：

1. 内容：音箱可以播放的音乐、故事、有声书等等
2. 技能：运营预配置的音箱指令
3. 场景：用户自定义的音箱指令
4. 我的：用户的智能设备、账号等

其中，“技能”和“场景”版块由H5制作。如下图所示，技能部分主要包括运营后端预配置的指令列表和详情两个页面。

注意：本文图片为“360 AI音箱”版权所有。另外，因为是设计稿截图，应用实际发布后的外观可能会有所不同。

- 阅读剩余部分 -