widget builder

منشئ القطعة

قم بتطوير وتثبيت وتوزيع واجهة المستخدم HTML لسطح مكتب Windows الخاص بك مع CLI بسيط

جدول المحتويات

1. تثبيت
2. دليل QuickStart
3. عينات
4. النشر والتثبيت
   1. نشر
   2. التثبيت
5. ملف التكوين
6. باستخدام CLI
7. المساهمة واجهة المستخدم

تثبيت

قم بتنزيل ، unzip ، انتقل إلى المجلد ، والتثبيت مع npm :

 $ npm install -g
$ npm start

أو تنزيل مباشرة من npm :

 $ npm install -g widget-builder

دليل QuickStart

1. إنشاء مجلد جديد
2. cd للمجلد ، وأدخل widgets init ، وملء اسم مشروعك
3. تعبث مع ملف HTML الذي تم إنشاؤه لتخصيص مظهر عنصر واجهة المستخدم
4. إضافة وربط ملفات JavaScript أو CSS إلى ملف HTML الرئيسي الخاص بك
5. تعديل ملف التكوين
6. انتقل إلى المجلد وأدخل widgets build لبناء وتثبيت عنصر واجهة المستخدم محليا

عينات

تحقق من مستمع Spotify ، عنصر واجهة مستخدم للاستماع إلى الألحان المفضلة لديك:

نشر وتثبيت واجهة المستخدم

نشر

هل تريد مشاركة عنصر واجهة المستخدم للتوزيع؟ هذا ما يجب القيام به:

1. cd إلى مجلد المشروع الخاص بك
2. تشغيل widgets publish
3. سيتم إنشاء مجلد dist جديد في نفس الدليل مثل مجلد المشروع الخاص بك. يمكنك الآن توزيع هذا المجلد ، ويمكن للآخرين تثبيته باستخدام widgets install

التثبيت

إليك كيفية تثبيت عنصر واجهة مستخدم تمت مشاركته معك:

1. انتقل إلى المجلد
2. قم بتشغيل widgets install

ملف التكوين

يحتوي كل مشروع مصغرة على ملف config.json . يخبر هذا الملف البرنامج عن الإعدادات التي ترغب في استخدامها لعنصر واجهة المستخدم.
إليك ملف التكوين القياسي:

{
  "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
  }
}

ملكية	تعريف
name (سلسلة)	اسم المشروع
version (سلسلة)	نسخة المشروع
index (سلسلة)	الإشارة إلى ملف HTML الرئيسي الخاص بك. يجب ربط المراجع الأخرى (مثل JS أو CSS) في هذا الملف.
x ، y ، width ، height (الأعداد الصحيحة)	موقف وأبعاد عنصر واجهة المستخدم عندما يتم بدء تشغيله لأول مرة
transparent (منطقي)	اجعل خلفية القطعة شفافة
interact (منطقية)	اجعل القطعة قابلة للتفاعل
draggable (منطقية)	اجعل القطعة قابلة للسحب
top (منطقية)	اجعل القطعة تبقى على رأس جميع النوافذ
requirements (صفيف)	حزم NPM المطلوبة لعمل القطعة ؛ يتم تثبيت هذه الحزم محليًا عند تثبيت عنصر واجهة المستخدم
install (سلسلة أو صفيف)	السيناريو (السيناريو) لتشغيله أثناء تثبيت عنصر واجهة المستخدم

باستخدام CLI

بمجرد تثبيت منشئ القطعة ، يمكن الوصول إلى CLI باستخدام widgets الرئيسية

الأوامر

يأمر	تعريف
widgets build [folder]	يبني ملفات HTML إلى عنصر واجهة مستخدم لسطح المكتب وتثبيت
widgets publish [folder]	يقوم بإنشاء ملف dist يمكن تثبيته بواسطة CLI Tidgets
widgets install [folder]	يقوم بتثبيت القطعة في المجلد
widgets init [folder]	تهيئة المشروع عن واجهة المستخدم
widgets list	يسرد جميع الأدوات المثبتة
widgets uninstall <widget>	قم بإلغاء التثبيت بالاسم
widgets config <widget>	تكوين القطعة بالاسم
widgets start [folder]	يبدأ القطعة في المجلد

خيارات

يأمر	تعريف
widgets --help	عرض المساعدة
widgets --version	يعرض الإصدار الحالي

المساهمة واجهة المستخدم

هنا يمكنك العثور على تعليمات لمشاركة الحاجيات التي قمت بإنشائها