逗比全栈师跟你聊聊 Hybrid APP 和 HTML5 那些事儿
Hugo
Full-stack Developer
12人收藏 5780次学习

逗比全栈师跟你聊聊 Hybrid APP 和 HTML5 那些事儿

翻译:1KE主编 沙丁鱼

如需转载请联系1KE市场部 shuang@1ke.co

温馨提示:附赠原版英文ppt看逗比geek打滚卖萌,结尾有惊喜!

Hybrid HTML5 揭露真身

被炒得那么火的H5 Hybrid App 到底是个啥玩意儿?简单说来就是通过原生OS API 接口把浏览器端的H5注入到原生app中两者相结合。

那么,要搭建H5混合应用,从移动端来讲需要配置原生OS API 接口、插件接口、硬件接口、摄像头/GPS/振动等等,从电脑方面来讲需配备全文件系统访问接口、NPM包管理、Shell接口、交互功能等。

当你开始开发H5 Hybrid App时,看似有着很多选择:

但实际上归根结底,Apache Cordova才是一切的基础:

Cordova是什么呢?Cordova是贡献给Apache后的开源项目,是从PhoneGap中抽出的核心代码,也是驱动PhoneGap的核心引擎。

想要玩的酷,巧用插件是必不可少的,省时省力又能做出高大上的东西岂不是一举两得!

移动堆栈的工作原理

下图是H5 Hybrid 和本地堆栈架构的对比图。

而且H5 Hybrid这种架构在各种设备上都是通用的,Nexus,iPhone,Lumia等:

那么我们在上一节中提到的那些PhoneGap啊Ionic啊什么的又是做什么的呢?用处多了,他们可以提供:控制台工具、IDE、手机UI框架、云服务器搭建、CI调用、丰富的插件、甚至是快速上传app store的功能……

H5常用UI框架

大家一定都对高端洋气的UI趋之若鹜,下面就来重点介绍一下应用于Hybrid App的一些炙手可热的UI框架明星款。

牛逼的移动端UI都有这样一些特点:外表美美哒!流畅自然的体验,易用性(包括用户和开发人员),SPA(单页应用设计),丰富的UI组件,跨设备兼容性。

ionic和ngCordova这对绝世组合,一定会帮你赢得妥妥的!介绍不完的优势,随便举几个:超棒的技术文档,出色的JavaScrpit库,大量的CSS组件,基于Angular JS的搭建环境,ngCordova可以使得Angular平台上能够更有效地使用Corvoda插件……

开发出一个成功H5 Hybrid app的关键点包括以下四条:

代码演示

OK,到了这里不来点代码怎么行。

首先要为我们的目标平台安装SDK,就是大家熟悉的这两只:

node.js可以从官网上下到:nodejs.org

用下述命令语句安装Cordova和ionic:

$ npm install -g cordova
$ npm install -g ionic

通常开发的工作流程包括:搭框架→写代码→试运行→调试(如图)。

Scaffolding

$ inoic start myApp tabs
$ ionic platform add ios

或者

$ ionic platform add android

安装插件举例:

$ cordova plugin add org.apache.cordova.camera

更多插件访问:http://plugins.cordova.io/

以下就是你的架构目录图:

试运行

1. 在模拟器上运行:

$ ionic emulate ios

或者

$ ionic emulate android

2. 在移动设备运行:

$ ionic run ios

或者

$ ionic run android

3. 在浏览器中运行:

$ ionic server

代码调试

安卓端:

$ adb logcat
$ adb logcat "CordovaLog:D *:S"

安卓Chrome浏览器:

  • Android 4.4+
chrome://inspect/
  • 更早版本:
https://www.jshybugger.com

iOS Safari:

$ default write com.appSafarile.Safarisafari IncludeDebugMenu 1

找一个移动设备或者模拟器开始Debug吧!

英文ppt(未删减版)

手机用户请点击:slides.com/ke1ke/deck

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
标签:
HTML5 Ionic Hybrid APP