由于现有的PhoneGap/Cordova书籍大多未能跟上软件更新的脚步,为了快速入门Cordova+JQM开发,学习并撰写此文,详细的说明参见文后参考文章。


1、安装Cordova

1.1 安装nodejs 

windows环境下只需下载nodejs安装,安装后即可使用npm包进行下面Cordova的安装

1.2 安装Cordova

在命令行窗口运行

npm install -g cordova

2、创建APP

用cordova create指令创建App

cordova create hello com.example.hello HelloWorld  

说明,第一个参数hello为Cordova为该app创建的项目目录,第二个参数为项目id,第三个为项目title

然后用下列命令安装必要的cordova插件:

cordova plugin add org.apache.cordova.console

cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.dialogs
cordova plugin add org.apache.cordova.splashscreen
cordova plugin add org.apache.cordova.statusbar
还需要添加ios/android等平台支持
cordova platform add ios
cordova platform add android


3、下载模板并覆盖www目录

下载 https://github.com/app-o-mat/jqm-cordova-template-project/archive/master.zip

解压后用其www目录覆盖上面创建的hello项目文件的www目录,注意其中有个config.xml,应该复制到hello的根目录下覆盖(因为较新版本的Cordova中该文件的位置移到了根目录下),并修改config.xml中的widget id字符串为前面Cordova create的第二个参数id。

然后可以再浏览器中查看运行效果:

cordova serve

这句是开启web服务器,可以在浏览器中打开窗口查看App配置情况 http://localhost:8000

最后就可以编译成apk或ipa等不同平台的安装包了:


cordova emulate ios
cordova build ios
cordova run ios

(android平台的话上面的ios改成android)


Done!


Android模拟器运行效果如下图:



参考文章:

1、Cordova命令行安装过程 http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The%20Command-Line%20Interface

2、Github上的一个Cordova+JQuery Mobile模板 https://github.com/app-o-mat/jqm-cordova-template-project



Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐