安卓app开发方式之webApp

时间：2023-03-08 16:52:02
安卓app开发方式之webApp 
1、phonegap:  专注于webapp调用native的功能。
2、ionic：     专注于webapp的前端ui技术，需要与phonegap（准确的说是和Cordova配合使用）。ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。目前绑定的与angularJS和SASS。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。开始学ionic的时候就嫌弃ionic做不了与手机硬件紧密结合的APP，今天无意中看到了另外一个项目ngCordova，福音啊。神马拍照啊，文件 上传啊，地理位置啊，借助ngCordova插件都可以实现。ngCordova是结合cordova和angular包装了许多插件，诸如访问文件，摄 像头，GPS等等，这些插件只需要简单配置就可以在ionic中使用。
3、react-native: 速度快。
web app实际就是安卓壳加传统web的方式，native app是调用安卓sdk实现的，web app是B/S结构，native app是C/S结构，壳程序其实就是调用的Webview，来加载页面，phonegap是个开源的框架，实现了壳的功能，并提供了很多对安卓native控件的调用方法.

https://github.com/quangtn/ionic-demo
https://github.com/diegonetto/generator-ionic
https://github.com/cfjedimaster/Cordova-Examples
https://github.com/driftyco/ionic-preview-app
https://github.com/antbrothers/ionic-demo
Android PhoneGap 就是这个壳，你大可以不用它而自己做一个自己的壳，前提是你自己去用本地js实现你所需要的本地调用再用webview来实现页面渲染。但无论如何尽量使用PhoneGap。
PhoneGap后来被Adobe收购，然后又贡献给了开源社区，现在由Apache管理，改名cordova。

phoneGap使用是需要注意的（也即phoneGap的缺点）：（特别是在发布版本前手动对HTML进行加密，很重要）
不同平台需要搭建不同开发环境

框架没有UI，需要使用第三方UI插件

框架仅提供基本API，扩展功能需要使用第三方插件

框架不支持自动加密，需要手动对HTML加密

框架未对UI进行优化，应用加载及UI相应时较慢

由于第三方开发人员水平不同，插件质量参差不齐

一个相当好的开源ui框架，presentation from PhoneGap Day 2013:    https://github.com/kwallis/PhoneGapDay2013

sublime:   一个很好的js及html代码编辑工具。

phonegap 传递中文汉字 出现乱码的情况 ;

解决办法:  在html中head里面, 添加如下代码即可

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

整个工程统一编码  用utf-8

The complete guide to running PhoneGap on Ubuntu

http://www.levibotelho.com/development/the-complete-guide-to-running-phonegap-on-ubuntu

PhoneGap is a great technology that’s a lot of fun to use, but getting started with it can be daunting. Here I outline the entire process, beginning to end, of getting a basic PhoneGap setup running on Ubuntu, complete with an Android emulator.

Installation

1. Install Git

$ sudo apt-get install git

2. Install NodeJS

$ sudo apt-get install nodejs

While that’s all you need to do to install node, there is a small detail that you need to take care of. When ubuntu installs the package, it names the NodeJS executable nodejs. The problem is that many applications, including PhoneGap, expect the executable to be named node. To fix this inconsistency, simply create a symlink named node that points to nodejs as follows.

$ sudo ln -s /usr/bin/nodejs /usr/bin/node

3. Install PhoneGap

$ sudo apt-get install npm
$ npm install -g phonegap

4. Install Ant

$ sudo apt-get install ant

5. Get the Android SDK

You can find it here. Extract the package to /usr/local/android-sdk-linux.

6. Get Java (JRE & JDK)

$ sudo apt-get install openjdk-7-jre
$ sudo apt-get install openjdk-7-jdk

7. Update your PATH

Open .profile for editing using the following command.

$ gedit ~/.profile

Append the following lines to the end of the file. Do not put these inside any of the IF blocks.

export ANDROID_HOME="/usr/local/android-sdk-linux/tools"

export ANDROID_PLATFORM_TOOLS="/usr/local/android-sdk-linux/platform-tools"

export PATH="$PATH:$ANDROID_HOME:$ANDROID_PLATFORM_TOOLS"

Save the file, log out, and log back in to apply the changes.

8. Install the necessary Android packages

Execute android from the shell. This is a good first test to make sure you’ve done everything right up to here. If you get an error, rerun through the above steps and make sure that you’ve installed all the requirements and added your environment variables correctly.

If you haven’t made any mistakes, you’ll see that executing android opens up a kind of package manager that you can use to install different Android components. By default, a certain number of these will be pre-selected for installation. Leave them as-is, and in addition tick the box next to the entry named “API 4.4.2 (API 19)”. Once you’ve done that, download and install everything.

9. Update C/C++

Install the following packages

$ sudo apt-get install lib32stdc++6
$ sudo apt-get install lib32z1

Apparently this is only needed on 64-bit systems, but I can’t confirm that because I haven’t tried this on 32-bit Ubuntu.

Executing a sample project

If you’ve gotten this far, good job! You now should have everything you need in place to emulate an Android device with Cordova/PhoneGap. If you want to test your installation, try creating and emulating a demo project. Here’s how you can do that.

1. Create the project

Go to the directory where you do all your development work and execute the following command

$ sudo npm install -g cordova

$ cordova create

This will create the equivalent a “hello world” project in your dev directory.

2. Create an emulation device

Execute the following.

$ android avd

This will open the Android Virtual Device Manager, which allows you to manage the virtual devices on which your apps will be emulated. By default, no virtual devices are created. To create one, click “Add” and fill in a name and the specifications for the device.

A couple tips if this is your first time configuring a virtual device. If you’re running on Intel, you’ll get better performance if you select the “Intel Atom (x86)” architecture for your virtual device. Another thing that you’ll want to consider is ticking the “Snapshot” checkbox down at the bottom of the dialog. The emulator takes ages to start up and runs extremely slowly–enabling snapshots will save the emulator’s state when you’re done with it so that you don’t have to start it up from scratch every time you use it.

3. Run the test app.

Navigate to your test app directory and run the following.

   $ cordova run android
OR:
$ cordova emulate android

If you’ve followed all the steps up until now correctly, with a little luck the emulator will launch and after 5 minutes or so of startup time you’ll see the cordova sample app onscreen. Have fun developing!

Cordova/Phonegap应用构建环境搭建

混合（Hybrid）移动开发将Web开发与原生开发优势互补，之后应该是一个不错的方向。Phonegap是混合移动开发的一个方案， 开发者可以使用标准的Web技术进行开发，然后使用Phonegap打包成原生APP，也可以为Phonegap开发插件来扩展APP功能。 Cordova是Apache的*项目，起于Adobe贡献给Apache基金会的Phonegap源码，之后Phonegap官方貌似则专注于提供Phonegap应用的云构建服务。 Phonegap官网提供的文档与Apache Cordova文档是相同的，所以从技术上可以将Phonegap与Cordova视为同一个东西。

虽然Phonegap官方提供免费的开放（public）应用以及一个私有应用构建服务。但对于应用调试或插件开发来说， 使用云构建服务上传源码下载APP还是挺耗时间的，不太方便，所以搭建本地的应用构建环境是必要的。

依据Cordova文档的The Command-Line Interface 部分，针对Android应用，在Ubuntu上搭建Cordova应用构建环境的步骤如下所示：

1. 安装Node.js和git客户端

  • 从NodeJS官网下载Linux二进制压缩包，解压缩后将bin路径加入PATH环境变量，即可从命令行执行node、npm命令。
  • sudo apt-get install git

2. 安装Cordova：

  • sudo npm install -g cordova

3. 下载JDK：

  • sudo apt-get install default-jdk default-jre

4. 安装Android SDK：

  • 从Android官网的这里下载Android Studio或独立的SDK工具

如果下载Android Studio，解压缩后执行bin/android.sh，Android Studio启动时需要从Google的服务器上获取一些SDK相关的文件， 由于GFW的原因，无法成功获取，也就无法顺利启动。Android Studio网络代理设置的方法（参考这里）：

在Android Studio首次启动后，可以在HOME目录下找到文件~/.AndroidStudio/config/options/other.xml，在该文件中，可以找到如下几行：

<option name="PROXY_TYPE_IS_SOCKS" value="false" />

<option name="USE_HTTP_PROXY" value="false" />

<option name="USE_PROXY_PAC" value="false" />

<option name="PROXY_HOST" value="" />

<option name="PROXY_PORT" value="80" />

<option name="PROXY_AUTHENTICATION" value="false" />

<option name="PROXY_LOGIN" value="" />

<option name="PROXY_PASSWORD_CRYPT" value="" />

<option name="KEEP_PROXY_PASSWORD" value="false" />

如果使用HTTP协议的代理，则将“USE_HTTP_PROXY”一项的value改为“true”，“PROXY_HOST”、“PROXY_PORT”的value分别设置为代理的域名和端口， 如果代理需要身份认证，则将“PROXY_AUTHENTICATION”的value改为“true”，并设置“PROXY_LOGIN”、“PROXY_PASSWORD_CRYPT”两项。

重启Android Studio即可。

如果下载独立的SDK工具，假设解压缩后的路径为~/Android，则添加环境变量ANDROID_HOME=~/Android，并将子目录tools加入PATH环境变量。

执行命令android打开Android SDK管理器，与Android Studio一样，也需要设置网络代理：

  • 打开菜单项“Tools -> Options”，填入“HTTP Proxy Server”、“HTTP Proxy Port”两项的值，重新启动Android SDK管理器即可。

由于当前Cordora构建Android应用依赖于Android API 19，即Android 4.4.2，所以需要在“Android Studio”或“Android SDK管理器” 下载“Android API 19”相关的依赖包。

注：下载速度很慢，请耐心等待...

5. 安装ant

当前Cordora构建Android应用也依赖于ant。从Apache Ant官网下载二进制包， 解压缩后，将子目录bin加入PATH环境变量。

6. 测试

依次执行以下命令：

  • cordova create hello com.example.hello HelloWorld，该命令会在当前目录下创建hello子目录；
  • cd hello，进入该示例工程目录；
  • cordova platform add android，为该工程添加Android平台支持；
  • cordova build android，将该工程构建成原生Android应用；
  • cordova run android 或者 cordova emulate android，打开Android模拟器运行示例应用；
  • cordova run android --device=SH25PW103163           通过 adb devices获得device列表；

模拟器启动后如下图所示：

安卓app开发方式之webApp

最终生成的apk文件在hello/platforms/android/ant-build/路径下，默认名为“CordovaApp-debug.apk”。

对于Cordora项目来说，源码目录即项目的www子目录。

Cordova 打包 Android release app 过程详解

Android app 的打包分为 debug 和 release 两种，后者是用来发布到应用商店的版本。这篇文章会告诉你 Cordova 如何打包 Android release 版本，也会让你了解 Android app 的打包流程。

创建一个 demo app

为了演示，首先我们需要创建一个 Cordova 项目的基本步骤。如果你已经对此很熟悉，可以跳过这一步。

先全局安装 Cordova CLI ：

npm install -g cordova

在 cordova-demo 目录创建一个项目，ID 为 com.example.cordovaDemo ，项目名为 cordovaDemo 。

cordova create cordova-demo com.example.cordovaDemo cordovaDemo

加上 Android 平台，这会下载一个 Android 项目的框架，并把版本信息保存到 config.xml 。你可以去 platforms/android 目录下查看它。

cordova platform add android --save

你可以检查下平台需求是否满足。基本上 Cordova 需要你把 Java SDK， Android SDK 和 Gradle 都配置好。

cordova requirements android

现在一个 Cordova 项目就已经准备好了。你可以尝试构建一个版本。一切顺利的话，你会在 platforms/android/build/outputs/apk 目录下看到 APK 文件。这个目录后面会经常用到，为了方便我们建立一个符号链接 android-apk 。

# 构建 apk

cordova build android

# 建立符号链接 android-apk

ln -s platforms/android/build/outputs/apk android-apk

# 查看一下这个目录，你应该会看到 android-debug-unsigned.apk

ls android-apk

搞定！但这个构建的 APK 是 debug 版本的。要构建 release 版本，我们需要先了解一下 Android 手动打包的流程。

Android APK 手动打包流程

Android app 的打包流程大致分为 build , sign , align 三部分。

build是构建 APK 的过程，分为 debug 和 release 两种。release 是发布到应用商店的版本。

sign是为 APK 签名。不管是哪一种 APK 都必须经过数字签名后才能安装到设备上，签名需要对应的证书（keystore），大部分情况下 APK 都采用的自签名证书，就是自己生成证书然后给应用签名。

align是压缩和优化的步骤，优化后会减少 app 运行时的内存开销。

debug 版本的的打包过程一般由开发工具（比如 Android Studio）自动完成的。开发工具在构建时会自动生成证书然后签名，不需要我们操心。而 release 版本则需要开发者自己生成证书文件。Cordova 作为 hybrid app 的框架不像纯 Android 开发那么自动化，所以第一次打 release 包我们需要了解一下手动打包的过程。

Build

首先，我们生成一个 release APK 。这点在 cordova build 命令后加一个 --release 参数局可以。如果成功，你可以在 android-apk 目录下看到一个 android-release-unsigned.apk 文件。

cordova build android --release

Sign

我们需要先生成一个数字签名文件（keystore）。这个文件只需要生成一次。以后每次 sign 都用它。

keytool -genkey -v -keystore release-key.keystore -alias cordova-demo -keyalg RSA -keysize 2048 -validity 10000

上面的命令意思是，生成一个 release-key.keystore 的文件，别名（alias）为 cordova-demo 。

过程中会要求设置 keystore 的密码和 key 的密码。我们分别设置为 testing 和 testing2 。这四个属性要记牢，下一步有用。

然后我们就可以用下面的命令对 APK 签名了：

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore release-key.keystore android-apk/android-release-unsigned.apk cordova-demo

这个命令中需要传入证书名 release-key.keystore ，要签名的 APK android-release-unsigned.apk ，和别名 cordova-demo 。签名过程中需要先后输入 keystore 和 key 的密码。命令运行完后，这个 APK 就已经改变了。注意这个过程没有生成新文件。

Align

最后我们要用 zipalign 压缩和优化 APK ：

zipalign -v 4 android-apk/android-release-unsigned.apk android-apk/cordova-demo.apk

这一步会生成最终的 APK，我们把它命名为 cordova-demo.apk 。它就是可以直接上传到应用商店的版本。

自动打包

一旦有了 keystore 文件，下次打包就可以很快了。你可以在 cordova build 中指定所有参数来快速打包。这会直接生成一个 android-release.apk 给你。

cordova build android --release -- --keystore="release-key.keystore" --alias=cordova-demo --storePassword=testing --password=testing2

但每次输入命令行参数是很重复的，Cordova 允许我们建立一个 build.json 配置文件来简化操作。文件内容如下：

{

  "android": {

    "release": {

      "keystore": "release-key.keystore",

      "alias": "cordova-demo",

      "storePassword": "testing",

      "password": "testing2"

    }

  }

}

下次就可以直接用 cordova build --release 了。

为了安全性考虑，建议不要把密码放在在配置文件或者命令行中，而是手动输入。你可以把密码相关的配置去掉，下次 build 过程中会弹出一个 Java 小窗口，提示你输入密码。

用 Gradle 配置自动打包

另一种配置方法是使用 Gradle ，一个 Android 的自动化构建工具。 cordova build android 的过程其实就是使用它。你要在 platforms/android 目录下建立 release-signing.properties 文件，内容类似下面这样：

storeFile=relative/path/to/keystore

storePassword=SECRET1

keyAlias=ALIAS_NAME

keyPassword=SECRET2

这个文件的名称和位置也是可以通过 Gradle 的配置 cdvReleaseSigningPropertiesFile 修改的。我觉得一般情况使用 build.json 就足够了。有兴趣的可以看这个 Cordova 官方教程

参考资料

cordova + crosswalk解决android 4.4以下的版本运行慢的问题:
首先呢, crosswalk 只是针对安卓平台的。那么我们为什么要使用 crosswalk 呢.因为低于android 4.4 的webview 是一个蹩脚的Android WebKit浏览器内核（android版本越低性能就越差,android 4.4以上已经使用了Chromium ）,所以英特尔公司发布了 Crosswalk引擎，可以让 Android 4.0-4.3 的手机上的应用打包 Chromium 引擎而不是 Android WebKit。虽说未来 Android 4.4 会占据更多市场份额，但目前主流的 Android 手机的系统版本毕竟还是 4.1、4.2（4以下的就不说了...）。

cordova 和 crosswalk 的一些差异

  1. 安装包的大小,【cordova,一个纯html5的 apk 仅有1.5M左右(不涉及原生功能),涉及到一些原生功能,比如相机、文件系统、推送等因为需要加入插件,一般 apk 在 5M 左右】，而【crosswalk,一个纯html的 apk 就达到了19M左右,如果需要加入杂七杂八的插件,那就是奔着25M去了】,天朝流量还是很贵的....（用户一看app这么大,算了不下了...)
  2. 开发的简便性, 【我是一个专职 cordova 开发者,所以cordova已经用习惯，这一条可能不够客观，仅供参考】.首先【cordova 3.0+ 的版本开发起来都很方便了,命令行命令行你的应用就搞定了 - -! 】,而【crosswalk集成比较麻烦,也许是我没找到门道.....手动集成导入包什么的总觉得好麻烦啊.....然后我默默的去下载了一个 intelxdk ,因为他能直接打包基于 crosswalk 的应用,但是点了打包之后,发了一个邮件给你让你去下载,这...这....这......我总觉得云打包需要上传代码是不是不太合适啊....】
  3. 插件生态圈， crosswalk 虽然能兼容 cordova plugin 但并不是完全一致的，而且并不是所有的cordova plugin 都能用在crosswalk 上
  4. 流畅度（大家最关心的应该在这里了...首先我说一下我是用的 App Framework 这个前端框架的,这个现在也是intel的 - -），我测试的手机是 华为 g510 android 4.1.1 的手机,性能并不强，在滚动流畅度和整理流畅度上 crosswalk 不得不承认确实有明显提升，但是个人觉得cordova在安卓上的流畅度也在可以接受的范围之内。【其实说白了，cordova性能确实差一些，但是可以通过一些手段优化来提升性能，或者牺牲一下用户体验，关闭一些没必要的切换动画什么的来提升】

暂时只想到这么多

最后说一下用cordova不就是为了跨平台, 而 crosswalk 是只针对安卓平台的,所以如果你的应用主打ios平台的话，用不用就随意了（我只是这么一说,安卓端的客户还是不能丢的）...
题外话,在 ios 平台上 cordova 已经表现的很完美了（除了万恶的 position:fixed ）,跟原生应用并没有太大的差别（也可能是因为我现在做的都不是很复杂的应用...没体现出跟原生的差异性...）。

相关文章