pebble-sdk - 是否可以显示设置页面并使用 Pebble.js 和 CloudPebble 与手机通信？

Question

是否可以在手机上获取用户输入并对其进行处理，然后仅使用 Pebble.js 和 CloudPebble 在 pebble 手表上显示一些结果？

对于这种情况，我认为我需要 PebbleKit JS 或 PebbleKit Android/iOS 才能在手机和手表之间进行通信。对吗？

Answer 1

Pebble.js 是使用 PebbleKit JS 构建的，因此您可以使用 PebbleKit JS 做的任何事情都可以在 Pebble.js 中完成，包括设置页面。

Answer 2

要使用 CloudPebble，您必须对配置页面进行一些更改。首先，您将像使用常规应用程序一样在 Web 上托管页面。但是，对于 Pebble.js 和 CloudPebble 测试，您需要使用从 CloudPebble 传递给您的 return_to 查询字符串值将配置数据发送回您的模拟器。

这是一个示例（在顶部脚本部分的配置网页上）

function getQuerystring(key, default_) {
  if (default_ == null) default_ = "";
  key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
  var qs = regex.exec(window.location.href);
  if (qs == null)
    return default_;
  else
    return qs[1];
}

// set this value from the "options" query string value.
// This is the value of the options that you'll receive from your app
var optionsString = getQuerystring("options", "{username:''}");
var options = JSON.parse(optionsString);

// get the return to value from query string. Set it to blank if it's not there
var returnTo = getQuerystring("return_to","");

function sendConfigData() {

    var options = { username: txtUsername.value };
    if (returnTo != '') {
        document.location = returnTo + JSON.stringify(options);
    }
    else {
        document.location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(options));
    }
}

function cancel() {
    if (returnTo != '') {
        document.location = returnTo;
    }
    else {
        document.location = "pebblejs://close";
    }
}

然后，在您的表单中，设置提交按钮以调用相应的函数。

<input type="text" id="txtUsername" placeholder="User Name" />
<input type="button" value="Save" onclick="sendConfigData()" />
<input type="button" value="Cancel" onclick="cancel()" />

在配置 Web 表单的底部，放置以下 JavaScript：

txtUsername.value = options.username;

在 CloudPebble 中的 app.js 文件中，调用配置屏幕的方式如下：

var options = { username : 'default' };
var OPTIONS_SETTING_KEY = 0;

function showConfiguration(){
  console.log("showing configuration");
  Pebble.openURL('http://yourwebsite.com/PebbleConfig?options=' + encodeURIComponent(JSON.stringify(options)));
}

Pebble.addEventListener("showConfiguration", function() {
  showConfiguration();
});

Pebble.addEventListener("webviewclosed", function(e) {
  console.log("configuration closed");
  // webview closed
  //Using primitive JSON validity and non-empty check
  console.log('response: ' + e.response);
  if (e.response.charAt(0) == "{" && e.response.slice(-1) == "}" && e.response.length > 5) {
    options = JSON.parse(decodeURIComponent(e.response));
    // Write a key with associated value
    localStorage.setItem(OPTIONS_SETTING_KEY, JSON.stringify(options));

    console.log("Options = " + JSON.stringify(options));
  } else {
    console.log("Cancelled");
  }
});

var optionString = localStorage.getItem(OPTIONS_SETTING_KEY);
if(optionString === null || optionString === ''){
  console.log('Using default username');
}
else {
  options = JSON.parse(optionString);
  console.log('Set username: ' + options.username);
}

现在您可以在整个应用程序中使用您的选项。当您将此应用程序部署到应用商店的生产环境时，网页将检测到 return_to 查询字符串丢失，并将使用适当的关闭机制 ( document.location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(options));) 并将配置发送回您的手表。