采用Sencha Touch开发的App,如果用户点击退出按钮,则App会直接退出。
Sencha Cmd 4.0提供了访问Cordova的方法,可以解决上述问题。
一、准备工作
1. 安装Java JRE
2. 安装Node.js
3. 安装Cordova:在命令行中输入npm install -g cordova
4. 下载ANT,并把ANT的路径(例如:C:\apache-ant-1.9.4\bin)加入到系统环境变量path中
5. 下载Android SDK Manager,并把SDK的路径(例如:C:\adt-bundle\sdk\tools)加入到系统环境变量path中
6. 安装git,在Configuring the line ending conversions时选择"Checkout as-is, commit as-is"这个选项
在Adjusting your PATH environment时选择"Use Git from the Windows Command Prompt"
二、创建应用程序
1. 创建Sencha Touch项目:命令行切换到sencha touch sdk目录,输入sencha generate app SenToCo D:\sentoco
(具体参见上一篇《sencha touch初步》)
2. 启用Cordova支持:命令行切换到项目目录,输入sencha cordova init com.mydomain.sentoco SenToCo
其中com.mydomain.sentoco是app id,SenToCo是工程的名称,也是应用的名称。
如果出现could not find file config.xml to copy的错误,找到文件
Sencha\Cmd\4.0.2.67\extensions\cmd-cordova-packager\cmd-cordova-packager.plugin.xml
将文件中的
<echo>Adding Cordova config.xml to App</echo>
<copy file="${app.cordova.www.dir}/config.xml" todir="${app.dir}"/>
改为
<echo>Adding Cordova config.xml to App</echo>
<copy file="${app.cordova.dir}/config.xml" todir="${app.dir}"/>
上述命令执行成功后目录结构如下:
3. 修改项目目录下cordova.local.properties文件中的平台列表
cordova.platforms=android
4. 在cordova中添加android平台:命令行切换到项目目录下的cordova目录,输入cordova platform add android
如果出现Please install Android Target 19(the Android newest SDK). Make sure you have the latest Android tools installed as well的错误,则更新Android SDK
5.在cordova中添加Device功能(参考Apache Cordova Documentation):命令行切换到项目目录下的cordova目录,输入
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
如果添加成功则会出现以下界面:
如果添加不成功可以手动添加,在https://git-wip-us.apache.org/repos/asf下载相应的插件
下载后解压(例如:D:\cordova_plugin\cordova-plugin-device-4ae85e8\),命令行切换到项目目录下的cordova目录,输入
cordova plugin add D:\cordova_plugin\cordova-plugin-device-4ae85e8\cordova-plugin-device-4ae85e8
6. 在cordova中添加Notification功能(参考Apache Cordova Document):需要添加两个功能插件
https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
7. 在app.js中添加代码
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('SenToCo.view.Main'));
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
function onBackKeyDown() {
navigator.notification.confirm(
'确定退出应用?', // 显示信息
onConfirm, // 按下按钮后触发的回调函数,返回按下按钮的索引
'退出应用', // 标题
'取消,确定' // 按钮标签
);
}
function onConfirm(button) {
if (button == '2') {
navigator.app.exitApp();
}
}
},
8. 打包应用程序:命令行切换到项目目录,输入sencha app build native
如果全线飘绿就打包成功了,可以在D:\sentoco\cordova\platforms\android\ant-build目录下找到apk文件
参考:
Cordova & PhoneGap with Sencha Cmd 4
Building an app with Sencha Touch 2.3 and Cordova 3
Cordova 3.0 Plugin 安装 及"git" command line tool is not installed
Possible bugs in: Sencha Cmd 4.0.1.45
Adding Cordova/Phonegap plugins behind a proxy
Sencha Cmd Cordova init problem