widget builder

Widget Builder

Entwickeln, installieren und verteilen Sie HTML -Widgets für Ihren Windows -Desktop mit einer einfachen CLI

Inhaltsverzeichnis

1. Installation
2. QuickStart Guide
3. Proben
4. Veröffentlichung und Installation
   1. Veröffentlichung
   2. Installation
5. Die Konfigurationsdatei
6. Mit der CLI
7. Widgets beitragen

Installation

Laden, entpacken, zum Ordner navigieren und mit npm installieren:

 $ npm install -g
$ npm start

oder direkt von npm herunterladen:

 $ npm install -g widget-builder

QuickStart Guide

1. Erstellen Sie einen neuen Ordner
2. cd zum Ordner, geben Sie widgets init ein und füllen Sie den Namen Ihres Projekts aus
3. Machen Sie sich mit der generierten HTML -Datei herum, um das Erscheinungsbild Ihres Widgets anzupassen
4. Fügen Sie JavaScript- oder CSS -Dateien in Ihre Master -HTML -Datei hinzu und verlinken Sie sie
5. Ändern Sie die Konfigurationsdatei
6. Navigieren Sie zum Ordner und geben Sie widgets build ein, um Ihr Widget lokal zu erstellen und zu installieren

Proben

Schauen Sie sich Spotify Listener an, ein Widget, um Ihre Lieblingsmusik zu hören:

Widgets veröffentlichen und installieren

Veröffentlichung

Sie möchten also Ihr Widget für die Verteilung teilen? Hier ist, was zu tun ist:

1. cd zu Ihrem Projektordner
2. widgets publish
3. Ein neuer dist -Ordner wird im selben Verzeichnis wie Ihr Projektordner generiert. Sie können diesen Ordner jetzt verteilen und andere können ihn mit widgets install installieren

Installation

Hier erfahren Sie, wie Sie ein Widget installieren, das mit Ihnen geteilt wurde:

1. Navigieren Sie zum Ordner
2. Führen Sie widgets install

Die Konfigurationsdatei

Jedes Widgets -Projekt enthält eine config.json -Datei. Diese Datei gibt dem Programm mit, welche Einstellungen Sie für Ihr Widget verwenden möchten.
Hier ist eine Standard -Konfigurationsdatei:

{
  "name" : " widget " ,
  "version" : " 1.0.0 " ,
  "description" : " Custom desktop widget " ,
  "index" : " ./index.html " ,
  "properties" : {
    "x" : 100 ,
    "y" : 100 ,
    "width" : 100 ,
    "height" : 100 ,
    "transparent" : false ,
    "interact" : true ,
    "draggable" : true
  }
}

Eigentum	Definition
name (Zeichenfolge)	Projektname
version (String)	Projektversion
index (Zeichenfolge)	Der Verweis auf Ihre Master -HTML -Datei. Andere Referenzen (wie JS oder CSS) sollten in dieser Datei verknüpft werden.
x , y , width und height (Ganzzahlen)	Die Position und die Abmessungen Ihres Widgets beim ersten Start
transparent (boolean)	Machen Sie den Hintergrund des Widgets transparent
interact (boolean)	Das Widget interaktiv machen
draggable (boolean)	Machen Sie das Widget draggierbar
top (boolean)	Lassen Sie das Widget ganz oben auf allen Fenstern bleiben
requirements (Array)	NPM -Pakete, die für das Widget erforderlich sind; Diese Pakete sind lokal installiert, wenn das Widget installiert ist
install (Zeichenfolge oder Array)	Skript (en), die während der Widget -Installation ausgeführt werden sollen

Mit der CLI

Sobald der Widget Builder installiert ist, kann auf die CLI mit den Keyword widgets zugegriffen werden

Befehle

Befehl	Definition
widgets build [folder]	Erstellt HTML -Dateien zum Desktop -Widget und installiert
widgets publish [folder]	Generiert eine DIST -Datei, die von der Widgets CLI installiert werden kann
widgets install [folder]	Installiert das Widget im Ordner
widgets init [folder]	Initialisiert das Widgets -Projekt
widgets list	Listet alle installierten Widgets auf
widgets uninstall <widget>	Widget mit Namen deinstallieren
widgets config <widget>	Konfigurieren Sie das Widget mit dem Namen
widgets start [folder]	Startet das Widget im Ordner

Optionen

Befehl	Definition
widgets --help	Hilfe zeigen
widgets --version	Zeigt die aktuelle Version an

Widgets beitragen

Hier finden Sie Anweisungen zum Teilen von Widgets, die Sie erstellt haben