使用 Meteor 为 Android Wear 开发
5.00/5 (4投票s)
本文将演示如何结合使用 Meteor Javascript 应用平台和 Crosswalk 为 Android 智能手表创建简单的应用程序。
引言
在本文中，我将概述如何使用 Meteor 快速开发 Android Wear 智能手表应用程序。Meteor 是一个全栈 Javascript 应用开发平台，可以在很短的时间内开发响应式的 Web 和移动应用。为了创建移动应用程序，Meteor 使用 Cordova 和 android.webkit API，特别是 WebView 类。对于熟悉 Android Wear 的人来说，你们可能知道它不包含 android.webkit API。“那么我的应用到底是如何工作的呢，Chris？” 我听到你在喊！别担心，朋友，继续阅读，一切都将揭晓！
本文主要面向有 Web 开发背景并希望快速上手 Android，特别是 Wear 开发的个人。这意味着你不需要任何 Java 经验。了解一些 HTML、Javascript 和 CSS 会对调试有帮助，但如果你能够复制粘贴并在控制台中输入一些命令，你就可以开始了！
我们要创建的应用程序是一个简单的井字棋游戏，算不上史诗级，但能让你在你的炫酷智能手表上显得非常重要！我正在开发该应用程序以在 Sony Smartwatch 3 上进行测试，所有 Meteor 开发都在 Ubuntu 14.04 LTS 上进行。如果你有不同的手表，或者正在 Mac 或 Windows 上进行开发，你可能需要在此处或此处进行一些微调，但应该很容易上手。我假设你具备一些基本的 Linux 经验（例如，知道如何打开控制台），但如果你遇到困难，请随时提问，我会尽力提供帮助。
学习成果
在本教程结束时，你将能够
- 安装 Meteor
- 创建一个简单的 Meteor 项目
- 在浏览器中编辑、调试并运行你的 Meteor 项目
- 为你的 Meteor 项目启用 Android 支持
- 向你的 Meteor 项目添加 Cordova 插件
- 在 Android 智能手表上运行你的 Meteor 项目
安装 Meteor
首先，你需要安装 Meteor。在 Linux 和 OS X 上，只需在控制台中运行以下命令即可
curl https://install.meteor.com/ | sh
在 Windows 上，你可以从 https://install.meteor.com/windows 获取官方 Meteor 安装程序。
创建一个 Meteor 项目
安装 Meteor 后，我们现在可以创建一个新的 Meteor 项目。打开控制台，在你的主目录中创建一个名为 meteor-projects 的文件夹，然后 cd 进入该文件夹
cd ~
mkdir
meteor-projects
cd meteor-projects
要创建一个新的 Meteor 项目，我们使用 meteor create <project name> 命令，其中 <project name> 被替换为你新项目的名称（这很明显！）。我们将项目命名为“WearOX”
meteor create WearOX
如果一切顺利，你将看到类似以下的成功消息
如果你 cd 进入 WearOX 目录然后输入 ls
cd WearOX
ls
你将看到 Meteor 为你创建了三个新文件
最简单地说，一个 Meteor 项目包含三个文件：一个包含 HTML 代码，一个包含 Javascript 代码，还有一个包含你的 CSS 样式。我们将依次编辑它们以使我们的应用程序正常运行。
编辑 HTML
我们将从让我们的界面看起来体面开始，所以我们首先编辑 WearOX.html 文件。你可以使用任何你喜欢的编辑器，我使用开源的 Brackets 以及方便的 Ternific 扩展，它为 Javascript 和 Meteor 提供了提示和重构（我还使用 Brackets Beautify 扩展，它会在你每次保存代码时美化你的 Javascript）。
打开文件后，你会注意到 Meteor 为项目创建的默认 HTML
<head>
<title>WearOX</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
大多数 HTML 标签（例如<head> 和 <body>）对于做过基本 Web 开发的人来说应该很熟悉。但是，你会注意到一些用双大括号 {{}} 包围的单词，以及一个<template> 标签。<template> 标签内的任何代码都被认为是该模板的一部分，模板通过其名称来标识。在这种情况下，我们的模板名称是“hello”。在 body 标签内，我们可以通过插入一对双大括号并在其中放入以大于号为前缀的模板名称来“注入”我们的模板。这意味着我们的模板将在 {{> hello}} 的位置渲染。
为了查看它的样子，我们将通过在控制台中键入 meteor 来启动我们的 Meteor 项目：
默认情况下，你的项目作为 Web 应用在本地计算机上运行，可以通过打开浏览器并导航到 https://:3000 来查看。
你的第一个 Meteor 项目已启动并运行，只需点击按钮，感受喜悦！好吧，你可能不会感到惊喜，但这只是一个非常简单的项目。现在我们将修改它，以便在将其移植到 Android Wear 应用之前，在浏览器中运行我们的井字棋游戏。
我们不从头开始编写井字棋游戏，而是从 Stephen Chapman 在 About.com 上的文章 中借用一些代码，并进行一些小的修改以使其在 Meteor 中运行。我们将让 Meteor 在我们进行编辑时保持运行状态，以便我们可以利用其响应式更新。这基本上意味着 Meteor 会监视我们的 HTML、Javascript 和 CSS 文件中的更改，并自动将这些更改应用于我们的实时应用程序。
我们将使用按钮来表示我们的 3x3 井字棋棋盘，所以请在你的编辑器中打开 WearOX.html 文件，并将内容替换为以下代码
<head>
<title>WearOX</title>
</head>
<body>
{{> oxtemplate}}
</body>
<template name="oxtemplate">
<div id="ox">
<button id="ox1">
</button>
<button id="ox2">
</button>
<button id="ox3">
</button>
<button id="ox4" class="brox">
</button>
<button id="ox5">
</button>
<button id="ox6">
</button>
<button id="ox7" class="brox">
</button>
<button id="ox8">
</button>
<button id="ox9">
</button>
</div>
</template>
在上面的代码中，我们将页面标题设置为“WearOX”，并在页面正文中注入了一个名为“oxtemplate”的模板。该模板定义在同一文件中，它只是一个 <div>，其中包含九个具有连续 id 的 <button>。按钮 ox4 和 ox7 具有额外的 class 属性，将用于样式化我们的棋盘。
修改 CSS
当你保存 WearOX.html 时，Meteor 将更新你的应用程序界面以反映上述更改，并渲染以下内容
它还没有完全看起来像一个井字棋棋盘，所以我们需要现在开始编辑我们的 WearOX.css 文件。在你的编辑器中打开该文件，你将找到以下代码
/* CSS declarations go here */
如果你还不知道，那么你已经得到了一个微妙的提示，说明我们需要在其中放入什么！我们将使用以下 CSS 来样式化我们的棋盘
#ox {
width: 156px;
height: 156px;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#ox button {
width: 50px;
height: 50px;
float: left;
margin: 1px;
color: #fff;
background-color: #6496c8;
text-shadow: -1px 1px #417cb8;
border: none;
outline: none;
}
.brox {
clear: left;
}
上面的样式基本上意味着在我们的 <div> 命名为“ox”的元素中，将所有按钮设置为 55px x 55px，并采用可爱的蓝色。.brox 类，我们之前在 HTML 文件中的按钮 ox4 和 ox7 上应用过，可以防止任何按钮浮动到按钮 ox4 和 ox7 的左侧。这为我们提供了 3x3 的井字棋网格。如果你保存 CSS 文件并在浏览器中查看，你应该会看到它已更新，显示我们精心设计的网格
修改 Javascript
样式完成，我们现在可以开始让我们的游戏真正发挥作用了。我们的WearOX.js 文件是发生神奇的地方。在你的编辑器中打开它，你将看到以下代码
if (Meteor.isClient) {
// counter starts at 0
Session.setDefault('counter', 0);
Template.hello.helpers({
counter: function () {
return Session.get('counter');
}
});
Template.hello.events({
'click button': function () {
// increment the counter when button is clicked
Session.set('counter', Session.get('counter') + 1);
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
Meteor 是一个全栈平台，这意味着我们可以编写在客户端、服务器或两者上运行的代码。我们的模板是在客户端渲染的，因此我们将与模板相关的任何代码（如事件和助手）包装在 if (Meteor.isClient) {} 块中，以确保它不会在服务器上运行。应在服务器上运行但在客户端上不运行的任何代码都包装在 if (Meteor.isServer) {} 块中。应在两者上运行的任何代码则无需任何包装！
client、server 和 both。Meteor 会根据目录名称知道代码应该在哪里运行，这意味着你无需使用 Meteor.isClient 和 Meteor.isServer。从上面的代码中还要注意的一点是，Meteor 助手就是一个函数，它可以响应式地计算并返回一个值。在上面的示例中，这意味着每当代码中的任何位置调用 Session.get('counter') 时——例如，当按下按钮将计数器值增加一时——我们的“counter”函数就会被调用并返回新值。在原始 HTML 中，你可能注意到了一个用大括号引用的计数器助手，即 {{counter}}。这意味着每当“counter”函数返回一个新值时，我们的界面会自动更新以显示它。不幸的是，默认代码有点令人困惑，因为我们有一个名为“counter”的会话变量，还有一个名为“counter”的助手函数。
当你开始使用 Meteor 构建更复杂的应用程序时，你会发现这种响应式有多强大，但对于这个应用程序，我们不需要任何助手或模板事件，只需要一些简单的 Javascript。我们将用以下代码替换默认的 Javascript，该代码是从 Stephen Chapman 的原始代码重构而来的
// Noughts and Crosses
// copyright Stephen Chapman, 17th November 2007, 28th May 2010
// Upated for Meteor by Chris Duke, 15th October 2015
// http://javascript.about.com
// You may copy this code but please keep the copyright notice as well
if (Meteor.isClient) {
Template.oxtemplate.rendered = function () {
var turn = 0;
var pos = [];
template = this;
var oxd = [];
for (var i = 1; i < 10; i++) {
oxd[i] = template.find('#ox' + i);
oxd[i].i = i;
oxd[i].onclick = function () {
setit(this.i);
}
}
beginit();
};
}
beginit = function () {
turn = 0;
pos = ['', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '];
for (var i = 1; i < 10; i++) template.find('#ox' + i).innerHTML = '';
}
setit = function (idb) {
var val = template.find('#ox' + idb).innerHTML;
if (val == '') {
turn++;
if (turn % 2 == 1) {
template.find('#ox' + idb).innerHTML = ' X ';
pos[idb] = 'X';
}
if ((winner = win()) != ' ') {
alert(winner + ' wins');
beginit();
return;
}
if (turn == 9) {
alert('draw');
beginit();
return;
}
var cptr = check2();
template.find('#ox' + cptr).innerHTML = ' O ';
pos[cptr] = 'O';
turn++;
if ((winner = win()) != ' ') {
alert(winner + ' wins');
beginit();
return;
}
}
}
check2 = function () {
if (check(2, 3, 1) || check(4, 7, 1) || check(5, 9, 1)) return 1;
if (check(1, 3, 2) || check(5, 8, 2)) return 2;
if (check(1, 2, 3) || check(7, 5, 3) || check(6, 9, 3)) return 3;
if ((check(1, 7, 4) && !check(7, 9, 8)) || check(5, 6, 4)) return 4;
if (check(1, 9, 5) || check(2, 8, 5) || check(3, 7, 5) || check(4, 6, 5)) return 5;
if (check(4, 5, 6) || (check(3, 9, 6) && !check(7, 9, 8))) return 6;
if (check(1, 4, 7) || check(3, 5, 7) || check(8, 9, 7)) return 7;
if (check(7, 9, 8) || check(2, 5, 8)) return 8;
if (check(1, 5, 9) || check(3, 6, 9) || check(7, 8, 9)) return 9;
if (check(1, 9, 2) || check(3, 7, 2)) return 2;
if (check(1, 9, 4) || check(3, 7, 4)) return 4;
if (pos[5] == ' ') return 5;
if (pos[1] == ' ') return 1;
if (pos[3] == ' ') return 3;
if (pos[7] == ' ') return 7;
if (pos[9] == ' ') return 9;
if (pos[8] == ' ') return 8;
if (pos[6] == ' ' && pos[6] == ' ') return 6;
if (pos[4] == ' ') return 4;;
return 2;
}
check = function (x, y, z) {
return (pos[x] == 'X' && pos[y] == 'X' && pos[z] == ' ') || (pos[x] == 'O' && pos[y] == 'O' && pos[z] == ' ');
}
match = function (a, b, c) {
if (pos[a] == 'X' && pos[a] == pos[b] && pos[b] == pos[c]) return 'X';
if (pos[a] == 'O' && pos[a] == pos[b] && pos[b] == pos[c]) return 'O';
return ' ';
}
win = function () {
if (match(1, 2, 3) == 'X' || match(4, 5, 6) == 'X' || match(7, 8, 9) == 'X' || match(1, 4, 7) == 'X' || match(2, 5, 8) == 'X' || match(3, 6, 9) == 'X' || match(1, 5, 9) == 'X' || match(3, 5, 7) == 'X') return ('X');
if (match(1, 2, 3) == 'O' || match(4, 5, 6) == 'O' || match(7, 8, 9) == 'O' || match(1, 4, 7) == 'O' || match(2, 5, 8) == 'O' || match(3, 6, 9) == 'O' || match(1, 5, 9) == 'O' || match(3, 5, 7) == 'O') return ('O');
return ' ';
}
简而言之，上面的代码的意思是，一旦 Meteor 模板“oxtemplate”在客户端渲染了 DOM，就为每个按钮添加一个点击事件，该事件调用 setIt 函数。setIt 函数将“X”添加到用户点击的按钮文本中（除非它已包含“O”或“X”），然后计算计算机放置其“O”的下一个位置。每回合后，代码会确定谁（如果有人）赢得了比赛，如果有赢家，则显示一个 alert() 说出赢家是谁。
如果你保存 WearOX.js 文件并在浏览器中查看，在点击按钮之前你不会注意到任何区别。你应该会发现一个“X”出现在你点击的地方，很快就会跟着计算机放置的“O”，以此类推，直到其中一方获胜。是的，你确实在玩井字棋，所以为你到目前为止所取得的成就鼓掌，然后我们将继续将你的新游戏转移到 Android Wear！
移植到 Android Wear
为了将你的代码作为 Android 应用程序运行，Meteor 使用 Cordova 将你的 UI 包装在 WebView 中，该 WebView 来自 android.webkit 包。 为了让我们的应用程序支持 Android，我们需要向项目中添加 Android 平台。To do this you need to have a working Android development environment set up. On Ubuntu, the easiest way to do this is to use Ubuntu Make to install Android Studio and a Java Development Kit. Follow the instructions on the Meteor wiki to get your system set up for Android。
请确保你已设置 ANDROID_HOME 变量，并将 tools 目录添加到你的 PATH。为此，在控制台中，编辑你的 ~/.bashrc 文件并在底部添加以下内容（确保将 /path/to/android-sdk 替换为真实的 SDK 路径！）
export ANDROID_HOME="/path/to/android-sdk"
export PATH="$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:$PATH"
要应用更改而无需重启控制台，请键入：
source ~/.bashrc
另外，请确保你已安装 Android SDK Platform 22，以便你可以为 Wear 开发。假设你已设置 ANDROID_HOME 并相应地编辑了 PATH，你可以通过键入 android 在命令提示符下运行 SDK 管理器来检查已安装的 SDK。
安装 Android 后，我们可以回到我们的 Meteor 项目。如果你的应用程序仍在控制台中运行，请按 <Ctrl + C> 停止它，然后输入以下命令
meteor add-platform android
上述命令安装了构建项目 Android 应用程序所需的所有必要工具。
如引言中所述，Android Wear SDK 不包含 android.webkit 包，因此在运行我们的 Android 项目之前，我们将需要包含一个替代品，那就是 Crosswalk。Crosswalk 允许我们将默认的 Android WebView 替换为基于 Google Chromium 的更现代的 WebView。在我们的情况下，这意味着我们可以在 Android 上添加一个 WebView，从而在智能手表上看到我们的 Meteor 项目运行。
Crosswalk 与 Apache Cordova 兼容，对我们来说幸运的是，Meteor 允许我们轻松添加我们可能想在应用程序中使用的任何 Cordova 插件。在我们的情况下，我们将直接从 Crosswalk GitHub 存储库添加一个插件，以获取最新的构建。
在控制台中键入以下命令
meteor add cordova:cordova-plugin-crosswalk-webview@https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview.git#cd24c9cf90ed7741b3364cbd8b2b73d9f7dacb93
呀！那是什么？！
在这里，我们告诉 Meteor 添加一个 Cordova 插件（meteor add cordova:）。冒号和 @ 符号之间的文本（cordova-plugin-crosswalk-webview）是插件 ID，如 存储库中的 plugin.xml 文件 中所指定的。@ 符号和 # 符号之间的文本（https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview.git）是 GitHub 存储库的 URL。最后，# 符号之后的文本是我们希望使用的 Git commit 的 SHA 哈希值（cd24c9cf90ed7741b3364cbd8b2b73d9f7dacb93）。要查找 commit 的 SHA 哈希值，请浏览存储库中的 commits，选择 你感兴趣的 commit，你将在页面顶部附近看到完整的哈希值。
注意。如果你想查看已安装的 Cordova 插件（或来自 Atmosphere.js 的任何其他 Meteor 插件），你可以使用
meteor list
在 Android Wear 上运行我们的应用程序
这就是我们一直在努力的目标，我们终于要在我们的 Android 智能手表上运行我们的应用程序了！嗯，还没完全到。在我们可以做到之前，你需要做两件事。
首先，确保你的智能手表已启用开发者选项，以便 Meteor 能够使用 adb 将应用程序推送到手表。在你的手表上，转到“设置”菜单，向下滚动到“关于”，然后点击它。在下一个屏幕上，向下滚动直到找到“构建编号”，然后点击它七次，瞧，开发者模式已启用。
我们还需要做的另一件事是设置 Linux 以检测我们的智能手表。如果你还没有，请创建一个新的 udev 规则文件并按以下方式修复其权限
sudo touch /etc/udev/rules.d/51-android.rules
sudo chmod a+r /etc/udev/rules.d/51-android.rules
现在我们需要在此文件中添加一条规则行，以便 Linux 可以识别索尼制造的设备。索尼的供应商 ID 是 054c，因此我们将以下内容通过管道输入到我们的文件中（完整的供应商列表和有关 udev 的更多详细信息可以在 Android Developer 网站 上找到）
sudo echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="054c", MODE="0666", GROUP="plugdev"' >> /etc/udev/rules.d/51-android.rules
在提示时确保输入你的密码。这假设你的帐户具有 sudo 权限。如果没有，你需要以 root 用户身份登录来创建和编辑此文件。
现在是时候通过 USB 数据线将你的智能手表连接到你的计算机了。完成此操作后，在命令提示符下键入以下命令
adb devices
如果你已成功完成以上步骤，你应该会看到类似以下的 mesaj
这意味着你终于准备好在手表上运行你的 Meteor 项目了。要在 Android 设备上运行 Meteor 项目，我们使用以下命令
meteor run android-device
Meteor 然后将下载你添加的任何 Cordova 插件，将你的应用程序构建成一个 Android 项目，并在你的智能手表上运行它。这是应用程序在手表上运行的图片
而且，万一你认为我在进行一些快速的 Gimp 编辑，请查看 YouTube 上的视频，它展示了应用程序的实际运行情况。
就是这样！在你开始使用 Meteor 创建你的梦想智能手表应用程序之前，有一点需要注意，添加 Crosswalk 会大大增加应用程序的体积。这意味着你很快就会用完手表有限的空间，所以在开始项目时这一点需要牢记。
我希望你觉得本教程很有用，请随时发表评论或提出任何问题，我会尽力回复。
历史
2015 年 10 月 15 日：上传初始版本
2015 年 10 月 29 日：修复拼写和格式错误