[android] cordova/phonegap + jQuery.mobile 最小 android 示例

最新推荐文章于 2021-05-31 18:07:49 发布

findsafety

最新推荐文章于 2021-05-31 18:07:49 发布

阅读量1.4k

点赞数

[android] cordova/phonegap + jQuery.mobile 最小 android 示例

玩了这么久，其实也就是最近才开始准备真正学习一下 android。研究了一下原生ADT的开发，跟着官方tutorial 走了两三节，就发现想继续走下去就不是很容易。一方面，玩了不久，以 android3.0 为风水领，教程需要分两边来推进，对于博主这样的人来说，自然是玩新的，直接整 kitkat，当官方教程走不下去的时候，再求助于市面上已有的教材，突然有发现，绝大多数的教材又是以 2.x 为基础来玩的。难怪微博上看到有人说，纸质教材一上市，就已过时。4.4 这边的开发，或更加简单，或更加复杂（比方说 fragment 就是老版本所没有的），又很难跟着一步步来操练。另一方面，博主现在的工作，其实还是要和 java 打交道，虽然也是有点底子，但是最近这大半年都是在玩 python 的节奏，再让我来整 java，终究是头比较大，难免抵触。不过 android 还是要学学的，怎么办呢？

去年秋天，在上海参加创客马拉松的时候，经@honghao86介绍，就知道 phonegap ，突然发现用这个开发还是很快速的，而所用技术基本是前端这边的js。因为是纯 web 的实现，所以甚至可以在各个平台很方便的移植和部署，而且直接再借助 jquery.mobile ，界面一下子也很高端的样子，动画效果也很丰富，还是学这个好了。如果一定要用 java 玩 native 应用，看来也不要太操之过急，用 phonegap 熟悉了 android 平台，再作转型不迟。

不过整 phonegap 也遇到和之前提到的 android 版本发展迅速的问题。移動端的發展真是快呀~ 新版本的 phonegap 命令行工具已經不再叫 “phonegap “，已经改为“ cordova ”。至于 phonegap 和 cordova 之间的渊源，可以参考《PhoneGap, Cordova, and what’s in a name?》，我这边估计还是解释不清楚。不过现在，即便是 phonegap 的官方教程，也是下载 cordova 的命令行工具。所以，我现在开始学习，主要的参考文档，还是来自与 cordova 这边，虽然 phonegap 似乎也提供了几乎一模一样的API。

现在开始（所有的开发都是在 ubuntu 14.04 x64 环境下进行）

1. 工具包准备

Android SDK ，我当前的版本是 adt-bundle-linux-x86_64-20140321.zip
。
nodejs + cordova

$ mkdir -p ~/tools/android
$ cd tools/android
$ cp Downloads/adt-bundle-linux-x86_64-20140321.zip .
$ unzip adt-bundle-linux-x86_64-20140321.zip
$ ln -s adt-bundle-linux-x86_64-20140321 adt-bundle-linux-x86_64

当然，如果系统没有 java 的哈，最好装上个 Oracle 的 Java，参考这里。
完成以后结果大概是这样：
photo Screenshotfrom2014-06-09235300_zpsf464daed.png
设置软链接的主要是为了方便未来环境变量的设置，如果ADT版本升级，也只要重新指一下就好了。

$ sudo apt-get install nodejs npm nodejs-legacy ant
$ sudo npm install -g cordova

进入工作空间，设置相应的PATH环境变量，

$ cd ~/workspace/android
$ vi venv.sh

其中，venv.sh的内容为

#!/bin/sh
 
export PATH=${PATH}:${HOME}/tools/android/adt-bundle-linux-x86_64/sdk/platform-tools:${HOME}/tools/android/adt-bundle-linux-x86_64/sdk/tools

以后，进入工作空间以后，通过执行venv.sh，就可以给PATH添加所需要的路径
photo Screenshotfrom2014-06-10001921_zps05a5af8e.png

2. Hello, world

$ cordova create hello org.aguegu.hello Hello
$ cd hello
$ cordova platform add android

cordova create 的三个参数，分别是工程文件夹名，工程命名空间，以及工程名。
在 add platform 之前，hello/platforms 项下是没有内容了，add 以后就添加了一个 android 文件夹。

其实此时，第一个应用，至少是其程序框架，就都已经建立好了。开启手机的开发模式，连上电脑，执行

$ cordova run android

稍等片刻，手机上就已经装好并执行了这个Hello应用，如题图。

自动生成的 index.html 文件：

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>Hello World</title>
  </head>
  <body>
    <div class="app">
      <h1>Apache Cordova</h1>
      <div id="deviceready" class="blink">
        <p class="event listening">Connecting to Device</p>
        <p class="event received">Device is Ready</p>
      </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
      app.initialize();
    </script>
  </body>
</html>

有一点 html 基础的，看到这个结构已经再简单不过了。css 在 head 里面，而 js 集中在 body 节点的最后。这样可以提高页面加载的速度。比较诡异的地方是，系统嵌入了 cordova.js 文件，而该文件并不能在 www 文件夹内找到。可以这个文件是在 build 的时候由系统再加入的。

config.xml 文件：

<?xml version='1.0' encoding='utf-8'?>
<widget id="org.aguegu.hello" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>Hello</name>
  <description>
    A sample Apache Cordova application that responds to the deviceready event.
  </description>
  <author email="dev@cordova.apache.org" href="http://cordova.io">
    Apache Cordova Team
  </author>
  <content src="index.html" />
  <access origin="*" />
</widget>

config.xml 文件是当前 app 的配置文件，可以配置应用 id、简介、作者信息等等。content 指向的是 www 文件夹的首页。

index.js:

var app = {
  // Application Constructor
  initialize: function() {
    this.bindEvents();
  },
  // Bind Event Listeners
  //
  // Bind any events that are required on startup. Common events are:
  // 'load', 'deviceready', 'offline', and 'online'.
  bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
  },
  // deviceready Event Handler
  //
  // The scope of 'this' is the event. In order to call the 'receivedEvent'
  // function, we must explicitly call 'app.receivedEvent(...);'
  onDeviceReady: function() {
    app.receivedEvent('deviceready');
  },
  // Update DOM on a Received Event
  receivedEvent: function(id) {
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');
 
    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');
 
    console.log('Received Event: ' + id);
  }
};

作为当前页面最主要的程序部分，入口是在 initialize()，不过这个程序是有点歧义的：

document.addEventListener()中的’deviceready’，真的是系统事件的标签；而app.receivedEvent()中的’deviceready’实际上是用于找到页面中的id为”deviceready”的 div 标签
对于函数的上下文，也有点歧义。中间部分的注释说，函数间的调用，因为 this 指向的是当前函数，所以指不到函数外，所以要用 app 。而为什么一开始在 initialize() 中用的又是 this，而不是 app 呢？不过自己试一下，就发现，把这个 this 也改成 app 是能用的，而把下面的 this 改成 app 却无法正常工作。

其它部分还是比较直接，有点 js 基础就能看明白吧。

3. Cordova Plugins

Cordova 只是提供一个应用框架，要真正和手机平台实现交互，则是通过各种 plugin 来实现。现在加入其中最常用的 org.apache.cordova.device 插件。

cordova plugin add org.apache.cordova.device

device 插件是用来获取设备基本信息的。安装完成以后，原先空的 plagins 目录也有了内容。

在 receivedElement.setAttribute(‘style’, ‘display:block;’); 下面加上这条语句：receivedElement.innerHTML = device.platform;

再次执行，就会发现原来的 “DEVICE IS READY” 变成了 ‘android’ 啦～

photo 2014-06-10023103_zps5f5c09aa.png

cordova 的各类插件有很多，感觉过去几乎涵盖了移动端平台的方方面面，未来根据需要一个个研究就好啦。

4. jQuery Mobile

cordova 搭其了应用框架，各类 plugin 实现了和本地设备的交互，现在我们就要借助 jQuery mobile 来改进一下 UI 层面了。

下载 jquery.mobile-1.4.2.css ，放入 www/css 文件夹
下载 jquery.mobile-1.4.2.js 、 jquery-2.1.1.js 放入 www/js 文件夹

都是当前最新的稳定版本，因为 jquery mobile 也是依赖于 jquery 的，所以，两个js都要有。

编辑 www/index.html，简化了body，同时引用了本地的相关 css 和 js，不再引用之前自动生成的 index.css

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.css" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>Hello World</title>
  </head>
  <body>
    <div data-role="page">
      <header data-role="header">
      <h1>header</h1>
      </header>
 
      <div data-role="main" class="ui-content" id='dev'>			 
      </div>
 
      <footer data-role="footer">
      <h1>footer</h1>
      </div>
    </div>
 
    <script type="text/javascript" src="cordova.js"></script>		
    <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
    <script type="text/javascript" src="js/index.js"></script>				
    <script type="text/javascript">
      app.initialize();
    </script>
  </body>
</html>

编辑 index.js 文件：

var app = {
  // Application Constructor
  initialize: function() {
    this.bindEvents();
  },
  // Bind Event Listeners
  //
  // Bind any events that are required on startup. Common events are:
  // 'load', 'deviceready', 'offline', and 'online'.
  bindEvents: function() {
    document.addEventListener('deviceready', app.onDeviceReady, false);
  },
  // deviceready Event Handler
  //
  // The scope of 'this' is the event. In order to call the 'receivedEvent'
  // function, we must explicitly call 'app.receivedEvent(...);'
  onDeviceReady: function() {		
    var html = '<div data-role="collapsible" data-inset="false">';
    html += '<h4>cordova</h4>';
    html += '<ul data-role="listview">';
    html += '<li>' + device.cordova + '</li>';		
    html += '</ul></div>';
 
    html += '<div data-role="collapsible" data-inset="false">';
    html += '<h4>platform</h4>';
    html += '<ul data-role="listview">';
    html += '<li>' + device.platform + ' ' + device.version + '</li>';
    html += '<li>' + device.model + '</li>';
    html += '</ul></div>';
 
    $('#dev')[0].innerHTML = html;		
    $('[data-role=collapsible]').collapsible().trigger('create');		
    // 这句激活所有 collapsible 标签的按钮，如果没有的话，添加的内容只会以原始的 ul/li 的方式呈现。
  }	
};

主要是编辑 onDeviceReady()，将 device 插件可以提供的一些内容以可伸缩列表的方式打印出来。

photo 2014-06-10033634_zps1125cc43.png

不过，突然发现在 1280×720 的 xhdpi 的屏幕上，字体的显示太小了。这个倒也不难，删去 viewport meta 中，’target-densitydpi=device-dpi’这句就好了，参考这里。

photo 2014-06-10034432_zps4e59b45a.png

到这里，一个最小的 demo 就差不多了吧，集成了 cordova、jQuery mobile 在安卓平台上整了一个小程序。而相信这一步迈出来，接下来的步子都会好走很多。参考各个 plugin 的 api，再研究一下 jquery mobile 里面丰富的样式和动画效果，基本主要靠参考 API 文档就能搞定开发了吧，希望可以帮到大家。

开发大概就是这样，平台搭好了，接下来就是各种展开吧。而要不断做下去，就要有实际项目的锻炼，以及各种内功修为吧。用 cordova 来开发 android 的应用，其实不知不觉也很容易一下子展开到 html5、css、js、
jquery，而这每项再扩展下去，都有许多的功课要作。加油咯～

参考文档：

findsafety

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[android] cordova/phonegap + jQuery.mobile 最小 android 示例

[android] cordova/phonegap + jQuery.mobile 最小 android 示例玩了这么久，其实也就是最近才开始准备真正学习一下 android。研究了一下原生ADT的开发，跟着官方tutorial 走了两三节，就发现想继续走下去就不是很容易。一方面，玩了不久，以 android3.0 为风水领，教程需要分两边来推进，对于博主这样的人来
复制链接

扫一扫