同为Hybird框架，Cordova/PhoneGap和AppCan有啥异同？

Posted 2023-04-01

Cordova：是驱动PhoneGap的核心引擎，和PhoneGap的关系类似于Webkit和Google Chrome。自然的，PhoneGap核心优缺点，也与Cordova密不可分，比如SPA模式（单页面）。目前国内也有基于Cordova引擎的，做了不少优化，比如Wex5，使用了xid、CSS页面域、RequireJS等技术填SPA模式的坑，但个人感觉治标难治本。

AppCan：国内Hybird跨平台的代表，底层技术都是自己研发的，AppCan引擎、AppCan打包编译服务器、AppCan IDE…整套都是AppCan的，体系和适配性比较好,在国内还是很赞的，但是细节稍差，比如文档，普遍感觉不清晰，他们自己也意识到这点，最近的更新勤快了。对开发者免费，对企业收费，体系比较完整，工具、平台、服务都很稳定，总体感觉，稳定实用，但不新潮。

再来说基于两种引擎的开发工具，所表现出的区别：

1.开发模型不同：单页面VS 多窗口。
如上所说，Cordova/PhoneGap 是SPA模式（单页面模式），所有基于Cordova的开发工具也必然是SPA模式，所有的网页都运行在这个窗口当中，这导致Cordova写出来的应用失去了很多native应用的原生特性。这种模式在开发移动应用时需要自行处理各种冲突。例如元素ID冲突，CSS样式冲突、JS变量冲突。即便，有些工具使用了xid、CSS页面域、RequireJS等技术来解决，需要开发人员投入更多精力去处理。比如，使用SPA模型可以降低JS、CSS等资源的加载时间，通过RequireJS等工具实现随用随加载，但是在目前网速下，意义不是很大。单个移动应用界面包含的资源已经很少，这种异步加载也是由于使用了SPA模型后，为解决自身问题所添加的。

AppCan是uexWindow,即多窗口机制对象,是AppCan区别于同类产品的最大特点,对应用底层代码，就是多个webview实现核心引擎的跨平台能力。每个窗口独立存在，可以相互跳转，并且可以指定一个跳转时的过渡动画效果，如此一来，用户体验效果就非常接近native应用了，并且不存在影响效率的问题。通过对操作系统和系统中浏览器引擎底层Webview及其API的封装和扩展，将原本不支持本地功能的html标准，以javascript API接口的形式开放给HTML页面调用，同时提供一套完整的Callback机制，实现HTML页面直接与操作系统底层的交互通信，实现系统与HTML页面的无缝融合。

但是对于SEO，单窗口优于多窗口。AppCan框架主要用于开发移动应用，但也提供能力转换为网站，但这个网站就是B/S的MPA模式了，性能上会比SPA方式差，由于界面也是使用AJAX在前端组装，对SEO支持不够。如果要支持SEO的话，目前在国内还是要进行后端拼装的。

2.UI框架：BOOTSTRAP框架VS 弹性盒子模型
Cordova/PhoneGap采用BOOTSTRAP框架作为界面布局方案。BootStrap作为响应式布局，可以简化网页排版。做到移动应用、PAD、PC浏览器全兼容。但是由于全兼容，库会比较大，尤其在移动端体验和响应不好；其次由于BootStrap使用CSS3的Media Query技术对界面进行排版，这时无法保证最大屏幕显示精度，移动端显示时，会在一些终端出现一定的显示粗糙感。例如边框1个像素，实际显示不是一个像素，造成效果降低。android终端中使用BootStrap框架响应会比较慢。

AppCan 采用弹性盒子模型，专为移动应用、网站进行设计，更加轻量。通过原生适配技术，可以使界面效果与原生应用相同。AppCan采用MPA模型，即多页面模型，单个页面负责单独的事情，开发人员不需要考虑冲突、加卸载、变量隔离等由于采用了SPA所引起的问题。AppCan界面间动画采用原生实现，相比于JS的界面间动画，体验会更好。

3.原生能力:
AppCan采用自主知识产权的引擎，可以提供更多的原生组件能力，又开放了原生插件扩展机制，可以比较灵活的自定义插件扩展架构，方便开发者集成自定义功能到应用开发。尤其是国内特有的各种组件，都进行了商业化的运营维护，例如微信等，扩展性强。引擎中封装的原生插件调用部分代码，支持插件的同步/异步调用，允许插件直接返回值给前端，调用更加简单。
PhoneGap/Corovda在设计时按照SPA模型进行的支持，因此在开发复杂度、体验上都有一定的弱点。而基于Corovda的跨平台工具，需要自行编写原生组件，并且打包会更加复杂。 参考技术A 治疗期间患者要注意休息。特别是要注意精神放松，避免过度紧张、疲劳；避免劳累；注意加强营养，多食富含蛋白质和维生素类食物。
尖锐湿疣患者要勤洗病变局部，保持局部干净、干燥。 参考技术B http://tieba.baidu.com/p/4497783078

Cordova+ionic 开发hybird App --- 开发环境搭建

Cordova 开发hybird App 开发环境搭建

一．一些基础概念：

Ant :

简单说来可以这么理解，如果你用记事本写JAVA程序，然后在cmd里输入javac命令编译它，但是有一天你发现每次手动输入太麻烦而且都是重复劳动，
于是你下决心改变这种状况，然后学会了把javac命令写到一个bat文件中，以后编译只需要单击运行即可；然后随着你敲的代码越来越多，而且有了
JAVA project概念，于是你手动新建了很多文件夹比如src、bin、lib，你有写了一个bat文件来减少你的重复劳动；再后来随着你编码的需求更多，
你对javac命令也了解更多，譬如打包、运行不同的类等等，而且你又学会了用junit，test类源码要和非test源码分开，你的boss要求你把web项目部
署到tomcat下……你看了一下你的屏幕，满满的都是各种各样bat文件，查找起来基本靠记忆，这样不好不好。于是乎ant闪亮登场，从此妈妈再也不
用担心我点错命令了！！废话有点多。ant说白了就是代替各种bat文件来帮助你实现想要的命令（主要是和JAVA编程相关），而且她做得更多效率更好。

Npm: NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
1. 允许用户从NPM服务器下载别人编写的三方包到本地使用。
2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
4.

Nodejs: JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，
NodeJS就是一个解析器。每一种解析器都是一个运行环境，不但允许JS定义各种数据结构，进行各种计算，还允许JS使用运行环境提供的内置对象
和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了document之类的内置对象。而运行在NodeJS中的JS的用途是操作磁
盘文件或搭建HTTP服务器，NodeJS就相应提供了fs、http等内置对象。

Ionic: IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它 提供了很多 UI 组件来帮助开发者开发强大的应用
。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。

SASS:

Cordova/Phonegap:

二．环境搭建：

安装nodejs;

安装jdk 配置环境变量
JAVA_HOME: C:\Program Files\Java\jdk1.8.0_45
CLASSPATH: .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
Path:%JAVA_HOME%\bin;

安装git ;

安装 ant 配置环境变量
ANT_HOME:C:/apache-ant-1.9.6
Path:%ANT_HOME%\bin

安装Android 配置环境变量
用户变量ANDROID_HOME:F:\android-sdk-windows
系统变量PATH:%ANDROID_HOME%\platform-tools; %ANDROID_HOME%\tools;

安装ionic 和 cordova
npm install –g cordova ionic
ionic start app

三．整合crosswalk
ionic browser add crosswalk
如若要移除crosswalk，则需执行：
ionic browser revert crosswalk / ionic browser remove crosswalk