利用PebbleJS寫pebble手錶應用

這個月初，任性買了剛發佈的pebble time，一直還沒寫個應用，這個週末抽出時間看看。

開頭

pebble的應用能夠用C和Node開發，開發工具也可使用cloudpebble（牆內用戶傷不起）或者下載sdk離線開發。

安裝SDK

mac安裝pebble sdk太簡單了

brew install pebble/pebble-sdk/pebble-sdk

網路順暢的話，安裝就完成了。

創建PebbleJS工程

離線建C項目只要運行pebble new-project xxx就好，可是js項目須要把github上的項目https://github.com/pebble/pebblejs.git clone下來

git clone https://github.com/pebble/pebblejs.git

文件目錄

pebble應用的配置文件在appinfo.json裏面，邏輯代碼都寫在src下的js/app.js裏

UI module

引入ui模塊

var ui = require('ui');

Window

var wind = new UI.Window({
  fullscreen: true,
});
wind.show();

效果如圖：

<img src="https://developer.getpebble.com/assets/images/getting-started/watchface-tutorial/1-blank.png">

Card

建立一個卡片

// Create a Card with title and subtitle
var card = new UI.Card({
    title:'Weather',
    subtitle:'Fetching...'
    });

// Display the Card
card.show();

card.on('click', 'up', function(e) {
    /*上鍵事件*/
    })
card.on('click', 'select', function(e) {
    /* 中鍵事件*/
    })
card.on('click', 'down', function(e) {
    /*下鍵事件*/
    })

效果如圖

<img src="https://developer.getpebble.com/assets/images/getting-started/pebble-js-tutorial/1-fetching.png">

Card還有body和icon屬性

Menu

var resultsMenu = new UI.Menu({
    sections: [{
        title: 'Current Forecast',
        items: [{
            title: 'Clear',
            subtitle: '11-05 21:00'
            }]
        }]
    });

    resultsMenu.on('select', function(e)    {
        console.log('Selected item #' + e.itemIndex + ' of section #' + e.sectionIndex);
        console.log('The item is titled "' + e.item.title + '"');
    });

    // Show the Menu
    resultsMenu.show();

<img src="https://developer.getpebble.com/assets/images/getting-started/pebble-js-tutorial/2-menu.png">

編譯

pebble build

#安裝

pebble install --phone 192.168.1.107//你的手機ip，記得打開pebble的調試模式

查看偶的博客，歡迎來踩