不少内容摘自易百教程
Hybrid App
简介
混合型移动应用,是指一种介于Native App(本地原生应用)与Web App (网页应用)之间的应用,该类应用的开发除了使用到本地平台开发技术(Android、iOS、 BlackBerry等)外,部分功能还使用了Web技术,通过内嵌浏览器显示网页的方式来实现。
PhoneGap与Cordova
PhoneGap是一个使用Web技术(HTML,CSS和JavaScript)开发跨平台移动应用的免费且开源框架,目前很多主流的移动开发框架均源于PhoneGap,比如WeX5、appMobi、Worklight等。而要了解Cordova,得先了解一下PhoneGap的一些背景:
PhoneGap框架的起源于加拿大一家叫Nitobi的软件公司,08年一次iOS开发者大会上,该公司的几个人提出一个想法:Bridging the gap between the web and the iPhone sdk,想做一个工具来弥补Web和iOS开发之间的不足,这是PhoneGap名字的来源。
2011年10月,Adobe收购了创立PhoneGap项目的Nitobi公司,随后把PhoneGap项目捐给了Apache基金会,但Adobe保留了PhoneGap的商标所有权。故项目到了Apache旗下,改了个名字叫Apache Callback,因为名字毫无新意,后来又作了一次改名,即现在的Apache Cordova。Cordova是Nitobi团队当时坐落的街道名称,用此名来纪念Nitobi团队的贡献。
到此,我们差不多了解PhoneGap与Cordova之间的关系了:Cordova是Adobe公司把PhoneGap捐给Apache后新起的名字,它作为一个开源项目,是从PhoneGap中抽取出来的核心,Cordova与PhoneGap的关系就类似于WebKit与Chrome或Safari的关系。
安装之前的准备工作
安装node.js和npm
在node.js官网可以下载到编译好的安装包.
在.bashrc中配置NODE_HOME和PATH变量,比如
export NODE_HOME=/all/app/node/nodev4
export PATH=$NODE_HOME/bin:$PATH
然后source .bashrc
使配置生效
Android SDK(对于Android平台)
JAVA_HOME当然也是要设置正确
.bashrc配置
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
版本问题
如果后边cordova build android
报错
You will require:
1. "SDK Platform" for android-21
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)]
比如你目前的android SDK版本是22,需要修改以下两个文件
myApp/platforms/android/project.properties myApp/platforms/android/CordovaLib/project.properties
修改内容
# Project target.
target=android-22
修改AndroidManifest
<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="22" />
Android SDK Manager的使用
android studio里有,但是谷歌在墙外更新很卡,可以使用这个源android-mirror.bugly.qq.com
设置:tools->option。记得勾选Force那个,然后reload就行啦
别人说还需要git
不过这么好的东西估计大家都自带了~
安装Cordova
npm install -g cordova
检查版本
cordova -v
Cordova的使用
创建App
cordova create /all/myApp/app1 com.site app1
app路径:/all/myApp/app1
包名(按照官方建议使用自己的反向域名):com.site
app名:app1
添加平台
执行命令后,它会自动下载相关依赖包。一个斜杠在那儿转,需要等很久,用代理会快一点
cordova platform add android
构建
如果无误会输出生成的apk地址
cordova build android
运行
cordova run android #使用USB真实设备
cordova常用命令列表
命令 说明
cordova create <工程路径> <包名> <工程名> 创建cordova工程,例如:cordova create helloworld_prj "com.yiibai.helloworld" "helloworld"
cordova build android 给cordova项目添加android平台。
cordova run android 编译和运行项目。
cordova install android 将编译好的应用程序安装到模拟器上。
cordova plugin add <插件完全限定名> 给项目添加插件。
cordova plugin remove <插件完全限定名> 删除插件。
cordova plugin list 查看插件列表。
cordova platforms add android 添加平台支持。
cordova build android 编译代码
cordova emulate android 在模拟器上运行(前提是创建好AVD)
cordova serve android 在浏览器运行
cordova run android 通过USB直接安装到真机
构建自己的应用
在项目目录下有一个www目录,这是存放html和js文件的地方,有三个文件夹:css、js、img。index.html是打开app的那个界面。如果网站使用restful风格的api设计,转换过程将会非常简单。
这三个文件夹内的文件可以直接引用,比如
<script src="js/main/1.js"></script>
安装插件
比如下边,会很久,然后屏幕会打印超级多个省略号,真是怀疑出问题了,不过那个居然是进度条!!
cordova plugin add cordova-plugin-dialogs
在android上调试
在chrome中输入
chrome://inspect/#devices