Titanium学习笔记之Titanium入门(一)
http://docs.appcelerator.com/titanium/latest/#!/guide/Quick_Start Titanium的官方文档,更多的内容可以参看官方文档的内容,在此写博客只是写一些入门级的技术。希望大家能帮助大家尽早入门Titanium开发。
Titanium开发简介,目前主要的移动端操作系统是Android和Ios,企业在开发App的时候不得不同时雇佣Android开发人员和ios开发人员。同样的逻辑实现两遍,增加了开发和维护的成本。所以跨平台开发的技术自然就出现了。为了提高开发效率一般采用Alloy框架,使得开发和美工能分开同步进行,titanium在视图层采用xml文件写,逻辑层采用JavaScript。
下面来一个简单的例子,程序员简单的例子永远是一个Hello word。在此也不例外。
安装好titanium后就可以新建项目了,File——〉new——〉mobile app project——〉
选择next
选择next
输入项目名称,输入App Id 点击Finish即可完成项目创建。
创建好的项目文件目录如下:
所有的代码都写在app目录下。App启动位置为index.js,在titanium中所有的界面都不需要配置,只需要一个View对应一个controller即可,所以默认的启动视图即对应view目录下的index.xml文件
assets文件主要用于存放app的资源文件,如App需要的声音文件,图片文件,视频文件等。
controller文件主要用于存放逻辑层的代码,所有的控制逻辑均写在controller文件下。
model文件夹主要用于存放model数据的,建议新手暂时不要去深入研究如何使用model。
style文件夹主要存放view对应的样式文件,后缀为tss,其代码风格和CSS相似。
view即为视图层文件,我们所看到的视图都是在view文件中写出来的。
config.json项目的配置文件,如项目中需要用到的域名,网络超时等一些常量的配置。
该项目中的view/index.js文件代码如下:
<Alloy>
<Window class="container">
<Label id="label" onClick="doClick">Hello, World</Label>
</Window>
</Alloy>
所有的view文件都是<Alloy>作为顶级标签,假如该view是一个有窗口的view则Alloy的下一级标签为Window,由上代码可以看出该Window中有一个文本框,Id属性方便在js中引用,例如在js中要改变该Label的值只需要 $.label.text="Hello Titanium",
即可把文本的值改为Hello Titanium了,上面的代码可以看出当点击Hello,World后将会触发js中的doClick事件。
function doClick(e) {
alert($.label.text);
}
$.index.open();
app首先执行$.index.open(),将id为index的window打开,在titanium中若没有定义window的id值则默认为index。
当点击view中的hello world后就触发doClick函数,此时会弹出一个对话框,并且输出label的值,
运行后的界面:
当点击hello world后:
到此一个简单的titanium入门程序即学习完了。