sencha touch 入门系列 (六)sencha touch运行及代码解析(下)

时间:2023-03-08 23:05:24
sencha touch 入门系列 (六)sencha touch运行及代码解析(下)

接着上一讲,通过index.html里development.js对app.json里js资源文件的解析,app.js便被index.html引入了,

app.js是整个项目的程序入口,在项目完成时使用sencha cmd打包压缩项目时,默认情况下所有的js文件都会被压缩成一行放置在app.js中,关于项目的打包我们会在后面的课程详细讲解,

接下来我们来看下app.js,了解下整个项目是如何通过app.js来进行加载的。

  

 //用来实例化Ext.app.Application,这是项目中唯一一个只要创建一次且不需要通过Ext.create来进行实例化的类,
//它会在Ext.application内部进行实例化,
//Ext.app.Application用来定义 Models, Controllers, Profiles, Stores 和 Views模块类文件的集合,
//当定义的这些文件被载入完毕时会触发里面的launch方法,
//我们一般在launch方法中创建我们的主视图
Ext.application({ //name属性表示项目名称,这个名称不能有空格也不能有标点符号,
//它将作为整个项目的全局命名空间,所有的类文件都必须以它开头,例如在这里我们的name为MyFirst,
//那么当我们定义其他类文件的时候 就必须用'MyFirst.model.User', 'MyFirst.controller.Users', 'MyFirst.view.Main' 等等
name: 'MyFirst', //因为我们调用的是sencha-touch.js核心库,所以当你需要使用的功能不在核心库中的时候
//我们需要使用requires来引入该功能对应的js文件,当我们使用用sencha cmd打包压缩项目文件时,cmd工具会自动关联该js文件并将其内容打包到
//app.js中,虽然在开发过程中,不引入对应的js文件程序能够正常运行,程序在找不到指定js的时候会到touch文件夹下去自动查找源码文件关联,
// 但在浏览器的console窗口中会报警告,且在最终打包项目后程序将无法运行,所以开发过程中确保你的浏览器窗口中没有requires的警告
// 使用requires还有一个作用就是延迟加载,
//requires属性可以在所有的类文件中定义,当使用了requires属性的类被实例化时,如果该类中requires的js没有被加载这时就会立刻加载该requires的js文件
requires: [
'Ext.MessageBox'
], //引入视图组件类文件
views: [
'Main'
], //定义应用程序图标,sencha cmd打包安装程序时有效
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon@2x.png',
'144': 'resources/icons/Icon~ipad@2x.png'
}, //设定ios图标的镜面效果
isIconPrecomposed: true, //设定应用程序启动图,这个属性只支持ios设备
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
}, //当application定义的资源文件都载入完毕时,
//会调用launch函数
launch: function() {
// 销毁启动动画,项目启动时的那三个闪烁点,可根据情况需要进行修改
Ext.fly('appLoadingIndicator').destroy(); // 初始化主视图文件,在这里创建了view文件夹下的Main视图并添加到
//viewport视口中,viewport继承自container,默认全屏属性和card布局
//在项目启动时自动创建
Ext.Viewport.add(Ext.create('MyFirst.view.Main'));
}, //项目使用sencha cmd的sencha app build production指令打包成webapp时会生成html5离线缓存文件
//当项目第一次访问后就会将项目缓存到本地,用户可以离线访问,
//在服务端的代码进行修改后重新打包成production发布时,浏览器端检测到代码更新后会调用
//该方法提示用户是否更新,确认更新后页面会自动刷新并缓存最新内容
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});

Ext.application中用来定义Models, Controllers, Profiles, Stores 和 Views模块类文件的集合,

sencha cmd生成的项目代码中暂时只定义了view视图的资源文件,

views: [
'Main'
],

这相当于在全局的命名空间下,给指定的文件名增加了一个子命名空间view,

所以这段代码对应的文件是定义的名称为MyFirst.view.Main类文件,

注意:文件夹下的js文件以及类名一定要对应,否则在启动项目时将找不到对应的js文件

例如我定义的类Ext.define("MyFirst.view.Main"),那么程序会到view文件夹下去查找Main.js文件,如果名称不匹配,那么会查找不到文件并报错

即app文件夹下的view文件夹下的Main.js文件,

如果我们定义的views如下:

views: [
'my.Main'
]

那么,在application初始化的时候会到MyFirst项目下的app目录下的view文件夹下的my文件夹查找文件,按照层级结构来查找

默认情况下,这段代码定义的文件会去访问查找app文件夹下去查找对应文件夹,

你也可以通过在Ext.application里定义appFolder属性来重新指定这个文件夹,

例如我设定appFolder:"test",

那么上面的views属性定义的内容我们的程序将会到test文件夹下去查找

Main.js也就是创建我们打开项目时所看到的那个界面的文件了,

这个文件我们先不讲解,在没有对js的类文件系统有一定得了解前,有些内容可能难理解,

所以下一讲我们会详细介绍sencha touch的类系统,以便接下来我们对model,view,store,profile,controller这些模块的学习