Sencha Touch/ExtJS6 Modern结合Phonegap/Cordova开发移动端Hybird应用

原文地址：http://blog.csdn.net/lovelyelfpop/article/details/20392377

本文介绍的是 Sencha Touch 结合 Cordova/Phonegap 开发移动应用的环境搭建介绍。

其实Sencha Touch 和 Cordova/Phonegap 并没太大关联，而只是 Sencha Cmd (打包工具)内部调用了 Cordova/Phonegap 的 build 命令。
所以，如果你用的是 ExtJS6 Modern 而不是 Sencha Touch，步骤也是差不多的。

官方指南（英文）里面有详细步骤说明：

http://docs.sencha.com/cmd/guides/cordova_phonegap.html

一、新手必读

1、Sencha Touch项目(以下简称ST项目)、Phonegap(或Cordova)项目、Android项目(或iOS项目)是三个不同的概念

2、ST项目和eclipse没关系（新手常犯的错误就是用eclipse建Android项目，然后内嵌ST项目）；
Android项目和eclipse有关系(可以用eclipse调试和导出apk包)；
iOS项目和xcode有关系(可以用xcode调试和上架)

3、ST项目用phonegap(或cordova) init之后，会出现给一个phonegap(或cordova)目录，这个目录下是Phonegap(或Cordova)项目

4、sencha app build native生成的Android项目(或iOS项目)，在phonegap(或cordova)/platforms/目录下，是Phonegap(或Cordova)项目的一部分

具体目录结构如下，如果你的不是ST-cordova-android(或ios)的嵌套结构，那就不标准！

二、前期准备

开发环境搭建请看：《移动开发1、准备工作》

phonegap/cordova的初步使用，和sencha touch不沾边：《移动开发2、PhoneGap初步使用》

sencha touch的初步使用，和phonegap/cordova不沾边：《移动开发4、Sencha Touch初步使用》

三、标准步骤

以下是Sencha touch结合Phonegap(Cordova)开发的标准步骤，其他五花八门的方式容易出现各种各样的问题

英文原文：

Leveraging PhoneGap within Sencha Touch

视频：下面是一个国外的视频教程，在Mac上使用Sencha touch+Phonegap开发ios的

Cordova_PhoneGap_with_Sencha_Cmd_4

下面作简要概括（以安卓为例，ios开发类似）：

1、进入ST SDK

cd D:\Code\Web\touch-2.3.1

2、新建ST App

sencha generate app MyApp D:\Code\Android\sencha\MyApp

3、添加Phonegap/Cordova支持

cd D:\Code\Android\sencha\MyApp
sencha phonegap init com.pushsoft.myapp MyApp

或（如果是Cordova）

sencha cordova init com.pushsoft.myapp MyApp

注意：很多新手都用我的com.pushsoft.xxx，这个名字是我们公司的域名倒过来写的。你们自己的项目用你们自己的域名

4、如果需要调用设备的功能，可以往项目中添加对应的phonegap插件。

如下我添加摄像头调用的插件

cd D:\Code\Android\sencha\MyApp\phonegap
phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

或（如果是Cordova）

cd D:\Code\Android\sencha\MyApp\cordova
cordova plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

然后js如下调用

navigator.camera.getPicture(function(){ 成功的回调方法 }, function(){ 失败的回调方法  }, { 
    quality: 50, 
    destinationType: navigator.camera.DestinationType.FILE_URI, 
    sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY 
} );

*步骤5、6区分sencha cmd的版本

对于sencha cmd 4.x

5、配置D:\Code\Android\sencha\MyApp\phonegap.local.properties文件

phonegap.platform=android

这样就是指定打包android平台的安装包，需要安装有对应平台的SDK

6、打包、运行

cd D:\Code\Android\sencha\MyApp

只打包：

sencha app build native

打包并安装到模拟器或真机上：

sencha app build -run native

对于sencha cmd 5+, 6+

5、修改app.json里面的builds节点

6、打包、运行

打包android只要执行命令：

sencha app build android

打包ios只要执行命令：

sencha app build ios

注意：如果出现错误[ERR]，错误原因一般不再这个位置，而在红色[ERR]上面一点的绿色[INF]的位置。

还可以sencha -info app build *** 查看详细信息。

*步骤7、8区分phonegap/cordova的版本

7、生成的各平台项目的位置

1) iOS项目：cordova(phonegap)\platforms\ios\，可以使用xcode打开***.xcodeproj

2) android项目: cordova(phonegap)\platforms\android\

对于phonegap/cordova 3.x生成的android项目：用eclipse打开

对于phonegap/cordova 5.x+生成的android项目：用android studio打开

8、生成的安装包(apk, ipa)的位置

1) iOS的ipa不能直接由phonegap/cordova生成，需要用xcode打包；

2) android的apk在下面的目录（只有debug版本的apk。如需打包release发布版本的apk，请用eclipse或者android studio导出）：

phonegap/cordova 3.x：cordova(phonegap)\platforms\android\bin\

phonegap/cordova 5.x+：cordova(phonegap)\platforms\android\build\outputs\apk\

---------------------------------------------------------------------------------------------------------------------------------------------------------

关于打包后安装到手机的App名称问题

请查看：《移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题》

---------------------------------------------------------------------------------------------------------------------------------------------------------

案例体验

作者所在公司的移动AIO7就是Sencha Touch开发的

  

  

1、网页版地址：http://218.4.111.6:8181/app1/app/

登录用户名Admin，密码a1789

可以把链接发到微信中，测试微信中的打开速度

2、安卓版地址：http://www.aio7.com:8189/aio7.apk

登录用户名Admin，密码a2789

也可以到应用宝中下载：http://sj.qq.com/myapp/detail.htm?apkName=com.pushsoft.aio5app

3、安卓版（xwalk内核，即chromium内核）地址：http://www.aio7.com:8189/aio7-chrome.apk

登录用户名Admin，密码a2789

4、ios版地址：https://itunes.apple.com/us/app/aio7/id867910291?mt=8

登录用户名Admin，密码a2789