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

云应用开发我理解是以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化模式的应用,这方面还是有的搞搞的~~写的不好,不足的还请大伙拍砖

更多相关文章

  1. Android控制闪光灯的方法(打开与关闭)
  2. android中setVisibility方法无效的可能原因与解决办法
  3. [信息图表]iPhone和Android的系统生命周期对比
  4. Android 文件保存getFilesDir()丶getCacheDir()、getExternalFil
  5. android 笔记 --- Android自动判断输入是电话,网址或者Email的方
  6. Android Activity的各种重载方法

随机推荐

  1. Android(安卓)画图Path的使用
  2. android studio报错Unsupported major.mi
  3. Android(安卓)实现图片的圆角
  4. android 反纠结app开发: 在线程中更新vie
  5. Android(安卓)BroadcastReceiver 的生命
  6. Android(安卓)手电筒(最强适配版)
  7. Android(java)学习笔记75:匿名内部类的方式
  8. Android(安卓)一般动画Animation和属性动
  9. android 客户端支付宝 php服务器端编写
  10. Android隐藏输入法软键盘时无法影藏的问