360 AI音箱”即将发布，移动应用也在紧张有序地开发中。本文将介绍“360 AI音箱”移动应用H5部分的实践，主要包括：
项目环境搭建
与Native交互
自定义中文字体
表单输入
Docker部署
应用主要分4大版块：
内容：音箱可以播放的音乐、故事、有声书等等
技能：运营预配置的音箱指令
场景：用户自定义的音箱指令
我的：用户的智能设备、账号等
其中，“技能”和“场景”版块由H5制作。如下图所示，技能部分主要包括运营后端预配置的指令列表和详情两个页面。
注意：本文图片为“360 AI音箱”版权所有。另外，因为是设计稿截图，应用实际发布后的外观可能会有所不同。
技能列表和详情主要涉及使用自定义字体：Adobe思源宋体1
场景，其实是用户自定义的技能。场景相对复杂，不仅涉及类似技能的展示，还涉及增、删、改，甚至还有与原生配合的闹钟场景。
前端H5的技术方案有单页SPA、传统B/S架构。考虑到项目涉及使用自定义字体和保存自定义场景的中间结果，所以采用了传统B/S架构，以最大限度避免加载Web字体的FOIT/FOUT2，同时利用服务端缓存。
开发框架：
Webpack：前端编译打包4
项目代码结构如下：
其中，
deploy：是部署脚本和Docker构建脚本所在目录
frontend：是前端资源目录，主要是Webpack编译入口文件、模板文件及JS和CSS资源
runtime：是ThinkJS运行时存放配置等信息目录
src：是服务端源代码目录
view：是服务端模板目录，模板文件由Webpack编译保存过来
www：是服务端静态资源目录，比如Webpack打包后的JS、CSS、图片、字体等
实际项目中的静态资源都使用Webpack插件直接上传CDN，图片也直接引用CDN图片，因此服务端并不保存任何静态文件。
H5与Native共同定义了两个接口，用于双方互相调用。
接口说明：
SpkNativeBridge是iOS和Android实现并注入到WebView中的接口对象
callNative是SpkNativeBridge的方法
参数说明：
action：字符串，希望Native执行的操作
params：JSON对象，要传给Native的数据
whoCare：数值，表示JS希望哪个端响应
0：iOS和Android都响应（默认值）
1：iOS响应
2：Android响应
返回值：具体商定
接口说明：
SpkJSBridage是JS在WebView中实现并暴露的接口对象
callJS是SpkJSBridage的方法
参数说明：
action：字符串，希望JS执行的操作
params：JSON对象，要传给JS的数据
whoAmI：数值，表示哪个端调用的
1：iOS调用的
2：Android调用的
返回值：具体商定
下面通过两个例子来说明H5与Native如何使用上述接口交互。下面这张图是用户创建场景期间退出时原生要弹出确认框的情景：
如图所示，导航条是Native，下面是WebView。导航条上的返回和保存按钮需要H5根据场景内容控制。比如，如上图所示，用户有未保存的内容时点击了返回按钮，H5要告诉Native是否可以返回，还是需要提示。交互过程如下：
Native调用
H5返回值
返回值说明：
can: 布尔值，true 表示可以返回，false 表示需要弹确认框
target: 字符串，"prev" 返回上一级， "top" 返回顶级，"closeweb" 关闭之前的webview
换句话说，用户点击Native的“返回”按钮，Native调用JS的can_back()方法，JS判断是否有未保存内容，如果有则返回上述值，通知Native弹确认框。
除了“返回”，还有“保存”按钮。H5负责控制“保存”按钮是否启用，以及启用之后用户点击调用的方法。具体来说，每次WebView加载后，JS判断是否可以保存，比如上图中场景只有“对音箱说”的部分，没有“音箱的回应”，不能保存，因此H5会调用Native的displayRightButton()方法，告诉Native按钮文字、是否启用，以及启用后用户点击的回调函数：
H5调Native时传参，如果调Andoid则只能传基本数据类型（字符串或数值），不能传JSON对象；iOS则没问题。为此，H5需要判断WebView环境是Android还是iOS，如果是前者，则将JSON对象转换为字符串：
另外，JS方法向Native返回值必须同步返回，虽然Native调用JS是异步调用，但JS如果返回Promise，Native是无法处理的。因此，需要在使用XMLHttpRequest对象时将async参数设置为false：
最后，还有一个“坑”：Android如果未开启WebView的localStorage特性，使用localStorage的H5页面就会“冻结”！
如前所述，“技能”列表和详情都需要用到Adobe开源的“思源宋体”，而且原生闹钟等也会用到该特殊字体：
图中的“玩法介绍”“功能介绍”的标题以及前者的内容都需要使用自定义中文字体。然而，设计师给的开源字体文件有23 MB这么大，包含65000多字符。考虑到技能和闹钟用到这个字体的字符有限，我们决定使用字体截取技术。
经过调研，并且考虑到技能列表需要动态截取，最终我们自建了一个字体服务：奇字库。“奇字库”提供中文字体在线动态截取服务，让字体文件从十几MB瞬间变成十几KB、几KB；基于Adobe和Google共同开发的Web Font Loader6定制了加载脚本，实现了字体加载与应用完全自动化。
目前，“奇字库”囊括了公司所有付费的版权字体，可供公司内部各业务线的各类Web或客户端项目使用：
为获得最佳用户体验，“奇字库”提供了丰富的接口，可满足灵活定制的需求。服务端或浏览器可以通过API调用，动态截取字体。共有两大类共8个API：第一类是获取字体“URL”的，包括上传到CDN的URL和base64格式的Data URL；第二类是获取CSS @font-face规则文本的，包括获取CDN URL和Data URL内容的CSS。
比如，获取字体的CDN URL，API返回结果示例如下：
再比如，获取字体Data URL的CSS @font-face规则，API返回的结果示例如下：
最简单的方式就是在网页里直接复制粘贴代码：
不过因为我们的项目有服务端，所以可以将截取到的字体文件与网页及CSS一起下发到浏览器，从而完全避免FOUT，实现与使用本地字体一样的用户体验。
表单输入的重点，一是组件化输入框，便于添加和删除；二是对用户输入的计数，涉及composition*事件；三是使用debounce，避免过早对用户输入进行计数。
首先，为满足用户输入多条“音箱回应”及自定义占位符文本的需求，输入框使用了contenteditable值为true的div元素：
而且，基于这个元素构建了前端组件：
每次创建这个组件的新实例，就会自动在DOM上添加新的输入框：
其次，是对用度输入的字符数进行计数。此时，要用到三个事件：
keyup：用户触摸软键盘按键后触发
compositionstart：用户调用输入法开始输入一段文字时触发，类似keydown
compositionend：用户选取了最终要输入的文本结束一次输入时触发，比如用户使用拼音或五笔输入法，之前的输入比如“jiang ge gu shi”只是“中间输入”，不会触发这个事件，只有当用户最终选取了“讲个故事”之后才会触发
但是，compositionend不能识别英文的“组词输入”，所以最终还是绑定了keyup事件：
最后，就是使用debounce对用户输入事件做延迟处理：
很多人不清楚debounce和throttle的区别。
debounce是在某事件至少停止触发多长时间后执行，比如上面的inputHandler会在我们注册的事件（keyup compositionend）至少间隔300毫秒才会触发
throttle是针对连续密集触发的一系列事件，比如scroll或resize，将它们“节流”为均匀地每过多长时间才触发一次。
这里使用debounce包装实际的处理程序，是为了避免过早地在用户输入期间对输入进行计数。
容器部署的优点是多机房灾备，某机房因切割或服务下架而停服，都不会影响线上服务。容器部署用到的是360云平台的容器相关服务Stark。
Docke部署流程如下：
本地构建Docker镜像
上传到Stark
修改容器镜像
重启服务
关于使用Docker，主要看看官方的Get Started和Dockerfile相关文档即可
Get Started7
Dockerfile reference8
本文又是一篇“急就章”，大略介绍了360 AI音箱H5开发过程中的一些基本实践，希望可以为同行提供一些参考和借鉴，也欢迎大家批评指正。另外，开发过程中还有一些涉及算法的有意思的技术点，同样值得分享，等项目上线之后有时间了再分享吧。
做移动端H5开发时，最头疼的莫过于适配问题——同样的页面在iPhone 12上显示正常，到了安卓大屏手机上就布局错乱，字体要么太大要么太小。曾经试过用百分比布局，结果元素比例失调；后来用媒体查询，代码越写越臃肿。直到掌握了「viewport + rem」的组合方案，才真正实现了一套代码适配各种移动设备。本文结合实际项目经验，分享这套适配方案的具体实现，从原理到代码再到踩坑记录，帮你彻底搞定移动端适
H5视频自动播放
360 AI音箱官网开发手记标题说的是官网，但实际上本文主要介绍的是展示大图的页面，也就是概述页。为简便起见，本文以下用“官网”代称“360 AI音箱官网概述页”。这次官网的设计稿是提前4天才开始出的，最后一个页面是上线前一天下午2点给的。总之，时间非常紧，没有充裕的时间去调研多种实现方案。开发中采用了比较保守、兼容性好的技术。基本数据说到大图，就得知道主流显示器的分辨率。京东在销显示器的分辨率如
# iOS 开发 H5 应用指南在现代移动开发中，将 H5 应用嵌入 iOS 是一种常见的需求。本文将为你提供一个完整的流程，帮助你实现这一目标。## 流程概述以下是实现 iOS 开发 H5 应用的步骤：```mermaidflowchart TD A[了解需求] --> B[创建项目] B --> C[添加 WebView] C --> D[加载 H5
# Android开发与H5结合在移动应用开发中，Android平台作为目前最流行的移动操作系统之一，其应用市场上涵盖了各种各样的应用程序。而H5技术则是一种基于HTML、CSS和JavaScript的开发技术，可以在各种平台上实现网页的内容展示和交互。Android开发与H5结合，可以实现更加丰富多样的功能和体验，为用户带来更好的应用体验。## Android开发中使用H5在Andr
一、Html5手机站开发概述 Html5app开发就是HTML5开发语言制作的移动手机网站。移动站点顾名思义，就是指一切用移动终端访问的网络站点（通常指网站），像通常用的手机、PAD（平板电脑）等都属于移动终端。传统常会称呼移动站点为wap网站即手机网页站。 HTML5是一门网页前端开发技术，经历过
文章目录前言一、移动端屏幕相关概念1. 屏幕尺寸2. 屏幕分辨率3. 屏幕像素密度（ppi = pixels per inch）二、像素1. 物理像素2. CSS像素3. 设备独立像素4. 位图像素5. 像素比 （dpr）三、视口1. 布局视口2. 视觉视口3. 理想视口三、缩放行为1. 用户缩放2. 系统总结 前言随着移动端H5需求场景越来越多，例如微信公众号中H5页面的开发，APP中内嵌H5
H5教程一、H5 的含义二、原生应用2.1 概念2.2 优点2.3 缺点三、Web 应用3.1 概念3.2 优点和缺点3.3 PWA四、混合应用4.1 概念4.2 API Bridge4.3 优点4.4 缺点4.5 小程序五. 手机App的技术栈5.1 原生 App 技术栈5.2 混合 App 技术栈5.3 跨平台 App 技术栈六. WebView 控件七. 原生技术栈7.1 Xcode7.2
使用H5搭建webapp主页面前言：在一个h5和微信小程序火热的时代，作为安卓程序员也得涉略一下h5了，不然就要落后了，据说在简历上可以加分哦，如果没有html和css和js基础的朋友，可以自行先学习一下，很简单的。推荐0基础能力一般的，我建议可以看传智播客的韩顺平老师的视频或者毕向东老师的视频，能力强的同学可以在w3c文档自学。主页面搭建 思路分析： Meta标签中的ViewPort属性：Vie
此次读书日活动功能主要是：五个问题对应五个动画交互页面，答完5道题之后展示一段视频（随机从书架上抽出一本书的动画效果），随后进入结果页面。在结果页需要做站内站外的分享交互，将结果页面利用html2canvas转成图片，再将图片分享到各个平台。 开发过程中遇到的问题如下：***html2canvas转apng资源元素异常***通过image标签使用的apng动画，当它播放完成之后，再使用h
Day1:H5深入学习课程-HTML+CSS3 -->简单，杂而多，多测试多项目-JS/JQ -->原生Js ->JQ ->项目-Ajax -->PHP/原生Ajax+JQ-Ajax->项目-H5 –>移动端（IOS，Android，WebApp，微信）->移动端项目h5中标签的分类主要有 （JS中称为结点也称为元素）块标签：骨架内联标签（
HTML是网页的核心，学好HTML是成为Web开发人员的基本条件。HTML很容易学习的，但也很容易误用，要学精还得费点功夫。随着HTML5的发展和普及，了解HTML5也将成为Web开发人员的必修课。涉及到网页外观时，就需要学习CSS了，它可以帮你把网页做得更美观。利用HTML和CSS模拟一些你所见过的网站的排版和布局（色彩，图片，文字样式等等）。第二步：学习javascript,了解DOMJava
很多人再开发一款APP的时候，H5开发相对来说比较便宜一点，原生APP开发则费用较高。那么到底H5跟原生开发有什么区别呢，我们来了解一下两种开发的区别在哪里！H5,指的是HTML5，很多人都认为他是一种技术。在做网络开发时，都会问有没有做H5，但其实并不是一项技术，而是一项标准，其中所包含的技术主要有页面素材预加载技术，音乐加载播放技术，可以滑动的页面，可以涂抹擦除，有动态的文字和图片，可以填表报
HTML5是现在最热门的技术之一，Android自带的WebKit浏览器对于HTML5有着不错的支持<wbr>，而各种浏览器的最新版本都开始普遍的支持HTML5。使用HTML5开发手机应用的主要好处有两个：一个<wbr>是应用可以跨平台，包括不同的手机平台和PC；二是可以从服务器下载应用的内容，但是不依赖于后台Serv<wbr>er也可以运行，可以把Web应用和
APP的和H5配合的混合开发模式已经是注流，那么在开发H5移动端的时候我们应该怎么做？而且做出来的产品是怎么适配个个不同的设备资源的？首先做移动端页面时引入的meta标签，这里的个个参数都是什么意思，这个就不在这里详细说了，网上也有相应的资料可查看，这里主要说下引入适配的方案。<meta name="viewport" content="width=device-width, height=
通配符、管道、重定向 通配符 文件通配符可以用来匹配符合条件的多个文件名称，方便批量管理文件，通配符采用特定的符号，表示特定的含义，此特定符号称为元meta字符 常见的通配符 元字符 含义 ~ 当前用户家目录路径 ~用户名 指定用户家目录路径 - 上一个工作目录路径 . 当前工作目录路径 * 匹配零 ...
首先—创建你的后台服务 在开始编写你的app前，你首先要做的是创建你的Parse后台，每个开发人员和每个app都需要一个不同的标识，否则你的数据和账号会和别人的混淆，虽然这会带来一些有趣的副作用，但是你应该使你的数据和别人的区别开来。 第一步就是访问Par
写此文，主要是为了记录自己的学习和使用心得。记录的恰到好处，方便他人。记录的平庸枯燥，谨此笔记。注：本文是以TFS 2013 express版本为例，因为此版本为免费版本。 最多可供5个用户使用。更大的团队可使用 Visual Studio Team Foundation Server 2013。(一).Microsoft Visual Studio Team Foundation Se
一、《文章管理系统》需求规格说明书系统概述1.1 产品背景随着信息爆炸式增长，个人及小型团队（如学生、博主、小型团队）需要一种高效、智能的工具来管理日益增多的文章与知识笔记。现有工具或过于简单（缺乏深度组织能力），或过于复杂（如一些大型内容管理系统）。本项目旨在开发一个极简、智能、互联的文章管理系统，帮助用户轻松管理、检索和连接自己的知识资产。1.2 系统描述本系统是一个轻量级的文章管理系统
文件同步SymmetricDS不仅支持数据库表的同步，而且还支持文件和文件夹从一个节点到另一节点的同步。6.7.1。文件同步概述文件同步功能包括：监视一个或多个文件系统目录位置的文件和文件夹更改支持同步与源目录不同的目标目录使用通配符表达式来“包含”或“排除”文件选择是否递归到受监视目录的子文件夹使用现有的SymmetricDS路由器基于文件和目录元数据对目标节点进行子集化能够指定在创