通过Intel XDK编写跨平台app(二)

最新推荐文章于 2024-09-21 11:29:05 发布

hmonkey915

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量869

点赞数

文章标签： app 前端手机 html5 ios7

通过Intel XDK编写跨平台app(一)

通过Intel XDK编写跨平台app(二)

在这个系列的上一篇文章中，我们大致了解了Interl XDK的概况。在这一部分中，我们会详细地介绍如何通过这个框架来构建app，这里我们会以一个简单的照片分享应用为例。

你可以在Github上找到这个例子的最终代码。

对比一下几个框架

Intel XDK支持几种不同的HTML5架构： App Framework, Bootstrap, TopCoat 和JQuery Mobile。APP Designer同时也支持这些不同的框架。介初学者模式App Starter只支持App Framework。

App Framework 是一个简单的前端框架，它的UI组件都只能用来构建这种类型的应用，而且它能通配各种手机操作系统。在IOS设备上，它看上去和IOS本地组件差不多，在Android设备上，它看上去又和Android本地组件相似，在其它设备中也是这种情况。不仅如此，App framework是一个轻量级的框架，速度也非常快。

JQuery mobile 是一个很经典的手机应用框架了。它已经有很多看的历史，是现如今为数不多的依然存活的框架。你可以在它的库中找到很多的组件，但是这个框架有个很多问题，它很慢，通配做的不好，而且看上去并不像本地应用。

TopCoat 它是个显为人知的框架。它其实并不是一个完整的框架，只是提供了完整的UI组件。

Bootstrap 它应用是最明星的一个框架了，它用来构建web页面和手机的响应式网站。我第一次使用它的时候真是有点惊讶，因为它毕竟不是一个混合式的应用开发框架。

现在开始编码吧！

让我们从创建一个项目开始，你可以通过点击左上方的”Start New Project“按钮来创建一个应用。然后选择“App Starter”创建方式来创建一个App Framework的工程。

下图是你创建项目的原型：

在css文件夹中创建一个style.css文件，然后创建一个app.js在js文件夹中。imageswhere文件夹用来存放图片资源。这个项目中我们不会使用任何第三方API，如果你在其它项目中需要使用，可以通过编辑项目来添加。

我首先要做的就是清理Inter XDK自动生成的没用的代码，清理之后你可以这样做：

  
  
   
   
    
    <!DOCTYPE html>
<html>
 
    <head>
 
        <!-- Meta data -->
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="Pragma" content="no-cache">
 
        <script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
        <script type="text/javascript" language="javascript">
            var isIntel=window.intel&amp;&amp;window.intel.xdk
 
            // This event handler is fired once the intel libraries are ready
            function onDeviceReady() {
                //hide splash screen now that our app is ready to run
                intel.xdk.device.hideSplashScreen();
                setTimeout(function () {
                    $.ui.launch();
                }, 50);
            }
 
            //initial event handler to detect when intel is ready to roll
            document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
 
        </script>
 
        <script src="js/appframework.ui.min.js"></script>
 
        <script>
            if(isIntel)
                $.ui.autoLaunch = false;
                $.ui.useOSThemes = true; //Change this to false to force a device theme
                $.ui.blockPageScroll();
                $(document).ready(function () {
                    if ($.ui.useOSThemes &amp;&amp; (!$.os.ios||$.os.ios7))
                        $("#afui").removeClass("ios");
                });
        </script>
 
        <!-- Import the css files -->
        <link href="css/icons.css" rel="stylesheet" type="text/css">
        <link href="css/af.ui.css" rel="stylesheet" type="text/css">
        <link href="css/style.css" rel="stylesheet" type="text/css">
 
    </head>
 
    <body>
 
        <div id="afui">
 
 
        </div>
 
        <script src="js/data.js"></script>
        <script src="js/app.js"></script>
    </body>
 
</html>

在这个例子中，我添加了app,js和style.css。让我们简单的分析一下上面的代码，在开关处添加了一些元数据，这些你不需要修改。

第一个JavaScript代码块隐藏了光标，第二段Javascript代码可以用来配置应用运行的平台，这里我配置了IOS7。

你首先应该知道的是id为afui的div，你需要用这个id来定义一个元素，它就像你应用的根一样，所有的东西都会从这个元素开始。除了这个元素，我们还定义了header,footer和应用所有的页面。

  
  
   
   
    
    <div id="afui">
 
    <div id="header" class="header"></div>
 
</div>

这个id是header的div，也就是说普通意义上的header元素，App Framework将会把很多自动生成的东西放到这个div中，你同样也可以在其中加入一些你想要的内容，比如你想在页面中添加一个回退按钮或是定义一个标题。我的建议是少在这个div中添加东西，你应该让它保持整洁。

你app的所有内容都会放到id为content的div中：

    
    
     
     
      
      <div id="content">
 
    <div class="panel" title="Photos" id="main_pg" selected="selected">
        <!-- All the content goes here -->
    </div>
 
    <!-- You can add other panels here -->
</div>

当你添加一个面板，你应该添加一个属性，比如标题的属性是显示在一个页面的头部，而id这个属性则用来定义不同panel的位置，selected属性则可以设置主tab是否显示，主页面只有一个，所以这个属性只能设置一次。

最后你需要做的就是定义一个footer：

   
   
    
    
     
     <div id="afui">
 
    <div id="header" class="header"></div>
 
    <div id="content">
        .....
    </div>
 
    <!-- the footer -->
    <div id="navbar" class="footer">
        <a href="#main_pg" class="icon home">Home</a>
        <a href="#myphotos_pg" class="icon picture">My Photos</a>
    </div>
 
</div>

在footer中，你可以通过text和icon属性来添加tabs，通常来说我们用tags和href属性来定义面板跳转到哪个tab。在这个例子中它是#main_pg。在这个类中，你可以定义这个tab的图标。在例子中，第一个tab有一个home图标，第二个tab的图标则是一个photo。

在style.css中你可以看到这些图标的引用。

我们添加了第二个链接，链接到footer,你可以添加任意的面板做为跳转页面。

  
  
   
   
    
    <div id="content">
 
    <div class="panel" title="Photos" id="main_pg" selected="selected">
        <!-- All the content goes here -->
    </div>
 
    <div class="panel" title="My Photos" id="myphotos_pg">
 
        <span>My Photos</span>
 
    </div>
 
</div>

在虚拟机中测试：

Screenshot of the app

我们看到所有的组件都正常工作了。但由于两个tabs都是可见的，所以后退按钮是没有用的。

    
    
     
     
      
      <div id="afui">
 
    <div id="header" class="header"></div>
 
    <header id="myphotos_header">
        <h1 id="pageTitle">My Photos</h1>
    </header>
 
    ......
</div>

让我们添加一个没有后退按钮的header。在header中通过data-header="myphotos_header"设置一个跳转到头部的链接。最终myphotos-pg应该是这样：:

    
    
     
     
      
      <div class="panel" data-header="myphotos_header" id="myphotos_pg">
 
    <span>My Photos</span>
 
</div>

再次在虚拟机中测试，所有的功能都正常运行了，后退按钮不也不见了。

Two tabs running in our app

总结

在这一部分，我详细地解说了如何通过Intel XDK创建一个新工程，大家应该可以发现方法和HTML很相似，很容易上手。

hmonkey915

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫