阿里云手机应用开发点滴

前些天参与了阿里云手机应用开发，现在应用上线了，也想写一些自己对于云应用开发的一些心得。

云应用开发我理解是以html与js对应与android里的xml与java开发模式的一套映射性质的开发模式。其中很多东西都继承了android开发的理念，比如android里的activity对应了云应用里的page，另外是整个page的生命周期的思想也基本了android的理念。下面就与android对比着来看下云app的开发模式。

 

1、生命周期

 

_package("tuantju.page");

_import("caf.ui.Page");
_import("caf.mui.ScrollView");

_class("DetailPage", Page, function(){
	
	this._init = function(){
		_super._init.call(this);
    	this._scrollview = null;
	};
	
	this.create = function(parent){
		var obj = this.createTplElement(parent, "detail.xml");
		this.init(obj);
		return obj;
	};
	
	
	this.reset = function(params){

		//TODO

	};
	
	this.init = function(){
		_super.init.apply(this, arguments);
		this.initComponents();
		this.initActionElements();
	};
	
	
	this.dispose = function(){
		_super.dispose.apply(this);
		this._scrollview.dispose();
		this._scrollview = null;
	};
	
});

我们按照android的生命周期来解析下云应用的生命周期，我们可以有差不多下面的这么一张状态映射表：

 

Android	云应用
onCreate	this.create
onStart	this.init
onResume	this.reset
onStop	this.dispose

 

 

 

 

 

 

 

 

 

当然android的只是部分的生命周期，列出来的是对应云应用的一些状态。整个生命周期是从create开始的，跟android一样云app中在create方法中通常都是进行page类与相应的html模板匹配工作，类似与android的setContentView(R.layout.main)云中也是this.createTplElement(parent, "detail.xml")，继续进入init的话则是当用户跳转page时做的，其实在

创建page的实体，所谓创建实体就是如下图：

  在app容器内部插入一个关于当前pageid的div，云app的编程模式虽然与android有很大类似，但实现的方式却是完全不一样的。android是通过线程类切换的方式来组织activity的，而云app是通过类似于对singlepage的html写入模板来组织切换的。当init的时候平台会插入一个div并初始化里面的一些容器和动作监听器类似的。并将它显示到用户可视范围。这和android也有异曲同工之处，android的可视周期也是从onStart开始到onDestory进程销毁结束的，但不同的是云app并没有类似与onDestory的机制，只有类似与onStop的dispose方法类实现，当一个page离开用户视觉范围平台为调用这个方法，但不会对于容器这个div进行销毁，另外类似与android的onResume在云app中则是reset这个方法，按照android的onResume形式这个reset方法是在page第一次初始化的时候跟在init之后调用的，另外当page切换回来的时候也会调用的，所以其实这个方法是page内部方法中比较关键的方法。因为跳转时候的page的参数传递都是需要靠这个方法来接受并处理的。

 

2、跳转方式

下面来对比看一下跳转。

 

Intent it = new Intent();
it.putExtra("accountStr", accountEtStr);
it.putExtra("passwordStr", passwordEtStr);
it.setClass(LoginActivity.this,HomeListActivity.class);
LoginActivity.this.startActivity(it);

  上面是android的跳转模式，有点费劲哈~要new出一个intent，再在里面放参数，然后进行从哪儿到哪儿的intent的写入，最后按照这个intent来启动一个activity。

 

下面再来看一下云app是如何做跳转的：

 

this._app.navPage('home', {type : 'detail'});

  只有一个语句，比较的简洁，没有用到类似与android的中间对象，这里只是传了一个home这样一个字符串，由于我们已经在app的配置中已经写入了这样的配置参数，系统很简单的找到了需要跳转到的类的映射。

 

this.__conf__({
		"page": [
			//键(pageid)     模板文件名         类名                 简要说明
			{"pid": "welcome", "tpl": "welcome.xml", "clazz": "WelcomePage"},
			{"pid": "home", "tpl": "home.xml", "clazz": "HomePage"},
			{"pid": "city", "tpl": "city.xml", "clazz": "CityPage"},
			{"pid": "search", "tpl": "search.xml", "clazz": "SearchPage"},
			{"pid": "detail", "tpl": "detail.xml", "clazz": "DetailPage"}
		]
	});

 

接下来，对比一下跳转后接受参数：

 

Intent it = getIntent();
String accountStr = it.getStringExtra("accountStr").toString();
String passwordStr = it.getStringExtra("passwordStr").toString();

  android还是通过中间桥梁intent来进行的。

而在云app中可以直接在this.reset方法中的arguments中取得到传值参数对象拿到一个类似于intent的中间桥梁的对象。在reset本体中进行数据处理。

 

this.reset = function(params){
		
		if(params.type === 'detail'){
			//TODO
		}
}

 

另外如果跳转每个activity要用到的数据在android中是利用ShareContext实现的（具体参照我这篇博客http://leyteris.iteye.com/blog/926031）

 

ShareContext shareContext = ((ShareContext)getApplicationContext());  
shareContext.setClient(client);  

 

  而在云app中直接用html5中localstorage就能实现。

 

window.localStorage.setItem("tuantju_now_city_name", _name);

  同样每一个page都能得到享元变量了

 

3、动作监听

在android中对于事件动作的监听采用的是和经典的java一样的监听的手段：

 

updateBtn.setOnClickListener(new OnClickListener(){
			public void onClick(View v) {
				
				Intent it = new Intent();
				it.setClass(HomeListActivity.this,PostActivity.class);
				HomeListActivity.this.startActivity(it);
				
			}
		});

 

  在一个控件上绑上一个实现OnClickListener接口的类，并重写里面的onClick方法

而在云app中也是可以采用经典的js的事件bind来实现事件的监听。但云app又提供了另外一种类似为节点data写入的方式来绑定action。这一种方式在本身js中是没有实现的。下面看caf框架是怎么做的。

 

在html中需要对于要绑定事件的节点增加_action这个data数据。

 

<a class="goBack" _action="go_back">后退</a>

  而在对应的page类中增加以do_为前缀的action响应事件方法。这个_action默认只对于a和button标签有效。

 

this.do_go_back = function(act, sender){
		this._app.navPage('welcome');
};

其中参数中sender传递的动作响应的节点，而act则是动作事件的名称，具体可以参考手册上的使用。

 

其实caf在init的时候做了这样一个动作：this.initActionElements();这个方法就是上面说的默认对a和button有效的动作初始化方法。

当然我们可以你想的任何标签都有效你可以这样，比如有这样的html：

 

<li class="list-item clr" _action="goto_detail">

 再这样声明：

 

this.initActionElements(this._self, this, ['li']);

这样就对li这个标签action有效化了，另外还有如果是动态的载入DOM节点，上面的action是不起效果的，需要在动态载入后重新执行一下initActionElements这个方法。

 

先写到这儿，云app开发其实还是很快的，对于开发功能性的app开发时间较java的android开发时间会缩短很多。开发效率也是非常高的，这种手机端利用js来mvc式的开发应用感觉还是不错的，但是现在平台限制比较大，只是适用于阿里云平台，这点有点局限性，如果平台方面能开发出一个在普通android下运行云app的apk平台，那将是很好的应用啊~另外感觉可以将caf这个框架和phonegap这种本地应用框架api结合弄出一个新的mvc式的框架，毕竟phonegap只是提供与本地的挂接并没有将里面的东西进行mvc化模式的应用，这方面还是有的搞搞的~~写的不好，不足的还请大伙拍砖