- 浏览: 20745 次
- 性别:
- 来自: 上海
最新评论
-
前进的路中没有月亮:
masuweng 写道那个爱码哥怎么用呢,我是初学者.还望指教 ...
仅用了一天开发了这样的app,再也不用担心排队的问题了 -
masuweng:
那个爱码哥怎么用呢,我是初学者.还望指教...
仅用了一天开发了这样的app,再也不用担心排队的问题了
随着互联网创业的持续升温,市场对于移动应用开发的开发者需求也供大于求,对于移动端开发工具技术也五花八门,大致分为三大类,第一种就是纯原生开发,纯原生app固然很好,但是其学习成本高,开发周期长,打码量多,一般对于融资后的企业比较试用,另一种就是这两年比较火的web app,一般是通过HTML5 开发从而封装而实现的,众所周知web app过分依赖网络,渲染性能较弱,标签太多代码量也不少,web app只能说是一个临时解决方案,今天我们仔细说说第三种方案,在众多开发工具和平台中之所以选择他是因为不用原生方式开发也能带来流畅的原生体验。Xml和JavaScript的完美结合打破了常规原生APP的开发方式,这种方式不仅带来了代码量相对极少的优点,同时编辑一次适用于Android和iOS系统,虽然iOS端对比Android不是很成熟,但随着爱码哥5.0的即将发布,这些问题相信也随之迎刃而解。
下面我们来看一下具体demo的开发过程
之前和大家分享过订餐、新闻及仿微信APP的源码,相信大家都有所了解,这些APP的demo都是用imag.js开发的
由于之前开发过预约订餐的demo,想着也可以试试预约住宿的APP,如果要重新设计很麻烦,而且也只是想搞一个demo,并不发布上线,就在应用商店里搜寻到一个很新颖的应用,仿照着做。找到我们的UI美女把全部的图片切给我,接下来就是开发了。
在imag.js中像素的默认单位是dp,文字的大小只要写数字即可。
由于APP中的图片特别多,加载慢,所以并没有把图片直接放到资源里,而是以json格式编写图片上传到模拟数据中,容易调用。使用imag.js调用客户端信息功能$phone.info(),可以获取手机屏幕的信息参数,方便调整像素比例。
其中一个页面使用了侧滑菜单控件SlidingMenu 来完成信息导航(如下图)。SlidingMenu定义了两个item,第一个item一开始是隐藏的,当点击左上角按钮时调用open()方法显示侧滑菜单,当然,SlidingMenu本身就带了滑动的效果,右滑就可以响应出侧边栏。如果使用原生的话,Android倒是提供了HorizontalScrollView,虽然不用手动处理各种冲突,但也要了解事件的分发机制。
下图使用了弹出菜单控件popupmenu,内容填充部分一个列表list搞定,可以自己设置list的背景,边距,文字颜色等样式。
上图中的产品类型选择由上拉菜单控件actionmenu展示,ActionMenu控件用来显示iOS ActionSheet风格的上拉菜单,风格固定,不能自己定制背景和样式,并且只能通过JavaScript脚本动态创建。效果图如下
下面的几张效果图相对来说就很简单了,大多数布局都是用的list控件实现的,跳转页面使用onclick="$page.open('')"方法。个别页面加入了screen控件来展示多组图片。
下面的代码是最后一张图邀请好友的源代码
更详细的源码链接
下面我们来看一下具体demo的开发过程
之前和大家分享过订餐、新闻及仿微信APP的源码,相信大家都有所了解,这些APP的demo都是用imag.js开发的
由于之前开发过预约订餐的demo,想着也可以试试预约住宿的APP,如果要重新设计很麻烦,而且也只是想搞一个demo,并不发布上线,就在应用商店里搜寻到一个很新颖的应用,仿照着做。找到我们的UI美女把全部的图片切给我,接下来就是开发了。
在imag.js中像素的默认单位是dp,文字的大小只要写数字即可。
由于APP中的图片特别多,加载慢,所以并没有把图片直接放到资源里,而是以json格式编写图片上传到模拟数据中,容易调用。使用imag.js调用客户端信息功能$phone.info(),可以获取手机屏幕的信息参数,方便调整像素比例。
其中一个页面使用了侧滑菜单控件SlidingMenu 来完成信息导航(如下图)。SlidingMenu定义了两个item,第一个item一开始是隐藏的,当点击左上角按钮时调用open()方法显示侧滑菜单,当然,SlidingMenu本身就带了滑动的效果,右滑就可以响应出侧边栏。如果使用原生的话,Android倒是提供了HorizontalScrollView,虽然不用手动处理各种冲突,但也要了解事件的分发机制。
下图使用了弹出菜单控件popupmenu,内容填充部分一个列表list搞定,可以自己设置list的背景,边距,文字颜色等样式。
上图中的产品类型选择由上拉菜单控件actionmenu展示,ActionMenu控件用来显示iOS ActionSheet风格的上拉菜单,风格固定,不能自己定制背景和样式,并且只能通过JavaScript脚本动态创建。效果图如下
下面的几张效果图相对来说就很简单了,大多数布局都是用的list控件实现的,跳转页面使用onclick="$page.open('')"方法。个别页面加入了screen控件来展示多组图片。
下面的代码是最后一张图邀请好友的源代码
<?xml version="1.0" encoding="utf-8"?> <imag> <page> <title style="background:#ffffff;height:52"> <left> <icon src="back_gray.png" style="margin-left:20" onclick="$page.close()"/> <label style="font-size:18;color:#3a3a3a;margin-left:32">邀请好友</label> </left> </title> <content style="background:#f5f6f5"> <list type="transparent" style="padding:0 18"> <item style="padding:0;margin-top:27"> <row><button style="background:#ff5a5f;height:44;width:100%;font-size:15;color:#ffffff;align:center;padding-top:2">邀请联系人</button></row> <row style="height:15"></row> <row> <label style="color:#c8cbc6;font-szie:15;align:center">————————</label> <label style="color:#727a7e;font-szie:15;align:center;margin:0 10">或</label> <label style="color:#c8cbc6;font-szie:15;align:center">————————</label> </row> <row style="height:12"></row> <row><label style="color:#4d5153;font-size:13;align:center">分享链接</label></row> </item> <item style="padding:15 0;col-width:*,3,50"> <col><row><button style="background:#ffffff;height:44;width:100%;font-size:15;color:#f474b4d;align:center;padding-top:2">分享到微信</button></row></col> <col></col> <col><row style="height:44;background:#ffffff"><icon src="share.png" style="align:center"/></row></col> </item> <item style="margin-top:15;padding:0 0 44"> <row style="background:#c9ccc7;height:1"></row> <row style="height:30"></row> <row><label style="font-size:15;color:#7a8286;align:center">您有旅行基金即将到账</label></row> <row><label style="font-size:15;color:#ff4c51;align:center">查看过去的邀请</label></row> </item> </list> </content> </page> </imag>
更详细的源码链接
- airbnb.zip (6 MB)
- 下载次数: 0
发表评论
-
访问后台数据库有多6,看看这里便知
2016-10-14 17:29 584相信使用爱码哥的小伙 ... -
label和slideimage共存|用得到的就拿去
2016-09-13 18:12 540要求:Label标签置于slideimage之上并透明 限制: ... -
新技能get|有了它你也可以做电商app
2016-09-13 18:03 738使用imag.js开发过很多类型的模板,比如新闻、社交、办公类 ... -
imag.js|快速掌握全局方法
2016-08-29 17:17 567使用爱码哥进行移动应用开发时,除了了解基本的内容控件、表单控件 ... -
imag.js|教你如何智做原生APP
2016-08-17 18:03 672手机计算器是我们日常中很熟悉并且使用起来非常简单的应用了,这样 ... -
开发技巧汇总|对于imag.js你不知道的事
2016-08-03 16:48 5651. imag.js里有哪些标准JavaScript对象? i ... -
爱码哥移动开发平台|让制作app更加便捷
2016-04-26 15:14 570本文来自爱码哥CTO邱杨(Terry)同学 随着HTM ... -
关于使用iMAG.js出现的问题及解决方法
2016-05-05 18:05 541●list子标签的Item默认交互效果能取消吗? se ... -
移动开发|浅谈list列表布局控件
2016-05-11 10:54 480在iMAG开发app中界面布 ... -
iMAG中的复用列表的使用说明
2016-05-11 17:29 463复用列表(resue list)在爱码哥中是不同于普通列表的 ... -
iMAG(爱码哥)新建应用
2016-05-18 14:22 450在爱码哥移动应用开发平台如何新建应用? 在首页找到工作台 ... -
微信页面的代码|你一定没有看过这么神奇的代码
2016-05-18 16:01 915Android iOS: 代码: &l ... -
移动开发|绘制饼图、柱状图、2d、3d统计图表
2016-05-31 12:29 616通过HTML5的canvas来绘制图表功能,需要用到web控 ... -
作为开发者不可不收藏的十大开发语言和框架
2016-06-02 09:48 4381.Android SDK Android开发者不可 ... -
作为开发者不可不知的Native App,Web App,Hybrid App等技术的对比
2016-06-12 18:10 380随着移动开发需求的不断增多,五花八门的开发方式也层出不穷,作 ... -
移动应用开发跨平台工具imag.js入门
2016-07-05 15:47 450imag.js是一种NativeScript形式的框架,它兼 ... -
爱码哥移动开发平台的4大开发环境
2016-07-06 14:16 440imag.js是一种NativeScript形式的框架,它兼 ... -
推荐爱码哥移动开发平台十大常用的原生UI控件
2016-07-06 17:52 436imag.js是一种NativeScript形式的框架,它兼 ... -
一个初级开发者完胜十几人团队,此处有秘诀!
2016-07-22 18:55 674最近今日头条很火,作为一名喜欢钻研的开发者,仔细研究了他们的A ... -
H5实现APP和原生方式有多大差距,多少坑?JS才是王道!
2016-07-15 12:52 6944纯H5的APP,虽然开发起来要比纯原生开发畅快的多,但最终效果 ...
相关推荐
移动应用开发中的图标(ICON)是用户界面设计中不可或缺的部分,它们不仅提升应用的视觉吸引力,还能有效地传达功能和信息,使用户能够快速理解和操作。本文将深入探讨移动应用开发中图标的重要性和使用方法,以及...
综上所述,这个期末大作业涵盖了移动应用开发的多个核心环节,从用户交互设计到功能实现,再到后台服务支持,都是学生需要掌握的重要技能。通过这个项目,学生不仅可以深化对移动应用开发的理解,还能提升实际操作...
这些政策涵盖了数据安全、隐私保护、合规运营等多个方面,要求移动应用开发商加强安全措施,确保应用的合规性。 ##### (三)5G时代移动金融应用发展 5G技术的到来为移动金融应用带来了新的发展机遇。更高的数据...
混合移动应用开发结合了原生应用的性能和Web应用的开发效率,它通常利用像Cordova或React Native这样的框架,允许开发者使用JavaScript编写代码,然后将其编译成可以在iOS和Android等平台上运行的原生应用。...
iPhone应用程序开发指南是iOS开发领域的专业参考书,为开发者提供...随着移动设备的普及和移动互联网的发展,掌握iPhone应用开发技能变得越来越重要,对于希望在移动应用市场取得成功的人来说,这些知识是不可或缺的。
在Android移动应用开发中,ListView组件是至关重要的,尤其对于处理大量数据的显示。这个组件允许用户以列表形式查看内容,即便内容数量庞大,屏幕无法一次性完全显示,用户可以通过滚动来查看更多的信息。ListView...
在iOS开发中,移动应用开发是一项关键技能,尤其在当今高度依赖智能手机的时代。本教程将聚焦于一个重要的实践环节——如何实现多图片的多线程下载。这一功能对于提升用户体验至关重要,因为它允许用户在后台加载...
6. Android应用开发实践:演讲会结合实际的开发实践,将理论与实际案例相结合,说明凡客应用是如何具体实现上述架构和技术点的。 总体来说,通过演讲内容,我们可以了解到在开发一个高性能的电商移动应用时,如何...
标题中的“netbean移动开发入门”指的是利用NetBeans IDE进行J2ME(Java 2 Micro ...这个教程对于初学者来说是一个很好的起点,能帮助他们快速理解J2ME和NetBeans的结合使用,进一步掌握移动应用开发的基本技能。
1. **范围**:这部分规定了该标准适用于中国移动开发者社区内的所有应用开发活动,无论是网页应用还是移动Web应用,都需要遵循这些规定。 2. **规范性引用文件**:此处列出了开发过程中需要参考的相关标准和技术...
在移动应用开发领域,图标设计是一项至关重要的工作。一个优秀的图标不仅能够提升应用程序的视觉吸引力,还能有效地传达功能和信息,使用户能够快速理解和使用应用。"移动开发素材大全"这个压缩包文件提供了丰富的...
### 搭建无服务器架构的移动应用 ...总之,无服务器架构为移动应用开发带来了巨大的便利性和灵活性。通过合理利用AWS提供的各种服务和工具,我们可以构建出高性能、可扩展且易于维护的移动应用后端系统。
一个典型的例子是微博客户端,其在短时间内进行了多次迭代更新,反映出移动应用快速发展的需求和市场响应速度的重要性。 对于移动应用而言,产品质量是关键,这包括外部质量和内部质量。外部质量通常指的是用户界面...
在Windows Mobile平台上进行移动应用开发是一项技术性强且充满挑战的任务,因为这涉及到适应小型设备的屏幕、处理有限的硬件资源以及提供优秀的用户体验。本资源集合提供了详细的教程,旨在帮助开发者设计出用户友好...
### 应用于移动互联网的Peer-to-Peer关键技术 #### 一、引言 随着移动互联网技术的迅速发展,用户对于随时随地获取信息和服务的需求日益增长。Peer-to-Peer(P2P)技术作为一种分布式计算模型,因其高效性、扩展性...
界面设计作为连接用户与应用的重要桥梁,在移动应用开发过程中扮演着至关重要的角色。本文将基于给定文件中的内容,深入探讨移动应用界面设计的关键要素,以及如何通过有效的设计策略来提升用户体验。 #### 二、...