利用Cordova开发移动应用程序

可紊 提交于 2020-03-23 07:33:49

不少内容摘自易百教程

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
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!