领购物优惠券9块9包邮
首页 > 移动开发 > 其他开发 > Webapp开发

如何在Linux上开发跨平台的移动应用程序？

   2015-06-24 0
核心提示：过去这几年见证了移动市场的迅猛发展，推动这个市场发展的主要是一大批应用程序。作为消费者，我们都讨厌看到任何一种平台造成的某种市场垄断局面。毕竟，竞争越激烈，创新越多。作为开发人员，我们对跨平台开发怀有复杂的心情。跨平台开发存在几个缺点，比如糟糕的平台集成和欠灵活的设计等等。可是另一方面，我们又能够接触拥有更多消费者的更广阔市场，能够为我们开发的应用程序在众多平台上提供统一的外观和感觉。

【乐学网（lexue001.com）译文】过去这几年见证了移动市场的迅猛发展，推动这个市场发展的主要是一大批应用程序。作为消费者，我们都讨厌看到任何一种平台造成的某种市场垄断局面。毕竟，竞争越激烈，创新越多。作为开发人员，我们对跨平台开发怀有复杂的心情。跨平台开发存在几个缺点，比如糟糕的平台集成和欠灵活的设计等等。可是另一方面，我们又能够接触拥有更多消费者的更广阔市场，能够为我们开发的应用程序在众多平台上提供统一的外观和感觉。

如今，几乎所有现代的移动平台都提供面向对象的API。因而，没有理由不开发跨平台的应用程序。我们在本教程中将逐步介绍跨平台开发的基础知识。我们将使用来自Appcelerator的Titanium SDK作为一种跨平台SDK（软件开发工具包）。

我们需要哪些东西？

•了解Java

•PC

•安卓SDK

•Titanium SDK

作为一种开发平台，Titanium让你可以通过单一源代码为谷歌安卓以及苹果iOS开发原生应用程序。它使用Java作为主语言，还能够与HTML和JavaScript协同运行。它并不依赖WebUI，而且具有扩展性。模块可以用Objective-C编写而成。

对于通晓Java和HTML的那些人来说，Titanium是切入移动开发的一个很好的起点。想开发安卓应用程序，你就需要安卓SDK；如果想开发iOS应用程序，则需要Mac。幸好对我们来说，一旦你有了代码，就可以将代码导入到Mac上的Titanium，然后针对iOS编译代码。

想让Titanium SDK正常使用，我们就需要下列：

•Oracle Java JDK 6或7

•Node.js

•安卓SDK和安卓NDK

•至少2 GB内存

在此下载Titanium SDK（需要注册）：https://my.appcelerator.com/auth/signup。

如何在Linux上开发跨平台的移动应用程序？

Titanium下载完毕后，进入到下载目录，将它解压缩到/opt。

$ sudo unzip titanium.linux.gtk.x86_64.zip -d /opt

下一步进入到终端，设置路径。

$ echo 'export MOZILLA_FIVE_HOME=/usr/lib/mozilla' >> ~/.bashrc

$ source ~/.bashrc

接下来，我们要为Titanium SDK安装所有依赖项。

在Ubuntu或Debian上，我们将使用apt-get：

$ sudo apt-get install libjpeg62 libwebkitgtk-1.0-0 lib32z1 lib32ncurses5 lib32bz2-1.0

在Fedora，使用yum：

$ sudo yum install libjpeg62 libwebkitgtk-1.0-0 lib32z1 lib32ncurses5 lib32bz2-1.0

依赖项安装完毕后，我们要重新安置Titanium，具体如下所示。

$ sudo ln -s /opt/Titanium_Studio/TitaniumStudio /usr/local/bin/TitaniumStudio

在我们头一次运行Titanium SDK之前，必须为Titanium建立一个构建目录（build directory）。通常我在/home目录中有一个名为“builds”的文件夹（下面另有子文件夹），存放着我的所有项目。不妨先建立一个构建目录。

$ mkdir ~/builds

构建目录建立完毕后，启动Titanium。

$ TitaniumStudio

如何在Linux上开发跨平台的移动应用程序？

用你在下载Titanium过程中创建的那个用户帐户登录上去，浏览至你的构建目录。

如何在Linux上开发跨平台的移动应用程序？

Titanium SDK的工作窗口连接到你之前创建的帐户。它提供了丰富的信息和大量的帮助。在左边，我们可以选择是创建一个新项目还是导入旧项目。就该教程而言，我们将创建一个新项目，于是选择“Create Project”（创建项目）选项卡。

如何在Linux上开发跨平台的移动应用程序？

在新项目窗口中，我们可以在多个模板之间进行选择。我们将为本教程选择默认的项目模板。

如何在Linux上开发跨平台的移动应用程序？

之后，我们就要为项目命名了。输入应用程序编号（app id）和公司URL。应用程序编号与公司URL正好反过来，以.appname结尾。我们网站的URL是http://xmodulo.com，应用程序名为“firstapp”。这样一来，我们的应用程序编号是“com.xmodulo.firstapp”。

如何在Linux上开发跨平台的移动应用程序？

就命名的项目而言，我们需要选择安卓组件。我通常选择所有安卓组件。

如何在Linux上开发跨平台的移动应用程序？

Titanium会下载和配置所有需要的组件，另外还会更新旧的组件。下载和安装安卓组件后，Titanium会为我们的项目自动打开一个工作窗口。

如何在Linux上开发跨平台的移动应用程序？

工作窗口包括两个选项卡：app.js和应用程序编辑器。app.js用于编写代码，应用程序编辑器窗口则用于提供应用程序信息。

Titanium建立起来后，我们不妨在app.js窗口中创建一些简单的代码，了解Titanium的基本元素。

Titanium中最重要的元素就是窗口元素。窗口其实一点也不复杂。你可以把窗口视作开发成果的容器。就某一个应用程序而言，你可以添加一个或多个窗口。下一个重要元素就是视图元素，这个长方形可容纳其他元素，比如HTML中的标记。重要元素还有标记组和标记。它们又是如何工作的呢？每个标记组都含有一个或多个标记，而每个标记控制多个窗口。

构建简单的应用程序

在教程的这个部分，我们将构建一个简单的应用程序，它只有主要的元素。首先，不妨指定一些基本方面，比如像素。像素大小并不采用标准的px标注，而是采用百分比，而且需要写成字符串。

  1. top,20, 
  2.  
  3. width:"50%"

至于颜色，我们并不使用名称，因为它们采用十六进制RGB颜色码。

  1. backgroundColor:"#f00", 
  2.  
  3. borderColor:"#87C8FF" 

现在使用函数Titanium.UI.createWindow，我们就能构建第一批窗口，稍微详细地阐述一下。

  1. var win1 = Titanium.UI.createWindow({  
  2.  
  3. title:'Tab 1', 
  4.  
  5. backgroundColor:'#fff' 
  6.  
  7. }); 

这个代码意味着什么？它表明，我们将含有所有属性的一个变量传递给createWindows函数。那些元素背后的逻辑很简单。

tagGroup是应用程序的根，不能包含在其他一些元素中。它含有标记，每个标记又含有自己的窗口。不妨把这一切都结合起来，构建成一个演示窗口、标记和视图的简单应用程序。

  1. // 创建标记组 
  2.  
  3. var tabGroup = Titanium.UI.createTabGroup(); 

现在，不妨创建一些窗口和标记。

  1. // 创建基本的UI标记和窗口 
  2. var win1 = Titanium.UI.createWindow({  
  3.  
  4. title:'I am Window 1.', 
  5.  
  6. backgroundColor:'#fff' 
  7.  
  8. }); 
  9.  
  10. var tab1 = Titanium.UI.createTab({  
  11.  
  12. icon:'KS_nav_views.png', 
  13.  
  14.     title:'Tab 1', 
  15.  
  16. window:win1 
  17.  
  18. }); 
  19.  
  20. var win2 = Titanium.UI.createWindow({  
  21.  
  22. title:'I am Window 2', 
  23.  
  24. backgroundColor:'#fff' 
  25.  
  26. }); 
  27.  
  28. var tab2 = Titanium.UI.createTab({  
  29.  
  30. icon:'KS_nav_views.png', 
  31.  
  32. title:'Tab 2', 
  33.  
  34. window:win2 
  35.  
  36. }); 

之后，我们不妨将所有这些连接成一个整体。

  1. // 添加标记 
  2.  
  3. tabGroup.addTab(tab1);  
  4.  
  5. tabGroup.addTab(tab2); 
  6.  
  7. // 打开标记组 
  8.  
  9. tabGroup.open(); 

我们编写好代码后，就需要定义其外观。为此，我们要使用标签元素。有了这个标签元素，我们就可以为应用程序添加背景墙纸，定义原生字体和颜色。另外，它还允许定义其他元素的外观。我们将为开发的这个应用程序定义窗口元素的外观。不妨为我们的应用程序构建一个简单的标签元素。

  1. var label1 = Titanium.UI.createLabel({ 
  2.  
  3.    color:'#999', 
  4.  
  5.    text:'I am Window 1', 
  6.  
  7.    font:{fontSize:20,fontFamily:'Helvetica Neue'}, 
  8.  
  9.    textAlign:'center', 
  10.  
  11.    width:'auto' 
  12.  
  13. }); 

整个源代码又是什么样子呢？

  1. // 创建标记组 
  2.  
  3. var tabGroup = Titanium.UI.createTabGroup(); 
  4.  
  5. // 创建基本的UI标记和根窗口 
  6.  
  7. var win1 = Titanium.UI.createWindow({  
  8.  
  9. title:'Tab 1', 
  10.  
  11. backgroundColor:'#fff' 
  12.  
  13. }); 
  14.  
  15. var tab1 = Titanium.UI.createTab({  
  16.  
  17. icon:'KS_nav_views.png', 
  18.  
  19. title:'Tab 1', 
  20.  
  21. window:win1 
  22.  
  23. }); 
  24.  
  25. var label1 = Titanium.UI.createLabel({ 
  26.  
  27.    color:'#999', 
  28.  
  29.    text:'I am Window 1', 
  30.  
  31.    font:{fontSize:20,fontFamily:'Helvetica Neue'}, 
  32.  
  33.    textAlign:'center', 
  34.  
  35.    width:'auto' 
  36.  
  37. }); 
  38.  
  39. win1.add(label1); 
  40.  
  41. var win2 = Titanium.UI.createWindow({  
  42.  
  43. title:'Tab 2', 
  44.  
  45. backgroundColor:'#fff' 
  46.  
  47. }); 
  48.  
  49. var tab2 = Titanium.UI.createTab({  
  50.  
  51. icon:'KS_nav_views.png', 
  52.  
  53. title:'Tab 2', 
  54.  
  55. window:win2 
  56.  
  57. }); 
  58.  
  59. var label2 = Titanium.UI.createLabel({ 
  60.  
  61.    color:'#999', 
  62.  
  63.    text:'I am Window 2', 
  64.  
  65.    font:{fontSize:20,fontFamily:'Helvetica Neue'}, 
  66.  
  67.    textAlign:'center', 
  68.  
  69.    width:'auto' 
  70.  
  71. }); 
  72.  
  73. win2.add(label2); 
  74.  
  75. // 添加标记 
  76.  
  77. tabGroup.addTab(tab1); 
  78.  
  79. tabGroup.addTab(tab2);  
  80.  
  81. // 打开标记组 
  82.  
  83. tabGroup.open(); 

如何在Linux上开发跨平台的移动应用程序？

这就是我们这个简单的应用程序在安卓模拟器中运行时呈现的样子。

如何在Linux上开发跨平台的移动应用程序？

这段代码短小又简单，却是一个很好的起点，可以趁机开始体验跨平台开发。

英文原文：http://xmodulo.com/develop-cross-platform-mobile-apps-linux.html

布加迪编译

 
反对 0举报 0 评论 0
 

免责声明：本文仅代表作者个人观点，与乐学笔记（本网）无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，若因作品内容、知识产权、版权和其他问题，请及时提供相关证明等材料并与我们留言联系，本网站将在规定时间内给予删除等相关处理.

  • Handlebars模板引擎介绍和开发指南
    Handlebars是一个Javascript模板引擎，能让你轻松高效的编写语义化模板，它是Mustache模板引擎的一个扩展，Handlebars和Mustache都是弱逻辑的模板引擎，能将Web前端的视图和代码分离，降低两者之间耦合。
    06-26
  • KendoUI2014移动调查报告：HTML5vs原生之辩
    KendoUI2014移动调查报告：HTML5vs原生之辩
    Telerik Kendo UI一直比较关心移动开发领域的使用情况，在最新的2014 HTML5全球开发者调查中，Kendo UI面向3500+个开发者，从普通程序员到CIO/CTO，从大型企业到小型企业，对他们的移动开发偏好展开了调查。
    06-26
  • WebComponents-面向未来的组件标准
    WebComponents-面向未来的组件标准
    对于前端开发者而言，W3C组织制定的HTML标准以及浏览器厂商的实现都是“鱼”而 不是“渔”，开发者在需求无法满足的情况下通过现有技术创造了各种组件，虽然短期满足了需求但是由于严重缺乏标准，导致同一个组件有成千上万的相似实现但 它们却无法相互重用，这很大程度上制约了组件化的最大价值-重用，Web Components则在组件标准化方面向前迈了一大步。
    06-26
  • AppCan：HybridApp技术已经成熟
    AppCan：HybridApp技术已经成熟
    在移动开发技术里，Native App和Web App之争一直没有停息，而介于Native和Web之间的Hybrid混合App异军突起，以其接近Web App开发简单、跨平台能力，以及接近Native App功能和性能表现逐渐为开发者们所接受，那么，现在Hybrid App发展到了什么程度呢？正益无线技术支持总监邱革节在接受51CTO记者采访时表示，Hybrid App技术已经成熟。
    06-26
  • 什么是ShadowDom？
    什么是ShadowDom？
    如果我需要把每个自定义的按钮都放到iframe里，你是什么感觉，会不会疯掉？所以，我们需要一些更好的东西。事实上，大部分的浏览器已经变相地提供了一种强大技术去隐藏一些实现细节。这个技术就是所谓的“shadow DOM”。
    06-26
  • 使用ShadowDOM创建Web组件
    使用ShadowDOM创建Web组件
    Web Components（组件）标准是一系列最新推出的标准，它可以被用来创建可被复用的Web部件，当页面中所使用的Web部件被更新为新版本时不必修改 页面中其他任何代码。这里所说的部件，是一种可实现与用户之间的交互的可视化组件，开发者可以使用HTML代码与JavaScript脚本代码来开发这些 部件。Web Componnts标准定义如何开发这些部件。
    06-26
  • GooglePolymer以及WebUI框架的未来
    开发者Axel Rauschmayer在自己的博客上详解了Google Polymer的设计理念与组成架构，深得Polymer开发者的认同。他认为Polymer这样高互操作性的设计才应该是Web开发的未来。
    06-26
  • WebComponents实例：移动UI组件库GMU介绍
    GMU（Global Mobile UI）是百度前端通用组开发的移动端组件库，具有代码体积小、简单、易用等特点，组件内部处理了很多移动端的bug，覆盖机型广，能大大减少开发交互型组件的工作量，非常适合移动端网站项目。
    06-26
  • 移动应用新趋势：离线WebApp
    移动业界已经最终放弃了不分时间、不分地点为用户提供互联网连接服务的幻想。我们也看到了一系列新型产品与服务，它们的兴起标志着我们将以更为灵活的方式在无法接入网络时继续享受功能与便利。
    06-26
  • 2014年Web开发的7个转变方向
    2014年Web开发的7个转变方向
    很多读者喜欢预测网页设计趋势，让自己能够在网页设计、甚至网络发展中保持先机。找准每一年的发展趋势很重要。那么，2014年会有怎样的发展？我们一起来分析。
    06-26
更多>其他开发
KendoUI2014移动调查报告：HTML5vs原生之辩 WebComponents-面向未来的组件标准
更多>Android开发
说一说Android Studio和IDEA中一个很有用的内存调试插件 安卓中通知功能的具体实现
更多>IOS开发
详解iOS开发中的转场动画和组动画以及UIView封装动画 iOS开发基础之C语言
更多>WP开发
微软官方公布Win10家庭版欧美地区零售价 Win10 Mobile预览版10149已知问题与解决办法汇总
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  网站留言  |  违规举报