想一个好的工具型应用的点子非常不容易，有了点子以后会发现，在各个平台实现，满足各个平台的用户更是意见困难的事情。可能需要在Android设备上小试牛刀，发觉反响不错，再接入iOS设备和PC平台。这样带来巨大的移植成本和用户体验的不一致。懒惰而又聪明的程序员们不断的思考，通过框架的使用，使得开发一次，全平台运行成为可能。本文介绍两种常用的跨平台研发框架Cordova和Electron，全部基于HTML、CSS和JS进行研发。
当下最流行的莫过于移动App，而移动App又可分为三种：原生应用、Web应用和混合型应用。
原生应用
通过各种应用市场安装，采用平台特定语言开发；
提供最佳的用户体验、最优质的用户界面和最华丽的交互，节省网络成本。
但是移植麻烦，维护成本高，需要通过应用市场发布；
Web应用
通过浏览器访问，采用Web技术开发。
开发适配成本低，可跨平台和终端，迭代无需重复安装App。
但是体验不及原生，尤其是断网的情况下不能离线，处理本地文件系统的能力比较弱；
混合型应用
通过各种应用市场安装，部分使用WebView读取网页展示。它虽然看上去是一个原生应用，但里面访问的实际上是一个Web应用。
混合型应用是以上两者混合的产物，弥补了上面两种应用开发模式的缺陷而生，并且尽可能继承了双方的优势。
Web前端工程师可以接入移动客户端、桌面应用的研发，模糊了工程师分工的界限。
移植性好，一次开发，多平台可用，提升研发效率，降低维护成本。可通过JS调用本地方法，弥补Web应用体验上的不足；
如此看来，前端工程师的前途一片大好，可以跨入应用开发领域，而且是企业降低成本，提升效率的不错选择。下面我们就来看看两种当下流行的跨平台框架吧。
Cordova简介
Cordova的前身就是PhoneGap，PhoneGap将核心代码抽出，作为开源项目，贡献给了Apache。
Cordova（工具）将html, css, js变成app，它不会把前端页面变成native的Obj-C或者Java代码，生成原生的App，而是以网页形式呈现，在Android的WebView或iOS的UIWebView中渲染的。Cordova提供众多API，在网页中使用js去访问应用原生的方法。可以用一套代码，在Android和iOS设备，以及Web上运行。
Cordova安装及使用
官方地址：https://cordova.apache.org/
Installing Cordova
需要安装Node.js，https://nodejs.org/，里面附带npm。
安装完Node.js以后，运行命令行：
$sudo npm install -g cordova
Create a project
$ cordova create MyFirstApp
- hooks：存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook，比如：before_build、after_build
- platforms：平台目录，各自的平台代码就放在这里，可以放一下平台专属的代码
- plugins：Cordova插件目录，安装的插件会放在这里，cordova提供的原生API也是以插件的形式提供的
- www：源代码目录。在cordova prepare的时候会被copy到各个平台工程的assets\www目录中
- config.xml：主要是cordova的一些配置，比如：项目使用了哪些插件、应用图标icon和启动页面
Add a platform
$ cd MyFirstApp
$ cordova platform
$ cordova platform add android
$ cordova platform add broswer
$ cordova platform add ios
Add plugins
用于访问OS的Native方法，操作硬件，如照相机、陀螺仪、照片文档和设备位置等，可以按需添加，Cordova官网有插件库，可自行查阅，这里举几个常用的：
获取设备基本信息
$ cordova plugin add org.apache.cordova.device
获取相机和媒体文件
$ cordova plugin add org.apache.cordova.camera
$ cordova plugin add org.apache.cordova.media-capture
$ cordova plugin add org.apache.cordova.media
获取网络连接状态
$ cordova plugin add org.apache.cordova.network-information
获取设备电池状态
$ cordova plugin add org.apache.cordova.battery-status
Run your app
$ cordova run <platform name>
Web APP
是各个平台的运行框架，提供相应平台的入口，通过启动类似WebView的控件，将入口文件index.html渲染出来，可以打包成对应的App，在各大应用市场分发。
WebView
Cordova启用的WebView可以给应用提供完整用户访问界面。在一些平台中，他也可以作为一个组件给大的、混合应用，这些应用混合和Webview和原生的应用组件。
Cordova Plugins
插件是Cordova生态系统的重要组成部分，提供了Cordova和原生组件相互通信的接口并绑定到了标准的设备API上，开发者可以通过JavaScript调用原生代码。
Electron简介
Electron也是一款使用JS、HTML、CSS做为编写言的应用开发框架，相比Cordova，Electron更侧重于Windows、MacOS和Linux系统，在这三个系统之上，一般称之为桌面应用，一次研发，各平台运用；将“Chromium”和“Node.js”做了非常好的集成，把网页包装成一个桌面端；
Electron安装及使用
官方网站：https://electronjs.org/
Github：https://github.com/electron/electron
好多常见应用，都是使用Electron进行跨平台研发的；
使用npm安装Electron库
感觉Electron官网适合有一定开发基础的工程师看，这里提供一个quick start的源码：
https://github.com/electron/electron-quick-start
这就初始化好了一个Electron的基本纯净项目，可以在上边修改，实现自己的项目；
克隆到本地以后，在工程目录下运行命令：
$ npm install
$ npm start
剩下的就交给前端工程师们自由发挥了。
Electron 应用结构
主要分为主进程和渲染进程
Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。
由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。
在普通的浏览器中，web页面通常在一个沙盒环境中运行，不能去接触原生的资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。
主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
主进程管理所有的web页面和它们对应的渲染进程。 每个渲染进程都是独立的，它只关心它所运行的 web 页面。
在页面中调用与 GUI 相关的原生 API 是不被允许的，因为在 web 页面里操作原生的 GUI 资源是非常危险的，而且容易造成资源泄露。 如果你想在 web 页面里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。
使用Electron的API
Electron在主进程和渲染进程中提供了大量API去帮助开发桌面应用程序， 在主进程和渲染进程中，你可以通过require的方式将其包含在模块中以此，获取Electron的API
const electron = require('electron')
所有Electron的API都被指派给一种进程类型。 许多API只能在主进程中调用，有些API又只能在渲染进程中调用，又有一些主进程和渲染进程中都可以使用。 每一个API的文档都将说明可以在哪种进程中使用该API。
Electron中的窗口是使用BrowserWindow类型创建的一个实例， 它只能在主进程中使用。
// 这样写在主进程会有用，但是在渲染进程中会提示'未定义'
const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
因为进程之间的通信是被允许的, 所以渲染进程可以调用主进程来执行任务。 Electron通过remote模块暴露一些通常只能在主进程中获取到的API。 为了在渲染进程中创建一个BrowserWindow的实例，我们通常使用remote模块为中间件：
//这样写在渲染进程中时行得通的，但是在主进程中是'未定义'
const { remote } = require('electron')
const { BrowserWindow } = remote
const win = new BrowserWindow()
使用Node.js的API
Electron同时在主进程和渲染进程中对Node.js 暴露了所有的接口。 这里有两个重要的定义：
1)所有在Node.js可以使用的API，在Electron中同样可以使用。 在Electron中调用如下代码是有用的：
const fs = require('fs')
const root = fs.readdirSync('/')
// 这会打印出磁盘根级别的所有文件
// 同时包含'/'和'C:\'。
console.log(root)
注意，尝试加载远程内容， 这会带来重要的安全隐患。
2)你可以在你的应用程序中使用Node.js的模块。 选择您最喜欢的npm模块。npm提供了目前世界上最大的开源代码库，那里包含良好的维护、经过测试的代码，提供给服务器应用程序的特色功能也提供给Electron。
例如，在你的应用程序中要使用官方的AWS SDK，你需要首先安装它的依赖：
npm install --save aws-sdk
然后在你的Electron应用中，通过require引入并使用该模块，就像构建Node.js应用程序那样：
// 准备好被使用的S3 client模块
const S3 = require('aws-sdk/clients/s3')
注意：原生Node.js模块 需要在编译后才能和Electron一起使用。
应对AppStore的审核策略
使用跨平台工具研发的App，不是很容易通过苹果公司AppStore的审核，但是只要使用得当，上线是不成问题的，注意一下几点：
- 1、要给用户带来流畅的体验，不要明显感觉出来在加载网页，要感觉在App中；
- 2、符合苹果的UI要求，界面要简洁美观；
- 3、不要大面积、多功能的使用混合开发，比如不能除了入口，都是Web，这样审核员会认为内容不可控而不通过；
- 4、运气！你懂的！
