由于现有的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 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