PhoneGap+SAPUI5搭建本地应用（Android平台）

最新推荐文章于 2024-09-23 10:06:14 发布

mdifferent

最新推荐文章于 2024-09-23 10:06:14 发布

阅读量2.8k

点赞数

分类专栏：移动终端开发 SAP 文章标签： phonegap sapui5 android平台

本文链接：https://blog.csdn.net/mdifferent/article/details/16806181

版权

移动终端开发同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

SAP

2 篇文章 0 订阅

订阅专栏

一直想尝试一下使用PhoneGap来搭建本地程序，正好之前开发的smart app是基于SAPUI5的，SAPUI5提供了独立的js包，可以导入到PhongGap工程中，这样就可以使用UI5的各种控件了，顺便一提UI5也包括了JQuery。

搭建环境的过程比想象中的要复杂，折腾了两天才搞定，主要是百度到的教程大多已经过期，官网文档的结构有点混乱，所以特此把慢慢摸索的过程记录下来。

PhoneGap环境的搭建

PhoneGap现在最新的是3.1，被Adobe收购后交给Apache管理，更名为cordova，所以你看到的很多命名都会有cordova的字样。

到目前为止主要有两种搭建环境的方式：

(1) 官方主推的命令行模式

首先要安装NodeJS，这一步按照NodeJS官网的流程走就可以。
然后是用NodeJS的npm工具安装PhoneGap:
```
npm install -g phonegap
```
或者是
```
npm install -g cordova
```
安装完成后可以用phonegap命令或者是cordova命令加 -version来看一下版本号，能输出的话说明安装成功。
之后就可以用phonegap命令或者是cordova命令创建项目了，这里以cordova为准。
这里需要说明一下，开发应用还有几个环境要求：
- JDK自然是不用说了，还有对应的环境变量CLASSPATH、JAVA_HOME以及PATH下面的路径。
- Android SDK：PhoneGap官网给出的解释是支持2.2、2.3、4.x，不过后面还有一句 “As a general rule, platforms are deprecated as they dip below 5% on Google's distribution dashboard.” 根据我的安装过程来看，现在已经无视我安装的2.2，直接开始寻找4.2.2, 当时我机器上恰好没有4.2，但是有4.3结果他不认，我又去下了4.2才过（果然现在安卓开发都已经以4.x为主了么）。还有要在环境变量里配置好platform-tools和tools两个文件夹的路径。
- Ant：这个直接下载就行，同样也要在环境变量里添加ANT_HOME以及在PATH里配置好bin目录，然后在cmd里ant一下看看配置好了没有。

(2) 上一代的下载模式（绿色）

这种方式的话直接在http://phonegap.com/install/下载下面的Archives就行，不过需要注意一点：

2.8.0及以前的版本下载后是直接有jar包的，导入到项目工程里就可以了，所以这种情况下不需要安装ant。
2.9.0开始没有现成的jar包提供，需要自己编译源代码，这种情况也需要事先配置好Ant。我是这样编译源码的：
- 源代码在解压后的lib\android\framework目录下，打开后你可以看到AndroidManifest.xml文件，说明这可能是一个Android工程，在Eclipse里面新建一个Android工程，要选“Android Project from Existing code”，然后找到lib\android\framework目录下就可以新建出一个项目。
- 如果项目文件夹上有红叹号的话需要设置一下Android SDK的版本，右击项目选Properties->Android就可以修改导入的SDK包，这里还是要选4.2的。
- 然后直接Build这个工程，如果报错的话就把项目clean一下再编译试试。没有问题的话就会在bin里面出现我们需要的cordova.jar。
- 其实这是一个Android library项目，专门生成供其他Android项目使用的库文件的，相比较于之前直接提供jar包的做法，这样做可以直接把两个项目在IDE中关联起来，一起编译，在修改SDK版本时候可以保持SDK包版本的一致。
- 当然bin目录下也有批处理文件，不知道是不是可以用来生成jar包。

Android项目工程的创建

如果是采用命令行模式安装的话那就继续用命令行吧。就按照http://docs.phonegap.com/en/3.1.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide所写的那样：

    $ cordova create hello com.example.hello "HelloWorld"
    $ cd hello
    $ cordova platform add android
    $ cordova build

需要注意的是在第三步会检查Android SDK，如果没有合适的版本或者路径没配置好的话会报错，然后去自动下载。

Build之后就会在hello文件夹下生成几个文件夹，我们需要的项目工程在platforms\android下面，还是像之前一样在Eclipse下面根据现有代码新建工程，这样的话一个app的模板就建好了，然后就可以向里面放入我们的SAPUI5的库以及前端相关的代码了。

如果是按照第二种方式的话就需要手工创建项目工程，然后手动把cordova.jar、cordova.js、xml文件夹拷贝到项目工程下，这方面已经有很多现成的说明，在网上能搜索到的phonegap教程基本都是这个思路的，在这里就不具体写了。

项目代码的调整

建好了工程还没算完，还得改改代码。首先是java部分，初始的那个Activity的话需要把父类改为DroidGap，注意如果你用的是cordova.jar的话（我也不知道具体从哪个版本开始改的，反正最新的就是这样）import的包不再是像很多以前的教程写的那样用com.phonegap.*，而应该是：

import android.os.Bundle;
import org.apache.cordova.DroidGap;

public class MainActivity extends DroidGap {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.loadUrl("file:///android_asset/www/index.html");
	}

}

然后就是原来的web前端这一块儿了，首先要保证把index.html放到assets/www/下面，然后其他的文件根据代码里需要的相对路径放置。比如如果要把SAPUI5的resources与index.html放置在同一级目录下的话，那么index.html里面就要这么写：

	<script id="sap-ui-bootstrap" 
		src="resources/sap-ui-core.js"
		data-sap-ui-theme="sap_bluecrystal"
		data-sap-ui-libs="sap.m, sap.me">
	</script>

基本上通用的问题到这里就结束了，剩下可能还有一些具体项目相关的代码要调整。比如之前因为前段和服务器端都放在一个目录下，所以用相对路径就可以访问到服务器端的脚本，但是现在不在一起了，所以要把所有相对路径都改掉，比如拿ODATA服务为例：

以前是：

new sap.ui.model.odata.ODataModel("../services/bcas001.xsodata");

现在得改成：

new sap.ui.model.odata.ODataModel("http://<IP>:<Port>/<ProjectName>/services/bcas001.xsodata");

遗留的问题

完成后部署到手机上试了一下，说实话效果差强人意，主要有如下几个问题：

不支持声明式的布局比如xmlview，可惜我这个项目大多数界面都是用的xmlview，结果binding的数据就都显示不出来了，个人感觉声明式的布局更清晰。
landscape的时候activity窗口就关闭了
设置代理没有浏览器那么方便，我这个项目的服务器在公司内网，但是需要通过url获取外网的图片，在浏览器上没问题，结果到了本地就挂了。这个应该有办法设置一下。
调试起来还是没有本地那么方便。
性能问题，感觉上比直接在浏览器里跑SAPUI5 mobile的页面还要差一点，当然这是个人感觉。不过想想整个app运行时候先要把字节码解释一遍，然后再把js解释一遍效率必然没有本地程序高。