当前位置:编程学习 > wap >>

基于HTML5的垮平台开发,源码开源!


就目前来说,移动开发算是比较流行的!一个大点的社交网站没有手机客户端,实在是说不过去!!

我们公司最近就需要为公司的社区网络做个客户端!

但是,移动开发的成本确实比较高,至少需要满足有IOS和Android客户端!而Android不同版本及分辨率的适配又是一个难度大的问题!对于公司实力小的,不可能请专职的IOS工程师和Android开发工程师!我本人也仅熟悉于PHP的开发!(仅有的android项目,也就是花了一个月做的微博客户端:http://bbs.csdn.net/topics/380148315)。

OK,闲话不提,基于开发成本及功能需求,我决定尝试使用目前还不是很流行的 JS 垮平台开发!(注:js垮平台开发即只需要使用html5+css3布局,使用js 的ajax请求服务器数据,最后显示,不需要写java或者object-c代码,也就是开发的html js 代码可以兼容地直接编译为app或者apk)。

最初,使用国外比较流行的phonegap框架,使用了一段时间,放弃了!主要原因是UI问题,phonegap只提供js访问手机的api,但是UI却是一个大问题;最后选择了国产的AppCan框架(http://www.appcan.cn)!

本文不涉及具体的代码,主要通过这个客户端引出一种移动跨平台开发的新方法!

………………………分割线……………………………


项目简介:

    本次使用HTML5来开发的是公司社区论坛的手机客户端,架构如下:

前端:

   AppCan、css3、html5、Javascript、zepto.js、base64.js

   主体上基于appcan,页面UI使用css3 + html5设计,页面Dom操作使用了jquery的精简版zepto.js,前端和后端数据交互使用zepto.js的ajax方式请求,中文传输使用了base64加密传输!本地使用了localStorage存储数据,对大图片使用了appcan 图片缓存功能!

窗口跳转使用了多窗口和主辅模式组合使用,大功能板块间使用使用zy_con()跳转,公用头部和尾部;子功能板块内部使用多窗口,尽量达到效率和用户体验友好的一个平衡;


后端:

   基于Linux + PHP + MySql + Apache 的discuz X1.5论坛!数据传输使用json格式,中文使用base64加密!


内容板块设计:

功能板块大方向分为五块:

    1、新闻:包括新闻浏览、评价;

    2、活动:聚合论坛相关活动;

    3、图秀:瀑布流功能浏览帖子,无限延伸图片帖子;

    4、空间:即用户空间,包括用户积分、等级、论坛短消息、论坛提醒、清空缓存、退出用户、意见反馈、新版本检查等!

    5、论坛:重点部分。板块页面设计抛弃了常用的板块列表形式,采用了图片块状;帖子列表也设计为了类社交化的排列方式,而非传统的单标题列表形式!功能上包括普通用户发帖、回复、点评、多图片拍照上传、位置获取、帖子收藏、版主删帖、禁言用户等等!


    OK,需求与架构清楚了,然后就是Coding,coding and coding……

    不过,我自始自终只写了js , html, css, php代码,没有写过一句java代码,也没有写过一行object-c代码(我也不会,哈哈)!功能完成以后,代码通过appcan直接就可以打包成android apk,同时也能打包成IOS ipa文件!

   well,是不是感觉很简单?是的,这对不会java和object-c的朋友来说,移动开发不再是梦!!

   本文仅仅提示各位移动开发的朋友,HTML5垮平台移动开发也是一种不错的选择!

   项目源码开源,ipa和apk均提供下载,源码亦开源!!

   可以到我的博客下载! 

    http://www.yeeyi.com/blog


应用截图:

--------------------编程问答-------------------- 不错哦,支持一下。顺便问问,phoneGap的问题,LZ将环境搭建完成了?能否教我一下,我也需要用到 --------------------编程问答-------------------- 给我发个,邮箱wayne_l@126.com --------------------编程问答--------------------
引用 1 楼 BlueSkyInMyEye 的回复:
不错哦,支持一下。顺便问问,phoneGap的问题,LZ将环境搭建完成了?能否教我一下,我也需要用到


phonegap官方就有IOS和Android比较详细的安装教程,按照那个一步步操作,基本就没有问题的! --------------------编程问答--------------------
引用 2 楼 BlueSkyInMyEye 的回复:
给我发个,邮箱wayne_l@126.com


到我的博客空间下载即可!!yeeyi.com/blog --------------------编程问答-------------------- 谢谢... --------------------编程问答-------------------- 不错的哦,我也支持一下。
--------------------编程问答-------------------- 多谢分享 --------------------编程问答-------------------- 除 --------------------编程问答-------------------- 我想问问,服务器端你是如何搭建的,信息又是如何交互的,客户端直接通过联网就能访问的话?是不是还要搭建一个外网的网站什么的,求详细配置说明。谢谢了,因为目前就是纠结这个。
补充:移动开发 ,  Android
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,