热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

安卓app开发方式之webApp

1、phonegap:专注于webapp调用native的功能。2、ionic:专注于webapp的前端ui技术,需要与phonegap(

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里面, 添加如下代码即可

 "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,在该文件中,可以找到如下几行:

如果使用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列表;

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

cordova-demo


最终生成的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 的密码。我们分别设置为 testingtesting2 。这四个属性要记牢,下一步有用。

然后我们就可以用下面的命令对 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 官方教程

参考资料

Ionic: Publishing your app

Android Studio: Sign Your App

Cordova: Android Platform Guide

How to automatically sign your Android apk using Ionic framework and Crosswalk

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 ),跟原生应用并没有太大的差别(也可能是因为我现在做的都不是很复杂的应用...没体现出跟原生的差异性...)。



推荐阅读
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • 20211101CleverTap参与度和分析工具功能平台学习/实践
    1.应用场景主要用于学习CleverTap的使用,该平台主要用于客户保留与参与平台.为客户提供价值.这里接触到的原因,是目前公司用到该平台的服务~2.学习操作 ... [详细]
  • ShiftLeft:将静态防护与运行时防护结合的持续性安全防护解决方案
    ShiftLeft公司是一家致力于将应用的静态防护和运行时防护与应用开发自动化工作流相结合以提升软件开发生命周期中的安全性的公司。传统的安全防护方式存在误报率高、人工成本高、耗时长等问题,而ShiftLeft提供的持续性安全防护解决方案能够解决这些问题。通过将下一代静态代码分析与应用开发自动化工作流中涉及的安全工具相结合,ShiftLeft帮助企业实现DevSecOps的安全部分,提供高效、准确的安全能力。 ... [详细]
  • wpf+mvvm代码组织结构及实现方式
    本文介绍了wpf+mvvm代码组织结构的由来和实现方式。作者回顾了自己大学时期接触wpf开发和mvvm模式的经历,认为mvvm模式使得开发更加专注于业务且高效。与此同时,作者指出mvvm模式相较于mvc模式的优势。文章还提到了当没有mvvm时处理数据和UI交互的例子,以及前后端分离和组件化的概念。作者希望能够只关注原始数据结构,将数据交给UI自行改变,从而解放劳动力,避免加班。 ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • Android图形架构学习笔记(待修改)
    以下简单总结来自Android官网,稍作总结:https:source.android.google.cndevicesgraphics概览Andr ... [详细]
  • 资源:吊炸天!74款APP完整源码!android界面中点击输入框时弹出输入法如果输入框在底部会出现输入法遮挡输入内容的问题解决办法设置activity的windowsoftinpu ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 本文介绍了一种处理AJAX操作授权过期的全局方式,以解决Asp.net MVC中Session过期异常的问题。同时还介绍了基于WebImage的图片上传工具类。详细内容请参考链接:https://www.cnblogs.com/starluck/p/8284949.html ... [详细]
  • MVC设计模式的介绍和演化过程
    本文介绍了MVC设计模式的基本概念和原理,以及在实际项目中的演化过程。通过分离视图、模型和控制器,实现了代码的解耦和重用,提高了项目的可维护性和可扩展性。详细讲解了分离视图、分离模型和分离控制器的具体步骤和规则,以及它们在项目中的应用。同时,还介绍了基础模型的封装和控制器的命名规则。该文章适合对MVC设计模式感兴趣的读者阅读和学习。 ... [详细]
  • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
  • 背景应用安全领域,各类攻击长久以来都危害着互联网上的应用,在web应用安全风险中,各类注入、跨站等攻击仍然占据着较前的位置。WAF(Web应用防火墙)正是为防御和阻断这类攻击而存在 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • RN即ReactNative基于React框架针对移动端的跨平台框架,在学习RN前建议最好熟悉下html,css,js,当然如果比较急,那就直接上手吧,毕竟用学习前面基础的时间,R ... [详细]
author-avatar
伊利纯羊毛
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有