【.com原创稿件】携手APICloud为开发者分享《如何在移动互联网产品中用好HTML5》，并邀请APICLoud技术专家许志峰进行直播分享课。内容涵盖了移动互联网时代产品的整体架构。HTML5ForApp需要功能扩展、渲染优化、开发技巧、跨平台产品选型等。直播间：QQ群312724475内容介绍：1、移动互联网时代产品整体架构2、HTML5ForApp需要的功能展开3.HTML5ForApp需要优化渲染4.HTML5ForApp的一些开发技巧5.HTML5ForApp跨平台产品1.移动互联网时代产品整体架构移动互联网时代产品整体架构，理想的架构是端到端的架构，从客户端到云端。客户端侧重于产品功能、UI展示、用户体验；云提供数据和服务，两者通过开放的API交互，耦合度越来越低。在移动互联网背景下，一个典型产品的系统架构核心应该是API。云端通常需要提供基础数据服务（NoSQL、MySQL等）、系统服务（Redis、消息队列等），聚合第三方开放平台服务（IM、PUSH、支付、LBS等），并通过开放的标准API提供对外服务能力。客户端通常需要包含3个终端，APP端、Web端（即H5端）和微信端（微信公众号）。APP功能全面，满足所有功能需求，但开发周期长，成本高，维护困难；H5网站开发简单，周期短，版本迭代速度快，成本低，但功能相比APP不足；微信公众号其实也是同一个H5，只是运行在一个封闭的微信系统中，比H5有更多的功能限制。2.HTML5ForApp需要功能扩展接下来和大家分享一下如何规避H5的缺点，有效地将H5应用到APP中，实现APP的低成本快速开发。如何最好地将HTML5应用到APP中，我们认为HTML5现阶段还不能直接应用到APP中，需要进行扩展。HTML5现阶段还存在各种不足。HTML5作为一个工业标准，是一个静态标准，迭代速度非常缓慢，远远落后于操作系统和硬件技术的发展。同时，微软、谷歌、苹果等浏览器引擎厂商都是立足于自身，多年形成的业务体系难以维护，短时间内被标准更新所改变，这在HTML5的实际使用中造成了渲染、动画、交互等兼容性问题。同时，HTML5是一个与平台无关的静态标准，基本没有可扩展性（比如接入推送、支持物联网等）。尤其是在移动端，由于硬件设备参差不齐，使用HTML5技术实现的网页产品的功能和体验远不如APP。我们相信通过扩展HTML5原生模块和开放API，可以采用HTML5+原生模块的APP开发模式来弥补HTML5的不足，解决HTML5功能有限，无法扩展的问题。需要扩展的模块包括UI（ListView、scrollPictrue等）、本地设备功能（摄像头、重力感应等）、数据存储（fs、db等）、网络（http、socket、download等）.)、第三方服务（支付宝、微信、融云、机制云等）等。通过封装模块扩展API调用JS，HTML5也可以完全实现原生APP的功能。3、HTML5ForApp需要优化渲染另一方面，为了解决HTML5渲染效率低下的问题，提升用户体验，需要对HTML5渲染进行优化。我们从两个方面介绍HTML5和原生APP的渲染原理。简单介绍一下浏览器引擎是如何渲染一个HTML5页面的。HTML5页面的浏览器渲染通常分为5个步骤：1.从远程或本地获取html。实现最终渲染的布局数据结构4.将布局流推送到渲染硬件（GPU、CPU等）5.在显示设备上绘制最终的html。手机屏幕等APP的界面渲染由系统提供或开发者定义各种视图组件，如ActionButton、TabBar、ImageView等，实现视图组件的布局、定位、图层和区域的划分通过开发者定义的属性，最终显示在设备屏幕上。APICloud将HTML5的渲染和原生APP的渲染结合起来，形成混合渲染机制。APICloudAPP的UI布局由HTML5+原生UI模块组成。既利用了HTML5简单快速的开发能力，又结合了原生UI组件高效的渲染能力，让APP开发过程简单易行，同时功能和体验达到原生效果。4、HTML5ForApp的一些开发技巧下面分享一些在使用HTML5进行APP开发过程中可以有效提升APP性能和用户体验的技巧。充分尊重和利用HTML5的特性。去掉浏览器默认样式（比如输入框的焦点框）；可点击区域应使用div而不是标签；使用语义标签，如页眉、页脚等，有利于代码的可读性和维护性；充分发挥HTML5和CSS3的新特性，如Video标签播放多媒体，如CSS3圆角等。***屏幕适配。每个html页面都必须添加一个视口以适配设备屏幕；UI输出图片大小使用1280×720；图片大小标准适用于2倍图片，即1280/2|720/2；CSS布局应该使用盒子布局来自动适应屏幕。避免使用一些功能庞大且功能齐全的重型JS/CSS框架。您可以在移动优先场景中使用一些简单的框架。建议把适合APP的框架总结封装一下。加速网络数据加载，提升数据交互体验。使用api.ajax实时监控网络状态，合理使用下拉刷新和多加载，适当缓存数据，即使断网也能保证离线数据。明智地使用图像。根据不同场景使用原图和缩略图，减少内存占用；图片大小尽量匹配img标签的宽高属性，减少图片缩放带来的性能损失；可以使用第三方存储来处理图片，比如根据不同的屏幕手机使用不同分辨率的图片。提高点击速度并优化事件响应。响应点击事件的元素应该添加tapmode属性，可以消除HTML5默认的300毫秒延迟；使用扩展手势事件和全局事件来管理响应操作；使用tapmode实现原生APP的点击效果。遵循系统属性。适时更新UI，了解窗口切换与HTML5渲染的关系，避免在窗口动画期间更新HTML5；避免body级别的背景图，使用API??Cloud提供的原生方法高效实现，节省资源和复用；页面间的参数传递要避免过大，控制在几KB以内。五、HTML5ForApp跨平台产品选择HTML5跨平台产品的一些核心要素，引擎性能（是否可以开发原生APP的体验），功能覆盖（是否可以像原生APP一样满足所有需求），开放服务集成（是否支持集成推送、IM、支付、LBS等第三方服务）、扩展机制（使用标准的模块扩展机制）、主流开发工具的支持（尊重开发者的使用习惯，是否可以实现）使用什么HTML5开发工具），学习成本（学习曲线是多少，上手快不快），开发者社区服务（遇到问题能不能得到及时有效的技术支持），生态完整性（比如Cordova，支持并且长期由adobe维护，有开发者贡献代码）。目前市场上主流的盒子平台产品分为两个方向。一种是围绕HTML5，采用HTML5+原生混合模式，典型代表有APICloud、PhoneGap等，开发方便，跨平台；成本高，开发复杂。HTML5在微信开发中的应用：微信是一个运行在移动设备上的独立APP，所以HTML5不仅受到设备性能的限制，还受到微信封闭系统的限制，所以在选择JS/CSS框架时要多加注意考虑一个移动优先的框架。这是APICloud上典型的端到端项目。本项目为Intel的硬共享公社，其他项目主要为Intel在IC领域提供垂直服务。包括服务器+APP+微信+HTML5。其中，APP通过APICloud使用HTML5快速实现，耗时一个月。Q&A1、Q：H5-君-大连：如何将1之前写的APP代码导入APICloudStudio2？A：APICloud-许志峰：直接用APICloudStudio2查出来就可以用了。2.Q：天津-前端-小恐龙：APICloud以后会不会和Vue等MVVM框架集成？A：APICloud-许志峰：嗯，其实现在支持Vue.js了。3、Q：Java-刘飞-南京：如何保证安全？你如何在手机上做到这一点？A：APICloud-许志峰：APP安全，可以使用HTTPS协议，必要时可以进行双向认证。你搜索一下，App双向认证，简单的说就是App内置了一个HTTPS证书，服务器也是一个HTTPS服务器。4、Q：Tianjin-Frontend-LittleDinosaur：直接导入vuejs脚本可以这样用吗？A：APICloud-许志峰：Webpack预编译成.js5，Q：天津-前端-小恐龙：APICloud代码直接转成WebH5有没有相关的方法？如何将App的代码直接转换成Web和H5可以直接使用的东西？A：APICloud-许志峰：样式也可以单独写成CSS。应用程序代码，如果它是非本机模块的一部分，可以直接在网络浏览器中打开。6、Q：天津-前端-小恐龙：APICloud如何实现ajax跨域请求？如果我想把App项目直接转成一套H5，还是需要搭建服务器？A：APICloud-许志峰：Native是直接获取cookie发送请求；如果要在Web上使用，那么服务器本身必须支持跨域访问，而浏览器本身不能跨域访问，如果服务器不允许跨域访问。7、Q：Chengdu-Frontend-芒哥：我的HTML页面在Chrom浏览器中预览是正常的，但是在海马模拟器预览中布局完全乱了。我用的是display:flex的布局，APICloud里的布局样式都是用HTML写的。如果用Postcss处理，有没有方便快捷的方法？A：APICloud-许志峰：应该是你的写法可能不兼容。8、Q：H5-君大连：如何使用方框布局？A：APICloud-许志峰：可以考虑使用PostCSS进行处理。9.Q:Beijing-unicorn-data:接口是RestAPI。有Graphql吗？APICloud-许志峰：APICloudStudio操作说明视频教程可在此观看>>欢迎进群学习：312724475【原创稿件，合作站点转载请注明原作者和出处.com】
