AppCan VS PhoneGap - 对比两大移动开发平台
?

这个demo要做的是三个UI，第一个就两个按钮，第二个是展示内容用的，内容有3w多字。第三个ui是一个网络跨域获取数据的例子。?
第一个ui，由于是只有两个按钮，只用一个index.html，利用AppCan IDE选择按钮控件，生成代码并利用AppCan IDE中自带的模拟器查看效果：?

?

第二个UI：即内容展示页，展示的内容有3W多字，由于内容区域需要用到滚动条，因此可以用到浮动窗口。即two.html是展示头部，内容区域，底部，其中内容区域只是一个div，并没有内容。而index_content.html是显示内容用的，放到一个浮动窗口中去加载，并且此浮动窗口盖到two.html那个窗口中，大小正好和内容区域div一样。这里为什么说在有滚动条的情况下，要用浮动窗口替代呢。因为css的position:fixed在android2.2版本，ios5中才开始支持，并且ios5中还会存在问题，因此如果一个页面布局想要头部，底部固定，中间区域带滚动条的，将会出现问题。AppCan可以很好的借助native的方式解决了此问题。?

?

第三个UI：是为了测试下jquery的$.getJSON跨域异步请求方法，以及AppCan的uexXmlHttpMgr这个方法的响应速度，经过测试，两种方式相差无几。需要提的是uexXmlHttpMgr还有比较强大的功能，不在本文讨论范围之内。?

AppCan打包?

上述三个UI做好之后，直接用AppCan IDE中打包即可：?

?


JqueryMobile开发?

根据jquerymobile官网上例子，搭建上述三个UI的类似代码（文字内容部分删掉了）：?

??


phonegap打成安装包?

把写好的网页包放到android原生开发环境下，通过android原生环境生成安装包的方式生成：?
?

?

对比

通过这个小demo，我们总结下phonegap和appcan的异同点。

相同点：?

• 都是用html+css+js技术区实现此demo的ui，ue部分
• 都能生成安装包

  
  不同点：?

  • phonegap负责打包（此demo没有用到本地API），jquerymobile负责页面UI、UE；AppCan两者都提供，且打包无需native开发环境。
  • jquerymobile方案中，所有的page都在一个html页面中。AppCan方案中，不同的page可以放到不同的html中，甚至更灵活的，同一个page中的内容区域可以用单独的html来展示。
  • 生成安装包大小，phonegap比较小，appcan比较大。这是因为appcan带了android，ios的启动图片。以及里面一些native插件需要的一些图片资源。

    
    附件给出两个安装包以及两个网页包的代码:?
    ?点击此处?