Sencha Touch 2入门：创建一个实用的天气应用程序之三

柔情只为你懂 2022-08-05 00:37 103阅读 0赞

原文：[Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3)][Getting Started with Sencha Touch 2_ Build a Weather Utility App _Part 3]

作者：Lee Boonstra  
Lee is a technical trainer at Sencha. She’s located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She is writing a cookbook for O'Reilly about Sencha Touch.

在三部分的Sencha Touch教程中，将创建“需要带伞吗”这个简单的而实用的应用程序，该应用将 从worldweatheronline.com提供的Web服务中加载天气信息。基于天气代码，该应用程序可以预测需要不需要带伞。  
  
在本教程的最后一部分，将讨论生成，而这 需要使用Sencha Cmd和PhoneGap/Cordova。  
  
对于原生应用程序，可是有原生API来检索设备的位置，还可以使用PhoneGap/Cordova将应用程序发布为iOS、Android、BlackBerry10或Windows Phone的原生移动应用程序。  
  
注意：如果希望在iOS、BlackBerry或Windows Phone设备上 测试应用程序，需要授权密钥和开发人员账号。此外，如果是使用Cordova，还不能在Windows操作系统上生成iOS的应用程序 ，也不能在Mac OS X上生成Windows的应用程序。  
  
为了参照，可以查看本教程的第[一][Link 1]、[二][Link 2]部分。  
  
可以在本教程第二部分下载解决方案代码——[完整的解决方案][Link 3]。

本教程的要求:

*  Sencha Touch 2.3或更高版本
 *  Sencha Cmd 4.x
 *  最高版本Ruby中的Compass和Sass
 *   一个现代浏览器
 *  一个编辑器
 *  PhoneGap 3.3 / Cordova 3.3
 *  Node.js v.0.10.23

还可以选择安装以下软件来生成本地应用程序：

*  XCode 5 (用来生产iOS本地应用程序,只适用于Mac OS X用户)
 *  Android开发人员工具(版本为13以上,用来生成安卓本地应用程序)
 *  在Windows 8 Pro中的Visual Studio 2012 Pro/Ultimate (用来生成本地Windows Phone应用程序,只适用于windows用户)
 *  Blackberry 10 Native SDK (用来生成BlackBerry 10的本地应用程序)

## 创建一个用于生产的生成 ##

使用Sencha Cmd，看可以创建用于生产或测试的生产包。生产用的生成包将Sass样式表编译成为生产准备的CSS（精简包）。它还会复制静态图片以及将JavaScript（Sencha Touch框架类加上自己定义的类）生成为一个单一的精简、连接的文件，以便于文件下载和缓存。生产生成还将包括要启用本地缓存的缓存清单文件。  
  
测试包则不包含这文件。在测试生成，在测试包中的Javascript和CSS文件将不会被精简且是可读的。

![weather-app-1.png][]

下面先来创建天气应用程序的生产生成。现在做的并不是创建本地生成。如果要将天气应用程序部署到自己的服务器上，就需要将生产生成的文件夹复制到web服务器上。  
  
在命令中输入以下命令就可创建一个生产生成：

**\[plain\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  sencha app build production

或者

**\[plain\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  sencha app build testing

查看一下文件夹结构，会发现，如果决定通过在线URL访问移动应用程序，这是一个可以直接在Web服务器上使用的文件夹结构。

![weather-app-2.png][]

可能你已经发现，字体并没有被复制到build文件夹，这可以通过手动复制或通过可以编辑生成过程来实现。下面来看看如何去实现。  
  
Sencha Cmd会使用了Apache的ANT来执行生成过程。在隐藏的.sencha文件夹内，可以找到所有使用的任务。  
  
如果希望自己修改生成过程，可以打开位于应用程序文件夹根目录的build.xml文件，并在文件结尾添加以下Ant任务：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****target** name="-after-build"**/>**  
2.      **<****target** name="build"  
3.              depends="init,-before-build,-build,-after-build"  
4.              description="Copy over the font/dinmu folder and remove temp files"**/>**  
5.     
6.      **<****copy** todir="$\{basedir\}/resources/css/stylesheets/fonts/dinmu" overwrite="true"**>**  
7.        **<****fileset** dir="$\{basedir\}/resources/sass/stylesheets/fonts/dinmu"**>**  
8.          **<****include** name="\*\*/\*" **/>**  
9.        **</****fileset****>**  
10.     **</****copy****>**  
11.     **<****copy** todir="$\{build.dir\}/resources/css/stylesheets/fonts/dinmu" overwrite="true"**>**  
12.       **<****fileset** dir="$\{basedir\}/resources/sass/stylesheets/fonts/dinmu"**>**  
13.         **<****include** name="\*\*/\*" **/>**  
14.       **</****fileset****>**  
15.     **</****copy****>**  
16.     **<****delete** dir="$\{basedir\}/$\{build.dir\}"**/>**

现在再次生成应用程序：

**\[plain\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  sencha app build

可以在使用以下地址来测试生产生成：http://localhost/dinmu/production/Dinmu/

## 本地设备API ##

有想过在设备上将应用程序作为原生应用程序来执行吗？使用诸如Adobe PhoneGap或Apache Cordova，就可以将应用程序发布为混合应用程序。  
  
一旦有了混合应用程序，就可以使用设备API，如地理定位。地理定位会基于设备的GPS传感器或网络信号的推断提供定位数据访问。  
  
在编辑器打开app\\utils\\Functions.js，并查看101行：

**\[javascript\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  Ext.device.Geolocation.getCurrentPosition(\{  
2.     timeout: 5000,  
3.     maximumAge: 10000,  
4.     success: **function**(position) \{  
5.        **var** place = position.coords.latitude + "," + position.coords.longitude;  
6.        Dinmu.utils.Functions.getWeather(place);  
7.        Ext.Viewport.unmask();  
8.     \},  
9.     failure: **function**() \{  
10.       Ext.Viewport.unmask();  
11.       Ext.Msg.alert('Timeout', 'Can not retrieve position, please retry.');  
12.    \}  
13. \});

当应用程序在设备运行的时候，Sencha Touch类Ext.device的Geolocation方法可访问原生的地理定位API，该API包含以下三个实现：

*  Sencha移动包
 *  PhoneGap/Cordova
 *  浏览器

当应用程序运行时，该类会根据设备自动选择正确的实现。  
  
在生成需要带伞吗（Dinmu）应用程序之前，需要做以下两个检查：

*  使用http协议访问api.worldweatheronline.com的请求的前缀，可以在app/utils/Functions.js文件的125行找到这个请求。
 *  确保输入了有效的worldweatheronline.com的Web服务器的API Key。这个可以通过注册http://www.worldweatheronline.com来获取到API Key。

都设置好了吧？真棒！现在只剩下使用PhoneGap或Cordova来生成一个原生应用程序了。

![weather-app-3.png][]

## 生成一个混合应用程序 ##

基于Sencha Touch的代码，有三种产品可以使用来创建原生应用程序：Sencha移动包、Adobe PhoneGap和Apache Cordova。所有这些产品都支持通过Sencha设备API来访问设备的硬件资源。  
  
下面来了解一下这三个解决方案之间的差异：

### Sencha移动包 ###

使用packager.json来生成iOS或安卓生成本地包，可以通过安卓市场或苹果App Store进行分发。

### Adobe PhoneGap ###

可以使用PhoneGap Build云服务来（远程）打包应用程序并通过安卓市场、黑莓App World、Windows Phone Store或者苹果App Store来分发。它是最简单的解决方案，可以通过扫描QR代码在设备上测试应用程序。还可以生成本地应用程序。它是一个商业产品，免费版本只限于一个专用的应用程序。

### Apache Cordova ###

Apache Cordova是阿帕奇软件基金会的一个顶层项目。Cordova是免费的、开源的、社区驱动的Adobe PhoneGap版本。Cordova可以打包本地应用程序，并通过安卓市场、黑莓App World、Windows Phone Store或者苹果App Store来分发。  
  
通过命令行生成本地包需要安装XCode、安卓开发工具、BlackBerry 10 SDK或带有Visual Studio的Windows 8 Pro。  
  
通过PhoneGap来生成包需要（免费）Adobe（PhoneGap Build）账号：https://build.phonegap.com/apps。  
  
注意：本教程将使用PhoneGap Build。如果更喜欢使用Cordova，可以使用在本教程使用的相同的命令，不过需要在命令行将将phonegap替换为ccordova。

![weather-app-4.png][]

### 初始化一个PhoneGap项目 ###

生成混合应用程序的第一步是在项目目录使用以下命令来启用它：

**\[plain\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  sencha phonegap init <APP-ID> <APP-NAME>

*  App ID要遵循以下模式： <REVERSED-DOMAIN>.<APP-NAME>
 *  应用程序的名称应该和app.json文件中指定的name属性的值相同。

注意：如果希望发布iOS应用程序，需要确保app Id是在苹果门户网站注册的哪个。  
  
以下是用来启用PhoneGap支持的命令：

**\[plain\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  sencha phonegap init com.sencha.dinmu Dinmu

注意：Mac OS X用户可能需要使用sudo前缀来获取管理权限。  
  
以下是创建的文件和结构：

*  PhoneGap文件夹结构
 *  phonegap.local.properties
 *  config.xml

### MyApp/phonegap ###

MyApp/phonegap包含了完整的PhoneGap文件结构。如果使用Cordova来初始化项目，文件夹会被命名为cordova。

![weather-app-5.png][]

### phonegap.local.properties ###

文件phonegap.local.properties包含了生成本地应用程序所期望的平台的名称。默认情况下，它将采用本地安装的SDK，例如：

**\[plain\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  phonegap.platforms=ios android blackberry10 wp8

当运行phonegap的init命令，属性文件还为Adobe PhoneGap远程包提供设置。如果有一个PhoneGap Build账号，就可以设置这些额外的设置。

**\[plain\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  phonegap.build.remote=true  
2.    
3.  \# Username for PhoneGap Build  
4.  phonegap.build.remote.username=\{username\}  
5.  \# Password for PhoneGap Build  
6.  phonegap.build.remote.password=\{password\}

当将phonegap.build.remote属性设置为false，那就必须在机器上安装一个SDK（XCode, 安卓开发人员工具, BlackBerry 10 SDK 或带Visual Studio的Windows 8 Pro）。

### config.xml ###

默认的Cordova/PhoneGap的config.xml文件包含了应用程序的元数据，下面来修改这个文件。  
  
修改应用程序名称、应用程序说明和作者信息：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****name****>**Dinmu**</****name****>**  
2.  **<****description****>**  
3.      Do I need my Umbrella today?  
4.  **</****description****>**  
5.  **<****author** email="myemail@addres.com" href="http://www.mydomain.com"**>**  
6.      Your name  
7.  **</****author****>**

下一步是在启动时启用地理定位差距，以便通过设备检索位置：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****preference** name="EnableLocation" value="true" **/>**

禁用全屏模式，以便显示状态栏（电池指示器和时间）：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****preference** name="fullscreen" value="false" **/>**

要确保应用程序支持连接到外部url。天气应用程序要连接到http://www.worldweatheronline.com。隐藏，需要授予此URL或所以外部URL的访问权限。可以使用通配符来允许所有外部连接：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****access** origin="\*" **/>**

最后腰修改的是图标和要加载的图片的路径。默认情况下，Sencha Touch会创建iOS图标和启动图像。他们可以在MyApp/resources文件夹下诏到。  
  
当为视网膜显示（iphone 5+）的iphone生成应用程序时，最重要的是要根据所要求的屏幕尺寸提供正确的启动屏幕。如果不是这样，就可能会不正确的调整可视区域。对于本示例，将坚持使用PhoneGap的启动屏幕。可以随意使用自己的启动屏幕来替换他们。

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****icon** src="icon.png" **/>**  
2.  **<****icon** src="resources/icons/Icon.png" **/>**  
3.  **<****icon** gap:platform="ios" height="57" src="resources/icons/Icon.png" width="57" **/>**   
4.  **<****icon** gap:platform="ios" height="72" src="resources/icons/Icon~ipad.png" width="72" **/>**   
5.  **<****icon** gap:platform="ios" height="114" src="resources/icons/Icon@2x.png" width="114" **/>**   
6.  **<****icon** gap:platform="ios" height="144" src="resources/icons/Icon~ipad@2x.png" width="144" **/>**   
7.     
8.  **<****gap:splash** gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" **/>**  
9.  **<****gap:splash** gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" **/>**  
10. **<****gap:splash** gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" **/>**  
11. **<****gap:splash** gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" **/>**

如果想了解更多有关config.xml的设置，可查阅 [PhoneGap文档][PhoneGap] 。

### 创建本地生成包 ###

使用PhoneGap或Cordova初始化应用程序后，就可以在命令行运行以下命令来创建一个本地生成了：

**\[plain\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  sencha app build -run native

注意：run参数可确保应用程序在机器上安装的仿真器中加载。重复一遍，Mac OS X用户需要使用sudo前缀来获取管理权限。  
  
生成的应用程序位于MyApp/cordova或MyApp/phonegap目录下：

*   platforms/android/bin - Android的.apk文件
 *  platforms/ios/build/ - iOS的.app文件
 *  platforms/blackberry10/build/simulator - BlackBerry 10的.bar文件
 *  platforms/wp8/Bin/Debug - Windows Phone的.xap文件

### 测试本地生成 ###

如果使用PhoneGap Build，在安卓设备上测试应用程序会相当容易。只需要扫描QR代码或下载、拖放.apk文件到手机的内存卡就行了。  
  
对于iOS，需要配置和代码签名，从而保证应用程序来源于已知用户以及自从最后一次签名后没再修改过。Windows Phone开发人员和iOS开发人员需要一个付费的开发着账号。  
  
一旦拥有一个iOS开发者账号，就需要设置证书、标识符和配置文件。要了解更多相关信息，请参阅苹果开发人员工具和Sencha Touch文档中的《 Packaging Native iOS Applications》。  
  
当所有都设置好以后，就可以使用PhoneGap在命令行生成应用程序：

**\[plain\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  sencha app build native

当为iOS生成应用程序时，可能会碰到一个生成错误，因为iOS应用程序需要代码签名。使用PhoneGap Build，需要商城\*.p12证书和\*.mobileprovisioning移动配置文件。当上传者两个关键文件后，就可以解锁按键比ing重新生成。  
  
如果正在生成本地应用程序（PhoneGap remote=false或使用Cordova），可以在phonegap或cordova文件夹打开platforms/ios/Dinmu.xcodeproj文件来设置应用程序的代码签名。开发者标识符要添加到代码签名标识符列表。如果没有，则需要再次执行整个本地配置处理。

![weather-app-6.png][]

要确保电话已连接到Mac OS X，以及在XCode生成和运行。  
  
恭喜你，已经从零开始完成了一个Sencha Touch实用应用程序的构建。如果跟随本系列三个教程，就已经使用Sencha Cmd创建了应用程序，并为需要带伞吗应用程序创建所有的视图、模型、存储和控制器。还是用Sass创建了自定义主题，且创建了一个生产生成来发布到Web服务器或使用Adobe PhoneGap/Cordova生成一个混合应用程序。按照这个流程，就可以创建任何自己喜欢的应用程序了。

[Getting Started with Sencha Touch 2_ Build a Weather Utility App _Part 3]: http://www.sencha.com/blog/getting-started-with-sencha-touch-2-build-a-weather-utility-app-part-3/
[Link 1]: http://blog.csdn.net/tianxiaode/article/details/14647801
[Link 2]: http://blog.csdn.net/tianxiaode/article/details/17094159
[Link 3]: https://training.sencha.com/sencha-blog/tutorial-dec-2013-lee/goodies-tutorial/fullsolution-download.zip
[weather-app-1.png]: /images/20220805/81eca70f6e4649fdb1266bf4f6e556ec.png
[view plain]: http://blog.csdn.net/tianxiaode/article/details/17438191#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/120933
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/120933/fork
[weather-app-2.png]: /images/20220805/97592b91a070469f8f78d48304428bb1.png
[weather-app-3.png]: /images/20220805/adb179ed3a664c129602220635294db2.png
[weather-app-4.png]: /images/20220805/7b494bac8a9a4936a86d8ca5ddc4eb44.png
[weather-app-5.png]: /images/20220805/8dd22c56ac114cd78328c689cb19fc33.png
[PhoneGap]: http://docs.phonegap.com/en/3.3.0/
[weather-app-6.png]: /images/20220805/5156f700d3de4409890b8b173b964d98.png