`
前进的路中没有月亮
  • 浏览: 20666 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

移动应用开发技术过多,该如何做选择

阅读更多
随着互联网创业的持续升温,市场对于移动应用开发的开发者需求也供大于求,对于移动端开发工具技术也五花八门,大致分为三大类,第一种就是纯原生开发,纯原生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控件来展示多组图片。
   
   
   
下面的代码是最后一张图邀请好友的源代码
<?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>

更详细的源码链接
0
0
分享到:
评论

相关推荐

    移动应用开发ICON

    移动应用开发中的图标(ICON)是用户界面设计中不可或缺的部分,它们不仅提升应用的视觉吸引力,还能有效地传达功能和信息,使用户能够快速理解和操作。本文将深入探讨移动应用开发中图标的重要性和使用方法,以及...

    移动平台应用开发期末大作业

    综上所述,这个期末大作业涵盖了移动应用开发的多个核心环节,从用户交互设计到功能实现,再到后台服务支持,都是学生需要掌握的重要技能。通过这个项目,学生不仅可以深化对移动应用开发的理解,还能提升实际操作...

    移动金融应用安全白皮书.pdf

    这些政策涵盖了数据安全、隐私保护、合规运营等多个方面,要求移动应用开发商加强安全措施,确保应用的合规性。 ##### (三)5G时代移动金融应用发展 5G技术的到来为移动金融应用带来了新的发展机遇。更高的数据...

    一个移动应用开发工具完全基于存储在JSON文件中的HTML创建App

    混合移动应用开发结合了原生应用的性能和Web应用的开发效率,它通常利用像Cordova或React Native这样的框架,允许开发者使用JavaScript编写代码,然后将其编译成可以在iOS和Android等平台上运行的原生应用。...

    iPhone应用程序开发指南.pdf

    iPhone应用程序开发指南是iOS开发领域的专业参考书,为开发者提供...随着移动设备的普及和移动互联网的发展,掌握iPhone应用开发技能变得越来越重要,对于希望在移动应用市场取得成功的人来说,这些知识是不可或缺的。

    Android移动应用开发中列表视图组件单元主要内容.pdf

    在Android移动应用开发中,ListView组件是至关重要的,尤其对于处理大量数据的显示。这个组件允许用户以列表形式查看内容,即便内容数量庞大,屏幕无法一次性完全显示,用户可以通过滚动来查看更多的信息。ListView...

    移动应用开发-iOS开发示例教程之多图片多线程下载.zip

    在iOS开发中,移动应用开发是一项关键技能,尤其在当今高度依赖智能手机的时代。本教程将聚焦于一个重要的实践环节——如何实现多图片的多线程下载。这一功能对于提升用户体验至关重要,因为它允许用户在后台加载...

    汪健飞、徐金山:凡客移动应用之Android + HTML5技术运用

    6. Android应用开发实践:演讲会结合实际的开发实践,将理论与实际案例相结合,说明凡客应用是如何具体实现上述架构和技术点的。 总体来说,通过演讲内容,我们可以了解到在开发一个高性能的电商移动应用时,如何...

    netbean移动开发入门

    标题中的“netbean移动开发入门”指的是利用NetBeans IDE进行J2ME(Java 2 Micro ...这个教程对于初学者来说是一个很好的起点,能帮助他们快速理解J2ME和NetBeans的结合使用,进一步掌握移动应用开发的基本技能。

    中国移动开发者社区应用开发要求.pdf

    1. **范围**:这部分规定了该标准适用于中国移动开发者社区内的所有应用开发活动,无论是网页应用还是移动Web应用,都需要遵循这些规定。 2. **规范性引用文件**:此处列出了开发过程中需要参考的相关标准和技术...

    移动开发素材大全

    在移动应用开发领域,图标设计是一项至关重要的工作。一个优秀的图标不仅能够提升应用程序的视觉吸引力,还能有效地传达功能和信息,使用户能够快速理解和使用应用。"移动开发素材大全"这个压缩包文件提供了丰富的...

    搭建无服务器架构的移动应用.pdf

    ### 搭建无服务器架构的移动应用 ...总之,无服务器架构为移动应用开发带来了巨大的便利性和灵活性。通过合理利用AWS提供的各种服务和工具,我们可以构建出高性能、可扩展且易于维护的移动应用后端系统。

    移动端开发技术 移动客户端开发随想 共55页.pdf

    一个典型的例子是微博客户端,其在短时间内进行了多次迭代更新,反映出移动应用快速发展的需求和市场响应速度的重要性。 对于移动应用而言,产品质量是关键,这包括外部质量和内部质量。外部质量通常指的是用户界面...

    Windows移动开发:设计友好的Windows Mobile 应用程序

    在Windows Mobile平台上进行移动应用开发是一项技术性强且充满挑战的任务,因为这涉及到适应小型设备的屏幕、处理有限的硬件资源以及提供优秀的用户体验。本资源集合提供了详细的教程,旨在帮助开发者设计出用户友好...

    应用于移动互联网的p2p技术

    ### 应用于移动互联网的Peer-to-Peer关键技术 #### 一、引言 随着移动互联网技术的迅速发展,用户对于随时随地获取信息和服务的需求日益增长。Peer-to-Peer(P2P)技术作为一种分布式计算模型,因其高效性、扩展性...

    移动应用的界面设计

    界面设计作为连接用户与应用的重要桥梁,在移动应用开发过程中扮演着至关重要的角色。本文将基于给定文件中的内容,深入探讨移动应用界面设计的关键要素,以及如何通过有效的设计策略来提升用户体验。 #### 二、...

Global site tag (gtag.js) - Google Analytics