1. 项目背景与Sencha Touch 2框架解析Sencha Touch 2是早期移动应用开发领域的重要框架专为构建跨平台移动Web应用而设计。作为Ext JS的移动端版本它采用MVC架构和组件化设计理念允许开发者使用纯HTML5技术创建接近原生体验的移动应用。在2012年前后这套框架因其数据绑定机制、丰富的UI组件和主题系统成为企业级移动开发的热门选择。天气应用作为Sencha Touch的经典教学案例能充分展示以下技术特性数据驱动的视图更新机制RESTful API集成模式设备地理定位服务调用响应式布局适配方案本地存储与离线缓存策略2. 开发环境搭建与工具链配置2.1 基础环境准备开发Sencha Touch 2项目需要配置特定版本的工具链Java JRE 1.7Sencha Cmd的编译依赖Ruby 1.9Sass编译环境要求Sencha Cmd 4项目脚手架与构建工具PhoneGap/Cordova 3.x原生打包工具安装示例# 安装Sencha Cmd $ sudo npm install -g sencha-cmd # 验证安装 $ sencha which2.2 项目初始化流程下载Sencha Touch 2 SDK生成项目骨架$ sencha -sdk /path/to/touch-2.4 generate app WeatherApp ./weather-app集成Cordova支持$ cd weather-app $ sencha cordova init com.example.weather2.3 关键配置文件调整app.json需要添加Cordova构建配置builds: { native: { packager: cordova, cordova: { config: { platforms: ios android, id: com.example.weather } } } }3. 天气应用核心功能实现3.1 数据模型设计创建models/Weather.js定义数据结构Ext.define(WeatherApp.model.Weather, { extend: Ext.data.Model, config: { fields: [ {name: city, type: string}, {name: temperature, type: int}, {name: conditions, type: string}, {name: icon, type: string}, {name: forecast, type: auto} // 数组类型预报数据 ] } });3.2 天气API服务集成使用OpenWeatherMap API示例Ext.define(WeatherApp.store.Weather, { extend: Ext.data.Store, config: { model: WeatherApp.model.Weather, proxy: { type: jsonp, url: http://api.openweathermap.org/data/2.5/weather, extraParams: { units: metric, appid: YOUR_API_KEY }, reader: { type: json, rootProperty: main } } } });3.3 定位服务实现通过Cordova插件获取设备位置getCurrentPosition: function() { navigator.geolocation.getCurrentPosition( this.onPositionSuccess.bind(this), this.onPositionError.bind(this), {timeout: 10000, enableHighAccuracy: true} ); }, onPositionSuccess: function(position) { var store Ext.getStore(Weather); store.getProxy().setExtraParams({ lat: position.coords.latitude, lon: position.coords.longitude }); store.load(); }4. 用户界面开发技巧4.1 响应式布局方案使用Sencha Touch的容器系统Ext.create(Ext.Container, { fullscreen: true, layout: vbox, items: [{ xtype: titlebar, docked: top, title: 天气预报 }, { xtype: panel, flex: 1, items: [ // 天气信息组件 ] }] });4.2 主题定制方法修改resources/sass/app.scss$base-color: #3498db; $alert-color: #e74c3c; import sencha-touch/default; import sencha-touch/default/all; // 自定义样式 .weather-icon { font-size: 2em; color: $base-color; }5. 构建与调试实战5.1 多平台构建命令# 开发模式构建 $ sencha app build native # iOS模拟器运行 $ sencha app emulate native --targetiphone # Android设备调试 $ sencha app run native --targetandroid --device5.2 常见问题解决方案白屏问题检查cordova.js是否被正确注入script idmicroloader typetext/javascript srccordova.js/scriptAPI跨域错误配置Content-Security-Policymeta http-equivContent-Security-Policy content default-src self data: gap: https://ssl.gstatic.com; style-src self unsafe-inline; script-src self unsafe-inline unsafe-eval定位服务失效确认插件已安装$ cordova plugin add cordova-plugin-geolocation6. 性能优化建议图片懒加载对预报图标使用延迟加载xtype: image, deferredRender: true, src: resources/icons/{icon}.png数据缓存策略实现本地存储代理proxy: { type: localstorage, id: weather-cache }组件复用优化对列表项使用itemConfigxtype: list, itemConfig: { xtype: weather-item, dataMap: { // 数据映射规则 } }在真实项目部署时建议通过Sencha Cmd生成生产环境构建$ sencha app build --production native这个构建过程会执行以下优化JavaScript代码压缩与混淆CSS资源合并与压缩图片资源优化应用缓存清单生成资源指纹标记
