高级卵石手表配置-js教程-PHP中文网

钥匙要点

>更新您的appinfo.json

>如上所述，您需要托管带有表单的网页，以供用户更改他们的搜索内容。我的一个看起来像：

如果用户已经选择了东西怎么办？

我们的C代码

增加消息缓冲区大小

我们现在是一个更令人兴奋的应用程序！

更多资源

>如何延长卵石表的电池寿命？其中包括减少您收到的通知数量，使用简单的手表脸以及禁用不经常使用的功能。此外，请确保您的手表软件是最新的，因为更新通常包括优化以提高电池寿命。
>我可以用iPhone使用鹅卵石手表吗？ iOS设备。您可以通过蓝牙连接卵石手表到iPhone，并使用Pebble应用程序来管理设置，安装手表脸等。
>
如何将鹅卵石手表重置为出厂设置？要将鹅卵石手表重置为出厂设置，请转到手表上的设置菜单，然后选择“系统”，然后选择“出厂重置”。这将删除您手表上的所有数据和设置。请注意，这个动作无法解开。

是的，您可以在卵石表上使用应用程序。有许多应用程序可从Pebble App Store下载，包括健身跟踪器，游戏和生产力工具。您可以通过智能手机上的鹅卵石应用在手表上安装应用程序。

软布和温和的肥皂。避免将其暴露于极端温度或苛刻的化学物质中。不使用时，将其存储在凉爽的干燥位置。定期更新手表软件，以确保其继续发挥最佳功能。

首页

web前端

js教程

高级卵石手表配置

Christopher Nolan

Feb 21, 2025 am 11:41 AM

高级卵石手表配置

钥匙要点

>更新“ appinfo.json”文件，通过在功能数组中添加“可配置”来启用卵石应用程序中的配置页面，从而允许用户自定义诸如pebble Interface中的位置类型之类的设置。
>
>创建一个在线托管的用户友好的设置页面，其中包含一个供用户指定其首选位置类型的表格（例如，星巴克，冰淇淋）。此页面通过JavaScript与Pebble App通信，以在设备上保存本地设置。
>
>在JavaScript中实现错误处理以管理外部API的未定义或丢失数据，以确保应用程序保持稳定并提供用户友好的通知或后备。

对于任何看着Power Rangers小时候并梦想着拥有一种使他们感觉就像超级英雄的精美手表的人，智能手表是一个梦想成真。我可能是上述权力游侠梦想家之一。结合开发人员敦促填补我的血管的冲动，您已经有一个90年代的孩子，他们很快就会成为一名灰色，疯狂的科学家，例如“回到未来”。

>我最近写了一篇有关JavaScript的卵石表开发基础知识的文章。总而言之，我们制作了一个使用Foursquare API来告诉用户他们最近的星巴克始终在哪里。这就是动作中的样子：

高级卵石手表配置 >我提到，JavaScript还有更多的可能性，我在那篇文章中无法介绍。这是我的后续行动，它将涵盖pebblekit JavaScript框架的其他功能。

在本文中，我将介绍如何扩展上一篇文章中开发的“找到我的星巴克”应用程序，以允许用户选择该应用程序将为他们找到的位置类型。并不是每个人都像我一样忠实于星巴克！我们将添加一个配置屏幕，该屏幕可以允许他们在自己的兴趣地点键入并在他们使用应用程序时为其保存该设置。

如果您想遵循本教程，则需要：>

>安装和运行带卵石应用程序的Android手机或iPhone。
Foursquare API的API凭证。
>可用的Wi-Fi网络，可将您的应用传输到移动设备和卵石手表。

最好是通过上一个教程或使用PebbleKit JavaScript框架对卵石应用开发的基础知识。>

>在线网络主机，用于在线存储单个文件，该文件将是您的配置页面。

此教程的完整代码

您可以在Github上查看“找到我的星巴克”的代码，或者通过上一个教程阅读，而不是将所有代码列入本文中的所有代码。我们更新的应用程序的代码也可以在github上的“找到我任何东西”上找到，因此，如果您想下载代码并跟随 - 请免费！

>配置如何在卵石应用世界中起作用

在介绍SDK版本2.0的PebbleKit JavaScript框架之前，需要将同伴应用程序安装在用户手机上才能接受任何自定义设置。如果用户想要一个天气应用程序向他们展示摄氏的天气，而不是华丽海特，则需要首先安装伴随应用程序并打开该应用程序以更改设置（或在Watchface应用程序本身上具有粗制设置窗口）。 🎜>

> JavaScript启用设置页

>使用新的SDK，我们现在可以定义一个配置页面，该页面可以在Pebble的Android/iOS应用程序本身中访问。与用户安装和安排其手表应用程序的位置相同的位置访问设置。从用户的角度来看，更清洁，更逻辑。

> JavaScript启用本地存储

>新SDK的JavaScript还使用W3C建议进行Web存储，使您可以将设置存储在应用程序中以备将来使用。如果用户要求使用该摄氏/fahreinheit设置，我们可以使用Web存储记住用户的喜好。在我们的情况下，我们要存储用户感兴趣的位置类型。

它的工作原理

设置页面是网络上的一个页面，其中包含一个以切换应用程序设置的表单。应用程序中的JavaScript等待通过表格提交给您应用程序的JavaScript的任何调整的设置，并将其收到的设置存储在本地存储中。

听起来令人困惑吗？在某些情况下，这不是理想的设置，因为这意味着您必须在网上某个地方托管自己的设置页面，以供其他人访问。似乎Pebble计划将将来与该应用程序捆绑在一起，这对于某些应用程序非常有用。当前的设置确实带有好处 - 如果您仅在设置页面上进行重新皮肤或调整某些内容，则无需更新应用程序本身，因为设置页面是独立的。

>更新您的appinfo.json

首先，要启用应用程序上的“设置”页面，我们将“可配置”添加到我们以前用来通过“位置”关键字来定义对Geolocation API访问的功能数组的添加。

<span>"capabilities": ["location", "configurable"]</span>

登录后复制

>我们还添加了一个额外的密钥供我们的应用使用称为“ searchingfor”的应用程序，这将是字符串，它将是“星巴克”或用户请求的自定义位置类型的字符串：>

创建您的设置页

<span>"appKeys": {
</span>  <span>"location": 0,
</span>  <span>"searchingFor": 1
</span><span>}</span>

登录后复制

>如上所述，您需要托管带有表单的网页，以供用户更改他们的搜索内容。我的一个看起来像：

高级卵石手表配置 >您需要的基本HTML，因此（为简单起见，我删除

然后，我们在我们的设置页面上使用JavaScript将任何更改提交给我们的卵石的JavaScript并在用户当前设置中进行预填充。

取消或提交设置

<span><span><span><label</span> for<span>="searchingFor"</span>></span>Whatcha wanna find?<span><span></label</span>></span>
</span><span><span><span><textarea</span> cols<span>="40"</span> rows<span>="8"</span> name<span>="searchingFor"</span> id<span>="searchingFor"</span>></span><span><span></textarea</span>></span>
</span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-cancel"</span>></span>Cancel<span><span></button</span>></span>
</span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-submit"</span>></span>Submit<span><span></button</span>></span></span>

登录后复制

我们提供两个选项，它们可以取消 - 防止其任何更改保存，或者可以提交将这些更改传递到应用程序的表格。

要取消他们的更改，我们将文档设置为pebblejs：//关闭。那将向我们的鹅卵石JavaScript代码发送空的回复，该代码不会更改任何内容：

>如果他们选择提交更改，我们将输入从TextArea中传递到字符串中。下面的saveOptions（）函数将来自TextArea的值放入对象：>

我们的点击函数通过将对象转换为字符串并编码其字符来提交我们的数据更改）：

<span>$('#b-cancel').click(function() {
</span>  <span>document.location = 'pebblejs://close';
</span><span>});</span>

登录后复制

>将成功将我们想要的设置发送到卵石JavaScript。

如果用户已经选择了东西怎么办？

>如果用户已经对设置进行了更改，则说他们已经要求该应用程序找到冰淇淋，我们希望他们以前的“ gelato”设置在Textfield中出现设置。为此，我们将在URL中发送config HTML页面称为searchingfor。一个例子是URL http://www.yourpebbleappsettingpage.com?searchingfor = gelato。

>我很久以前找到了一个功能

<span>"capabilities": ["location", "configurable"]</span>

登录后复制

页面准备就绪后，我们检查一个变量，并将该变量的文本放入我们的文本字段中。该变量已解码，因此在URL字符串中使用的任何格式的字符都将在TextAarea中正确显示。为此，我们使用decodeuri（）函数。这将使我们的和其他特殊字符重新转变为他们的实际字符以供显示：

<span>"appKeys": {
</span>  <span>"location": 0,
</span>  <span>"searchingFor": 1
</span><span>}</span>

登录后复制

>随意造型该屏幕以使其变得漂亮和抓住眼睛！您可以将其构建并进行样式，但是您更喜欢它，因为它是一个平坦的HTML页面。卵石示例设置页面使用了JQuery Mobile，因此我坚持使用此操作，只是重新设计了一些东西以使其变得更整洁。使用您想要的任何前端框架或JavaScript验证。力量是你的！

调整我们的JavaScript以接受设置

>我们的Pebble应用程序知道我们要更改设置，我们告诉我们在我们的appinfo.json文件中。现在，我们的应用程序现在有一个不错的配置页面，看起来很有希望。问题是 - 我们的Pebble应用不知道在哪里可以找到我们承诺的配置屏幕。它甚至不知道我们要在哪里使用此搜索来来回发送的一些数据，只是我们打算拥有一个数据。这是我们更新pebble-js-app.js文件以连接所有内容的地方。

开始，我们将在JavaScript中需要一个新变量。让我们称其为搜索以匹配我们在appinfo.json文件中的密钥（不必将其命名相同，但为了保持一致性和清晰度，我已经这样做了）。这个变量需要做的是将用户对我们每天的卵石增强生活的位置类型的偏好存储。

>鹅卵石应用中的Web存储

>为了保存用户的偏好在我们的应用中，我们可以访问Pebble为我们提供的LocalStorage API。 Pebble很友好，可以遵循W3C推荐Web存储的建议，因此语法希望过去与Web Storage一起工作的任何人都不会太陌生。要将某些东西存储在本地存储中，我们致电：

检索它：

<span>"capabilities": ["location", "configurable"]</span>

登录后复制

>因此，在我们的情况下，我们需要将搜索数据存储在Pebble应用程序的本地存储中。我们将使用JavaScript变量在整个应用程序中访问它，但是有时候，当我们首次加载应用程序或从配置屏幕返回时，我们将从本地存储中设置此搜索变量。>

>我们将在JavaScript运行的那一刻查看本地存储。如果在本地存储中找不到我们的搜索数据，那么我们将默认设置为“星巴克”。这是在我们的locationOptions定义下在pebble-js-app.js file。

然后，我们将此变量添加到我们的ajax请求中，以代替星巴克提及：

<span>"appKeys": {
</span>  <span>"location": 0,
</span>  <span>"searchingFor": 1
</span><span>}</span>

登录后复制

到目前为止，我们的应用程序将做与以前相同的事情 - 找到我们的星巴克。当用户按下您的应用程序“设置”按钮时，我们需要让它知道该怎么做。我们使用showconfiguration事件听众来做到这一点：

<span><span><span><label</span> for<span>="searchingFor"</span>></span>Whatcha wanna find?<span><span></label</span>></span>
</span><span><span><span><textarea</span> cols<span>="40"</span> rows<span>="8"</span> name<span>="searchingFor"</span> id<span>="searchingFor"</span>></span><span><span></textarea</span>></span>
</span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-cancel"</span>></span>Cancel<span><span></button</span>></span>
</span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-submit"</span>></span>Submit<span><span></button</span>></span></span>

登录后复制

>将用户带到您的页面，并带有表格以填写这些设置。当他们提交新设置（例如上述“冰淇淋”）时，我们希望我们的JavaScript在pebble-js-app.js中准备好并等待该数据。为此，我们使用WebViewClatose事件侦听器。在这里，我们将其从URI字符串（用于空间等的编码版本等）中解码，然后再次将其解析为JSON对象。我们从该JSON对象获得搜索值，并再次对其进行编码，现在它不在我们的JSON字符串中。最后一点点编码是将其存储为准备将其放入前面讨论的Foursquare API调用中的URL字符串（https://api.foursquare.com/v2/venues/venues/search?client_id ='client_id ='clientid'＆client_secret'＆client '＆v ='version'＆ll ='latitude'，'经度'＆query ='searching for Request）：

<span>$('#b-cancel').click(function() {
</span>  <span>document.location = 'pebblejs://close';
</span><span>});</span>

登录后复制

>如果我们的价值不确定（似乎有很多原因可能发生了，但它们是边缘案例），我将最后的选择将其切换回“星巴克”。将来可能会有一种更好的方法来处理此问题，可能会出现错误，但是为了使此演示的事情保持简单，我在最坏的情况下默认为星巴克：

>我们对请求进行了搜索并准备存储后，我们就会使用上述窗口将其存储在本地存储中。这样，下次他们打开应用程序时仍将在那里。

<span>function saveOptions() {
</span>  <span>var options = {
</span>    <span>searchingFor: $('#searchingFor').val()
</span>  <span>}
</span>  <span>return options;
</span><span>}</span>

登录后复制

>现在，我们已收到新的设置请求，我们以新值再次运行window.navigator.geolocation.watchposition（）函数。这将运行我们的地理位置搜索与Foursquare API的新要求设置，它们关闭设置窗口。

<span>$('#b-submit').click(function() {
</span>  <span>var location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(saveOptions()));
</span>  <span>document.location = location;
</span><span>});</span>

登录后复制

我们的JavaScript现在了解这个新设置，但还有更多要做的事情。

我们的C代码

添加了一些添加

>我们的find_me_anything.c文件不需要更改太多。我进行了以下添加和更改。

增加消息缓冲区大小

我将消息缓冲区的大小提高到124个字节。我相信这是您可以将其带到卵石表上的最大值。额外的缓冲尺寸是这样，我可以发送潜在的位置名称和查询。新设置的数据长度有更大的变化，因此我们希望为此提供尽可能多的余地！

定义Sync_buffer时，更改是在文件开始时进行的：>

>当我们打开消息同步时，它在init（）函数中也会进一步更改：

<span>"capabilities": ["location", "configurable"]</span>

登录后复制

>在我们的应用中添加新密钥

<span>"appKeys": {
</span>  <span>"location": 0,
</span>  <span>"searchingFor": 1
</span><span>}</span>

登录后复制

>我们还需要添加我们的新密钥，这些密钥将在卵石JavaScript和C代码：搜索设置之间传递。在C代码中，我遵循了公约，并使用大写字母和下划线将单词分开。我们在十六进制中将1定义为0x1，这意味着我们现在可以在提及我们的C代码中的第二个键/值对时搜索__

>我更新了init_location_search（）函数，以便将searching_for值的初始值定义为''。它是空白的，因为一旦我们的JavaScript启动并告诉C我们要寻找的东西。

<span><span><span><label</span> for<span>="searchingFor"</span>></span>Whatcha wanna find?<span><span></label</span>></span>
</span><span><span><span><textarea</span> cols<span>="40"</span> rows<span>="8"</span> name<span>="searchingFor"</span> id<span>="searchingFor"</span>></span><span><span></textarea</span>></span>
</span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-cancel"</span>></span>Cancel<span><span></button</span>></span>
</span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-submit"</span>></span>Submit<span><span></button</span>></span></span>

登录后复制

>最后，我们更新我们的Sync_tuple_changed_callback（）函数，以便在收到更新的第二个密钥/值对时知道它会响应。当这样做时，我们需要做的C代码就是更改手表上的标签，以说“最近的冰淇淋”或其他新设置，而不是“最近的星巴克”：

<span>$('#b-cancel').click(function() {
</span>  <span>document.location = 'pebblejs://close';
</span><span>});</span>

登录后复制

>将所有这些都适用，您现在应该能够使用配置窗口更改应用程序的设置。提交设置时，Pebble应用程序应更新，并且您将拥有一个类似的自定义应用程序：>

<span>function saveOptions() {
</span>  <span>var options = {
</span>    <span>searchingFor: $('#searchingFor').val()
</span>  <span>}
</span>  <span>return options;
</span><span>}</span>

登录后复制

>我们JavaScript代码的额外添加我在实现此新功能时发现的一件事是，有时Foursquare API实际上没有一个地址或我们在每个场所需要的值。一些场所缺少该数据。当我们在手表上显示时，这将返回“未定义”。不好！因此，我重写了一些req.onload函数以通过我们的条目进行检查，并使用一个具有地址和城市的第一个功能：

高级卵石手表配置我上面所做的工作是设置一个称为“地点”的变量，该变量从不确定开始。我遍历响应中的每个项目。回答。从foursquare返回的数据，如果我找到包含地址和城市的数据，那么我将该对象保存在场地中，我们将不再搜索其余的响应。