您将要创建的内容
Pebble 智能手表自 2012 年非常成功的Kickstarter活动以来一直存在，是智能手表用户的热门选择。这是由于其出色的电池寿命，低廉的价格，多种型号可供选择以及与ios和android的兼容性。
Pebble 从一开始就有一个开发者 SDK，鼓励开发者为 Pebble 平台构建有趣和创新的应用程序。SDK 始终保持最新状态，并随着时间的推移添加新功能。
Pebble 应用程序传统上是用 C 编写的，但最近，Pebble 采用了javascript，并在其平台上向更多的开发人员开放了应用程序开发的世界。在这篇关于 Pebble 开发的介绍中，我通过构建应用程序并将其提交到 Pebble 应用商店，向您介绍了使用 SDK 和Pebble.js库开始 Pebble 开发的一些基础知识。
本教程不需要拥有 Pebble 或任何以前的 C 语言知识。
1.设置项目
目前有两种环境可以在其中构建 Pebble 应用程序。CloudPebble 使在浏览器中开发 Pebble 应用程序成为可能。如果您在 Windows 上或使用功能 较弱的机器，这非常棒。
另一个选项，也是本教程将遵循的选项，是在本地进行开发工作流程。这使您可以离线工作并使用您选择的编辑器。让我们首先安装 Pebble 工具和 SDK。
目前，Windows 上没有对 Pebble 工具和 SDK 的官方支持，因此以下部分将引导您完成在 OS X 和 Linux 上安装 Pebble 工具和 SDK 的步骤。Pebble 建议您使用CloudPebble在 Windows 上进行开发，但您也可以使用 Linux 虚拟机。
在 OS X 上安装 Pebble 工具的最简单方法是通过homebrew。如果您没有安装Homebrew ，您可以在Homebrew 网站上获取安装说明 。安装 Homebrew 后，您可以使用以下命令安装 Pebble 工具：
brew install pebble/pebble-sdk/pebble-sdk
在 Linux 上安装 Pebble 工具和 SDK 需要执行一些额外的步骤。Pebble 有一个详细的指南可供您参考。安装 Pebble 工具后，您将可以pebble从命令行使用该命令。运行 pebble --version 显示版本信息。
$ ~ pebble --version Pebble Tool v4.2.1
pebble命令行界面包括几个方便的 命令。您可以通过运行 pebble --help 或列出这些命令pebble -h。其中一个命令使用一些样板代码设置了一个新项目。创建一个新目录并在新目录的根目录下运行以下命令：
pebble new-project hello-pebble
如果这是您第一次创建 Pebble 应用程序，系统会提示您接受使用条款和 Pebble 开发者许可。一旦您接受了这些，就会下载并安装最新的 Pebble SDK（撰写本文时为 3.11.1）。
安装 Pebble SDK 后，在当前目录下建立了一个基本的 Pebble 项目。要构建、安装和运行您的应用程序，您需要执行以下操作。首先，确保您位于 Pebble 项目的根目录中。在本例中，我们位于hello-pebble目录的根目录中。
接下来，运行pebble build命令。编译代码后，您应该会'build' finished successfully在构建目录中看到消息和一些新文件。我们现在唯一需要担心的文件是hello-pebble.pbw。这是您将安装在手表上的应用程序。
要运行该应用程序，我们使用 Pebble SDK 附带的 Pebble 模拟器。Pebble 使用开源QEMU模拟器。目前，共有三代 Pebble 可供开发。Pebble 和 Pebble Steel 是 Pebble 的最初一代。Pebble Time 支持 64 色并使用稍新的 3.x 版本的操作系统。
Pebble Time Round 与 Pebble Time 几乎相同，除了圆形和更大的显示。Pebble 使用平台名称来区分三代 Pebble 智能手表。
Aplite是用于 Pebble 和 Pebble Steel 的平台名称。
Basalt是 Pebble Time 的平台名称。
Chalk是 Pebble Time Round 的平台名称。
--emulator 我们可以在命令后使用标志 启动这些模拟器中的任何一个pebble install，传递我们想要定位的平台。例如，如果我们想在 Pebble Time 平台上运行我们的应用程序，我们将在 Pebble 项目的根目录中运行以下命令：
pebble install --emulator basalt
此命令启动模拟器，启动所选平台，并安装 .pbw 存储在构建目录中的文件。这是您应该在模拟器中看到的内容：
Pebble 手表没有触摸屏，带有四个按钮，向上、向下、选择和返回。这些分别用键盘上的up、down、right和left键进行模拟。通过按这些键，您可以浏览您创建的应用程序。
如果我们打开项目的源代码，您会看到它是用 C 编写的。为了在项目中使用 Pebble.js，我们将使用一个可以让我们更快开始的模板。Pebble.js 在撰写本文时仍处于测试阶段，因此未来仍有可能发生变化。
离开项目目录，创建一个新目录，然后克隆GitHub存储库，如下所示。
mkdir hello-pebblejs cd hello-pebblejs git clone https://github.com/pebble/pebblejs .
克隆 repo 后，在文本编辑器中打开它，然后环顾四周。应用程序的源代码可以在 src目录中找到。在该目录中，您还有其他三个目录，js、simple、util和一个main.c文件。
js目录是我们放置应用程序代码的地方。simple 目录是JavaScript 函数访问本机代码的地方，而 util目录 包含更多我们不需要接触的本机代码。应用程序的入口点将位于 js/app.js中。如果我们构建并运行此应用程序，您应该会在模拟器中看到以下结果：
打开js/ app.js，看看周围，然后删除这个文件。我们将从头开始。
2.让我们构建一个应用程序
我们需要学习的第一件事是如何在屏幕上显示文本。Pebble.js 有一个用于实例化元素的用户界面框架。使用此框架，您可以创建元素，例如文本、矩形和图像。将以下行添加到 app.js以要求该框架。
var UI = require('ui');
我们将在本教程中使用的第一个元素是Window. Windows 是 Pebble 应用程序的主要构建块。有三种类型的窗口。
A Card 可用于以预先格式化的方式显示文本，例如顶部的标题、其下方的副标题以及某些文本的正文区域。
AMenu 用于显示选项列表。
AWindow 是最灵活的，允许您向其中添加各种元素。
为了将文本添加到窗口，我们还需要 Vector2，这是一个用于绘制 2D 矢量的模块，如果您使用过three.js或任何其他矢量绘图库，您会熟悉它。
我们的第一个目标是创建一个窗口，创建文本并将其附加到该窗口，并将其显示给用户。以下代码段是在屏幕上显示文本所需的最低要求。
var UI = require("ui");
var Vector2 = require("vector2");
// This is our main window
var main = new UI.Window();
// This is our text content
var textfield = new UI.Text({
size: new Vector2(144, 60),
text: 'Hello PebbleJS'
});
//add the text to the window
main.add(textfield);
//show the window
main.show();构建项目并安装应用程序以查看结果。与其分别执行这两个步骤，我更喜欢将命令链接在一起并运行以下命令：
pebble build && pebble install --emulator basalt
如果要同时在所有三个平台上进行测试，可以为每个模拟器添加安装命令：
pebble build && pebble install --emulator basalt && pebble install --emulator aplite && pebble install --emulator chalk
您会注意到，aplite和玄武岩 看起来几乎相同，而 粉笔 看起来不太好。这是因为圆形屏幕和屏幕的尺寸。我们稍后将讨论平台检测。现在，我们继续推进一些基本功能。
在上面的代码片段中，我们使用 方法创建了一个Text元素 Text()。的实例化 Text() 将对象作为其参数来配置 Text元素。该键定义了绘制Text元素size的矩形（由Vector2实例定义） 的大小。键的值 包含我们要显示的字符串。然后，在调用窗口显示它之前，我们将Text元素添加到窗口。textshow()
到目前为止，您的应用程序正在使用Window和Text的默认设置。但是，我们可以选择自定义它们。我们可以控制更改位置、颜色和字体大小。有 一些系统字体可用 ，您甚至可以选择加载可以在应用程序中使用的自定义字体。
我们的应用程序将倒计时到某个日期。当应用程序启动时，我们希望它采用今天的日期并计算距离未来特定日期还有多少天。比方说，例如，我想要一个应用程序来告诉我距离《星球大战》第八集还有多少天。
我知道我想在应用程序启动时创建我的主窗口，计算到 2017 年 12 月 15 日的剩余天数，然后将该数字添加到我的屏幕中心。没什么太花哨的。
让我们从显示一个静态数字开始，与我们编写的当前“Hello PebbleJS”代码没有太大区别。相反，我们使用一个变量作为 text 键的值并添加一个新键 , textAlign以使文本居中。
var UI = require('ui');
var Vector2 = require('vector2');
var daysRemaining = "400";
var main = new UI.Window();
var text = new UI.Text({
size: new Vector2(144, 168),
text:daysRemaining,
textAlign:'center'
});
//add the text to the window
main.add(text);
//show the window
main.show();运行该应用程序将为您提供如下所示的输出。
正如我之前解释的，有许多系统字体可用。在本教程中，我们将坚持使用其中一种系统字体 Bitham 42 Bold，并将其放置在水平和垂直方向更靠近屏幕中心的位置。该选项采用文档font中引用的要使用的字体字符串。该位置由另一个 实例确定，该实例定义了Text的水平和垂直位置。Vector2
像这样更改Text的配置：
var text = new UI.Text({
size: new Vector2(144, 168),
text:daysRemaining,
textAlign:'center',
position: new Vector2(0, 50),
font:'BITHAM_42_BOLD'
});您现在应该有如下所示的内容：
让我们用正确的天数替换硬编码的值。当我们从 GitHub 克隆项目时，我们获得了访问设备api和各种其他实用程序以使用 javaScript 创建 Pebble 应用程序所需的所有文件。这些实用程序之一是moment.js库，您可以在供应商目录中找到它。这将使计算更容易。
要求moment.js进入应用程序并将daysRemaining变量设置为具有以下实现的函数：
var moment = require('vendor/moment');
var daysRemaining = function(){
var eventdate = moment("2017-12-15"); // This is the date we're counting down to - December 15
var todaysdate = moment(); // A moment instance of todaysdate
return eventdate.diff(todaysdate, 'days'); // calculate the difference in days.
}接下来，更改对daysRemaining函数调用的引用，如下所示：
var text = new UI.Text({
size: new Vector2(144, 168),
text:daysRemaining(), // This is now a function call
textAlign:'center',
position: new Vector2(0, 50),
font:'BITHAM_42_BOLD'
});如果您编译并运行应用程序，您应该会看到距离《星球大战》第八集发布的正确天数。我们可以把它留在这里，并有一个简单地显示距离我们要跟踪的事件的天数的应用程序，但为什么不借此机会向应用程序添加一些功能。
首先，让我们改变Window的背景颜色和文本的颜色，使背景为白色，文本更暗。
var main = new UI.Window({
backgroundColor:'white'
});
var text = new UI.Text({
size: new Vector2(144, 168),
text:daysRemaining(),
textAlign:'center',
position: new Vector2(0, 50),
font:'BITHAM_42_BOLD',
color:'black'
});让我们添加另一个Text元素来指示数字代表什么。我们创建一个新的Text 元素并传递给它大小、位置、字体等选项。
var eventDetail = new UI.Text({
size: new Vector2(144, 168),
text:'Episode VIII',
textAlign:'center',
position: new Vector2(0, 15),
font:'GOTHIC_24',
color:'black'
});接下来，我们在添加对象后将Text元素添加到主窗口。text
main.add(text) main.add(eventDetail);
最后，让我们添加第三个 Text 元素来指示倒计时以天为单位。
var daysText = new UI.Text({
size: new Vector2(144, 168),
text:'days',
textAlign:'center',
position: new Vector2(0, 100),
font:'GOTHIC_24',
color:'black'
});
main.add(daysText);
为了导航，Pebble 使用硬件按钮，而不是大多数其他智能手表上的触摸屏。我们可以添加允许用户使用这些输入更深入地了解我们的应用程序的功能。例如，假设我们还想显示《星球大战》系列中其他即将上映的电影的上映日期。《侠盗一号》于今年发布，并且已经有第 IX 集的发布日期。
与按钮的交互会触发我们可以订阅的事件。当检测到事件时，我们可以决定需要采取什么行动。如果用户单击，我们可以构建一个新窗口来保存《侠盗一号》的上映日期，并显示距离该电影上映的天数。
让我们订阅向下按钮并构建一个新的Window。该on()方法采用三个参数，即操作、按钮和处理程序。如前所述，第二个参数的可能值是up、down、select或back。该动作通常是click，但您也可以选择使用longClick。
main.on('click', 'down', function(){
var ro = new UI.Window();
console.log('Down Clicked');
ro.show();
});运行该应用程序，您会注意到单击时出现黑屏。您可能会问自己如何访问控制台以查看 Pebble 日志。
当应用程序运行时，我们可以附加另一个控制台并通过运行获取日志 pebble logs --emulator basalt。如果您使用的是其他模拟器之一，请替换模拟器名称。您现在可以看到Down Clicked单击向下按钮时控制台会记录日志。
pebble logs --emulator basalt [06:33:11] javascript> Down Clicked [06:33:11] javascript> (+) [window 2] : [window 1],[window 2]
就像我们之前做的那样，让我们计算发布前的天数，并将此信息显示给用户。为了使用日期计算功能，我将传入日期作为参数。我们不想重复代码。
var daysRemaining = function(dateString){
var eventdate = moment(dateString);
var todaysdate = moment();
return eventdate.diff(todaysdate, 'days');
}main.on('click', 'down', function(){
var ro = new UI.Window();
console.log('Down Clicked');
var ro = new UI.Window();
var roCount = new UI.Text({
size: new Vector2(144, 168),
text:daysRemaining("2016-12-16"),
textAlign:'center',
position: new Vector2(0, 50),
font:'BITHAM_42_BOLD',
color:'white'
});
var eventDetail = new UI.Text({
size: new Vector2(144, 168),
text:'Rogue One',
textAlign:'center',
position: new Vector2(0, 15),
font:'GOTHIC_24',
color:'white'
});
var roDays = new UI.Text({
size: new Vector2(144, 168),
text:'days',
textAlign:'center',
position: new Vector2(0, 100),
font:'GOTHIC_24',
color:'white'
});
ro.add(roCount);
ro.add(roDays);
ro.add(eventDetail);
ro.show();
ro.show();
});如果你愿意，你也可以为第 IX 集添加一个屏幕。我会把它作为一个挑战让你自己尝试。
我们应该解决 Pebble Time Round 用户的显示问题。为此，我们需要检测他们所在的平台并相应地更新用户界面。
在您的应用程序中，您可以访问全局对象Pebble. 这个对象有一些我们可以使用的函数，其中之一是getActiveWatchInfo()，它返回一个带有平台运行时信息的对象。
我们可以使用platform 密钥获取平台名称。如果平台等于 chalk，我们需要对用户界面进行一些调整。
在app.js的顶部，我们获取action watch 信息并检查当前平台名称是否相等chalk。
var info = Pebble.getActiveWatchInfo(); // Returns watch info var platform = info.platform; // Returns a string of the platform name var isChalk = platform === 'chalk';
如果您在 Chalk 平台上运行您的应用程序，您应该会看到以下内容：
在我们调整用户界面元素的大小和位置的任何地方，我们都需要进行小的更改以适应 Chalk 平台的圆形屏幕。首先，我们创建一个保存屏幕宽度的变量。
var sWidth = isChalk? 180：144；
Pebble Time Round 的显示屏为 180 像素 x 180 像素。这意味着我们需要修改Vector 对象的 X 坐标。我们创建了三个变量来帮助我们解决这个问题。
var countPosition = isChalk ? 65 : 50; var daysPosition = isChalk ? 120 : 100; var titlePosition = isChalk ? 25 : 15;
最终代码将如下所示：
var UI = require("ui");
var Vector2 = require("vector2");
var moment = require("moment");
var info = Pebble.getActiveWatchInfo();
var platform = info.platform;
var isChalk = platform === "chalk";
var sWidth = isChalk ? 180 : 144;
var countPosition = isChalk ? 65 : 50;
var daysPosition = isChalk ? 120 : 100;
var titlePosition = isChalk ? 25 : 15;
var daysRemaining = function(dateString) {
var eventdate = moment(dateString); // This is the date we"re counting down to - 24th April
var todaysdate = moment(); // A moment instance of todaysdate
var difference = eventdate.diff(todaysdate, "days");
return difference
};
var main = new UI.Window({
backgroundColor: "white"
});
var text = new UI.Text({
size: new Vector2(sWidth, 168),
text: daysRemaining("2017-12-15"),
textAlign: "center",
position: new Vector2(0, countPosition),
font: "BITHAM_42_BOLD",
color: "black"
});
//Event Detail Text
var eventDetail = new UI.Text({
size: new Vector2(sWidth, 168),
text: "Episode VIII",
textAlign: "center",
position: new Vector2(0, titlePosition),
font: "GOTHIC_24",
color: "black"
})
//Event Detail Text
var daysText = new UI.Text({
size: new Vector2(sWidth, 168),
text: "days",
textAlign: "center",
position: new Vector2(0, daysPosition),
font: "GOTHIC_24",
color: "black"
})
//add the text to the window
main.add(text);
main.add(eventDetail);
main.add(daysText);
//show the window
main.show();
//ROGUE 1 window
main.on("click", "down", function() {
var ro = new UI.Window();
var roCount = new UI.Text({
size: new Vector2(sWidth, 168),
text: daysRemaining("2016-12-16"),
textAlign: "center",
position: new Vector2(0, countPosition),
font: "BITHAM_42_BOLD",
color: "white"
});
var eventDetail = new UI.Text({
size: new Vector2(sWidth, 168),
text: "Rogue One",
textAlign: "center",
position: new Vector2(0, titlePosition),
font: "GOTHIC_24",
color: "white"
})
var roDays = new UI.Text({
size: new Vector2(sWidth, 168),
text: "days",
textAlign: "center",
position: new Vector2(0, daysPosition),
font: "GOTHIC_24",
color: "white"
});
ro.add(roCount);
ro.add(roDays);
ro.add(eventDetail);
ro.show();
ro.on("click", "down", function() {
var nine = new UI.Window({
backgroundColor: "white"
});
var nineCount = new UI.Text({
size: new Vector2(sWidth, 168),
text: daysRemaining("2019-05-24"),
textAlign: "center",
position: new Vector2(0, countPosition),
font: "BITHAM_42_BOLD",
color: "black"
});
var eventDetail = new UI.Text({
size: new Vector2(sWidth, 168),
text: "Episode IX",
textAlign: "center",
position: new Vector2(0, titlePosition),
font: "GOTHIC_24",
color: "black"
})
var nineDays = new UI.Text({
size: new Vector2(sWidth, 168),
text: "days",
textAlign: "center",
position: new Vector2(0, daysPosition),
font: "GOTHIC_24",
color: "black"
});
nine.add(nineCount);
nine.add(nineDays);
nine.add(eventDetail);
nine.show();
});
});我相信你同意有很大的改进空间。我们在不同的地方复制代码，这不是一个好习惯。也就是说，我希望您现在对如何使用 JavaScript 和 Pebble SDK 创建 Pebble 应用程序有一个基本的了解。
在本教程的最后一部分，我想向您展示如何将我们的应用上传到 Pebble 应用商店。
3.上传到Pebble App Store
在我们上传应用程序之前，我们需要注意一件事。当我们从模板启动这个应用 程序时，我们需要更改应用程序清单appinfo.json中的一些细节。您可以在项目的根目录中找到此文件。打开 appinfo.json 并更改 companyname、 shortname和longname值。
我们需要的最后一件事是 UUID（通用唯一标识符）。清单中已经包含一个，但是当您尝试将.pbw 文件上传到应用商店时，您将收到错误消息，因为此 UUID 已在使用中。
获得一个最简单的方法是从我们在本教程开始时创建的原始hello-pebble应用程序中获取它，因为我们不会将该应用程序上传到应用商店。如果您删除了项目，请创建一个新项目并从该项目中复制 UUID。完成后，创建一个新版本。
我们现在有一个可以上传到 Pebble 应用商店的应用程序。前往Pebble 开发者门户 并注册一个帐户或登录（如果您已经拥有一个）。登录后，单击 Publish a Pebble App链接。
在下一页上，选择 底部的Create a Watchapp 。
下一页上的表格看起来有点吓人，但这些字段是不言自明的。要完成提交，您需要上传至少两个资产，这两个资产都是您应用的图标。
完成此步骤后，您将进入应用商店预览，右侧有一些应用数据。您需要为您的应用添加发布日期。为此，请单击Add a release并上传.pbw 文件，您可以在项目的 build 文件夹中找到该文件。
完成此操作后，您将返回概览屏幕并验证.pbw文件。这通常只需要几秒钟。验证后，该应用程序就可以发布了。如果您在此处遇到任何问题并且验证失败，您会看到一条有用的消息，解释验证失败的原因。
在您继续点击“发布”按钮之前，您可能需要为您添加一些屏幕截图，以便人们可以看到安装后会发生什么。这些图像显示在应用商店预览中。
Pebble CLI 工具提供了一种非常简单的截屏方法。运行 pebble screenshot FILENAME 对当前运行的模拟器进行截图，并将其保存在当前目录中。
上传屏幕截图并填写各种平台的描述后，您就可以发布您的第一个 Pebble 应用程序了。
结论
在本文中，您学习了如何安装和设置 Pebble SDK，如何使用一些基本的 Pebble CLI 命令，以及如何使用 JavaScript 构建一个基本的应用程序。不用说，我们在本教程中只触及了表面。还有很多东西要学，不仅是关于用 JavaScript 编写 Pebble 应用程序，还有关于一般的 Pebble 开发和可供您使用的工具。
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
