“榕树下·那年”移动app ( hybrid ) 开发总结

 

 

榕树下网站自己的技术人员并很少，因此app开发的任务就到了母公司盛大文学这边。

 

 

 

盛大文学无线业务中心负责此次具体开发任务。

 

 

 

一如既往的，开发的状况是：时间紧，任务重，人手少

 

 

技术选型

---

为了同时上线Android和IOS平台，因此选择了hybrid这种Native与HTML5混合的方式。

 

Native的优势是效率相对较高，但缺点是开发速度相对较慢，不利于自更新；

HTML5的优势是开发速度快，能够实现自更新，跨平台，缺点也是显而易见，效率不高，加载速度慢；

因此：

• 用Native解决效率问题，主要用于切换界面的框架，图片浏览器组件等
• 用HTML5解决开发上的时间问题，主要用来实现页面布局、渲染

 

后台服务端API提供统一的JSON数据格式，能够供Native与HTML5无缝使用，服务端能够再也不关心客户端究竟是HTML仍是Native，HTML也能够随时改为Native

 

 

客户端与服务端通讯数据交换统一使用JSON，这样一来若有须要Native能够换成HTML5，或者HTML5能够换成Native

 

 

 

Hybrid的HTML5部分

---

 

我负责的就是HTML5这一部分，其实就是WEB页，外行如今一见到炫酷的微信页面或其它效果的页面就以为这是HTML5..

好吧，就叫HTML5吧。

 

Javascript

一、zepto.js

用于基本DOM操做与ajax选择使用定制的zepto.js，定制zepto.js的缘由是我已经习惯了Deferred这种写法

因此须要用到Deferred模块。具体定制方法请参考 https://github.com/madrobby/zepto

 

二、artTemplate.js

用于模板的渲染，语法简洁，效率高。 https://github.com/aui/artTemplate

 

三、cloudary.js

整个项目的web端框架，为何叫cloudary，其实名字几经更改，最后仍是用了盛大文学的网站域名 www.cloudary.com.cn

至于为何是cloudary这个词，好吧，谁知道当时是怎么定的这个组合的英文词的呢。。

它的做用：

• 封装、桥接JS与Native的通讯，对业务层提供统一的操做接口

• 再次封装zepto.js提供的的ajax方法，主要做用是可缓存接口数据，进行统一的错误处理
• 框架层对页面初始化完成后的业务处理
• 提供全局的通用操做方法或接口，如：系统信息，存储操做等

 

四、每一个页面自身的业务逻辑直接写在了页面上，由于代码并很少

 

CSS

用sass编写CSS

几个月以前还为之写了一个sass库，叫sasshat，项目地址： https://github.com/willian12345/sasshat

 

 

应用sasshat后APP某些WEB界面实现的效果如：

 

 

 

 

 

 

下面这个是用web实现的动画启动页

 

 

 

用了SASS后的好处：

• 编写CSS更加快速
• 可适应频繁的需求改动（—_—!）
• 更快速的纯CSS实现酷炫动画
• 更性感

 

 

 

该说说缺点了

---

 

一、加载速度慢

首次进入页面更慢，页面复杂度越高，须要的资源越多，加载资源慢，渲染DOM慢。

在移动端特别如此，随着手机越低端，性能递减越厉害

 

二、低端手机CSS3支持程度不一

有时候不得不放弃一些好用的CSS属性，而改变另外的方案实现。由于某些Android2.X的手机真的很落后。

不得不为这些手机去掉一些效果或者专门判断后用普通图片代替效果

 

三、跨平台很美

web确实是跨平台的，但webview内的浏览器CSS兼容比手机上浏览器内更很差。因此要实现全兼容只是目标。

要花的时间与精力不比用Native少，因此为何不选择用更合适的Native呢？

 

 

 

 

最后要说的

---

 

（APP现还未正式发布。还在内测）

无图无真像。

 

 

我在如今的公司仍是喜欢用本身写的东西。

虽然市面上有不少mobile端的web框架可用，但选择哪一款，要不要用，仍是要根据自身项目所处的环境：人力配制，技术水平，公司B格。

 

对于WEB开发人员来说，开发Hybrid形式的APP，还要取决于Native端开发者的水平或者对webview知识的熟悉程度。

对于通常技术人员来说，WEB不了Native,而Native也不了解web

 

 

 

 

 

 

======================================

转载处请注明：博客园(池中物,王二狗)willian12345@126.com