เมื่อต้นปีที่ผ่านมา Github ได้เปิดตัว Atom-Shell ซึ่งเป็นแกนหลักของโปรแกรมแก้ไขโอเพนซอร์สที่มีชื่อเสียง อะตอม และเปลี่ยนชื่อเป็น อิเล็กตรอน สำหรับโอกาสพิเศษ
Electron ซึ่งแตกต่างจากคู่แข่งรายอื่นในประเภทของแอปพลิเคชันเดสก์ท็อปที่ใช้ Node.js นำความแปลกใหม่มาสู่ตลาดที่มีชื่อเสียงนี้โดยการรวมพลังของ Node.js io.js จนถึงรุ่นล่าสุด) ด้วยไฟล์ Chromium Engine เพื่อนำเสนอสิ่งที่ดีที่สุดของทั้งเซิร์ฟเวอร์และ JavaScript ฝั่งไคลเอ็นต์
ลองนึกภาพโลกที่เราสามารถสร้างแอปพลิเคชันเดสก์ท็อปข้ามแพลตฟอร์มที่ขับเคลื่อนด้วยข้อมูลซึ่งขับเคลื่อนโดยไม่เพียง แต่พื้นที่เก็บข้อมูลที่เพิ่มขึ้นเรื่อย ๆ ของโมดูล NPM เท่านั้น แต่ยังรวมถึงรีจิสตรี Bower ทั้งหมดเพื่อตอบสนองความต้องการฝั่งไคลเอ็นต์ทั้งหมดของเรา
ป้อน อิเล็กตรอน .
ในบทช่วยสอนนี้เราจะสร้างแอปพลิเคชั่นพวงกุญแจรหัสผ่านง่ายๆโดยใช้ Electron, Angular.js และ Loki.js ซึ่งเป็นฐานข้อมูลน้ำหนักเบาและอยู่ในหน่วยความจำพร้อมไวยากรณ์ที่คุ้นเคยสำหรับ นักพัฒนา MongoDB .
มีซอร์สโค้ดแบบเต็มสำหรับแอปพลิเคชันนี้ ที่นี่ .
บทช่วยสอนนี้อนุมานว่า:
ก่อนอื่นเราจะต้องได้รับอิเล็กตรอนไบนารีเพื่อทดสอบแอปของเราในเครื่อง เราสามารถติดตั้งได้ทั่วโลกและใช้เป็น CLI หรือติดตั้งภายในเครื่องในเส้นทางของแอปพลิเคชันของเรา ฉันแนะนำให้ติดตั้งทั่วโลกเพื่อที่เราจะได้ไม่ต้องทำซ้ำแล้วซ้ำอีกสำหรับทุกแอปที่เราพัฒนา
เราจะเรียนรู้วิธีการจัดแพคเกจแอปพลิเคชันของเราสำหรับการแจกจ่ายโดยใช้ Gulp ในภายหลัง กระบวนการนี้เกี่ยวข้องกับการคัดลอกไบนารีอิเล็กตรอนดังนั้นจึงไม่มีเหตุผลที่จะติดตั้งด้วยตนเองในเส้นทางของแอปพลิเคชันของเรา
ในการติดตั้ง Electron CLI เราสามารถพิมพ์คำสั่งต่อไปนี้ในเทอร์มินัลของเรา:
$ npm install -g electron-prebuilt
ในการทดสอบการติดตั้งให้พิมพ์ electron -h
และควรแสดงเวอร์ชันของ Electron CLI
ในขณะที่เขียนบทความนี้เวอร์ชันของ Electron คือ 0.31.2
สมมติว่าโครงสร้างโฟลเดอร์พื้นฐานดังต่อไปนี้:
my-app |- cache/ |- dist/ |- src/ |-- app.js | gulpfile.js
…ที่ไหน: - แคช / จะใช้เพื่อดาวน์โหลดไบนารีอิเล็กตรอนเมื่อสร้างแอป - ระยะ / จะมีไฟล์แจกจ่ายที่สร้างขึ้น - src / จะมีซอร์สโค้ดของเรา - src / app.js จะเป็นจุดเริ่มต้นของแอปพลิเคชันของเรา
ต่อไปเราจะไปที่ src/
โฟลเดอร์ในเทอร์มินัลของเราและสร้าง package.json
และ bower.json
ไฟล์สำหรับแอพของเรา:
$ npm init $ bower init
เราจะติดตั้งแพ็คเกจที่จำเป็นในภายหลังในบทช่วยสอนนี้
อิเล็กตรอนแยกความแตกต่างระหว่างกระบวนการสองประเภท:
เพื่อความชัดเจนของโค้ดควรใช้ไฟล์แยกต่างหากสำหรับแต่ละกระบวนการ Renderer ในการกำหนดกระบวนการหลักสำหรับแอปของเราเราจะเปิด
src/app.js
และรวมapp
โมดูลเพื่อเริ่มแอปและbrowser-window
โมดูลเพื่อสร้างหน้าต่างต่างๆของแอพของเรา (ทั้งสองส่วนของแกนอิเล็กตรอน) เช่น:
var app = require('app'), BrowserWindow = require('browser-window');
เมื่อแอปเริ่มทำงานจริงแอปจะเริ่มการทำงาน ready
เหตุการณ์ที่เราผูกไว้ได้ ณ จุดนี้เราสามารถสร้างอินสแตนซ์หน้าต่างหลักของแอพของเรา:
var mainWindow = null; app.on('ready', function() { mainWindow = new BrowserWindow({ width: 1024, height: 768 }); mainWindow.loadUrl('file://' + __dirname + '/windows/main/main.html'); mainWindow.openDevTools(); });
ประเด็นสำคัญ:
BrowserWindow
วัตถุ.loadUrl()
ช่วยให้เราโหลดเนื้อหาของไฟล์ HTML จริงในหน้าต่างปัจจุบัน ไฟล์ HTML สามารถเป็นไฟล์ ท้องถิ่น หรือ ระยะไกล .openDevTools()
ช่วยให้เราสามารถเปิดอินสแตนซ์ของ Chrome Dev Tools ในหน้าต่างปัจจุบันเพื่อวัตถุประสงค์ในการดีบักต่อไปเราควรจัดระเบียบรหัสของเราเล็กน้อย ฉันขอแนะนำให้สร้าง windows/
โฟลเดอร์ใน src/
ของเรา โฟลเดอร์และตำแหน่งที่เราสามารถสร้างโฟลเดอร์ย่อยสำหรับแต่ละหน้าต่างได้ดังนี้:
my-app |- src/ |-- windows/ |--- main/ |---- main.controller.js |---- main.html |---- main.view.js
…ที่ main.controller.js
จะมีตรรกะ 'ฝั่งเซิร์ฟเวอร์' ของแอปพลิเคชันของเราและ main.view.js
จะมีตรรกะ 'ฝั่งไคลเอ็นต์' ของแอปพลิเคชันของเรา
main.html
ไฟล์เป็นเพียงหน้าเว็บ HTML5 ดังนั้นเราจึงสามารถเริ่มต้นได้ดังนี้:
Password Keychain
ณ จุดนี้แอปของเราควรพร้อมที่จะทำงาน ในการทดสอบเราสามารถพิมพ์สิ่งต่อไปนี้ในเทอร์มินัลของเราที่รูทของ src
โฟลเดอร์:
$ electron .
เราสามารถทำให้กระบวนการนี้เป็นไปโดยอัตโนมัติโดยกำหนด
start
สคริปต์ของไฟล์ package.son
ในการสร้างแอปพลิเคชันพวงกุญแจรหัสผ่านเราต้องการ: - วิธีเพิ่มสร้างและบันทึกรหัสผ่าน - วิธีที่สะดวกในการคัดลอกและลบรหัสผ่าน
แบบฟอร์มง่ายๆก็เพียงพอที่จะใส่รหัสผ่านใหม่ เพื่อประโยชน์ในการสาธิตการสื่อสารระหว่างหน้าต่างหลายบานใน Electron ให้เริ่มด้วยการเพิ่มหน้าต่างที่สองในแอปพลิเคชันของเราซึ่งจะแสดงแบบฟอร์ม 'แทรก' เนื่องจากเราจะเปิดและปิดหน้าต่างนี้หลาย ๆ ครั้งเราจึงควรสรุปตรรกะด้วยวิธีการเพื่อให้เราสามารถเรียกมันได้เมื่อจำเป็น:
function createInsertWindow() { insertWindow = new BrowserWindow({ width: 640, height: 480, show: false }); insertWindow.loadUrl('file://' + __dirname + '/windows/insert/insert.html'); insertWindow.on('closed',function() { insertWindow = null; }); }
ประเด็นสำคัญ:
แนวคิดคือสามารถทริกเกอร์หน้าต่าง 'แทรก' ได้เมื่อผู้ใช้คลิกปุ่มในหน้าต่าง 'หลัก' ในการดำเนินการนี้เราจะต้องส่งข้อความจากหน้าต่างหลักไปยังกระบวนการหลักเพื่อสั่งให้เปิดหน้าต่างแทรก เราสามารถบรรลุสิ่งนี้ได้โดยใช้โมดูล IPC ของ Electron โมดูล IPC มีอยู่สองรูปแบบ:
แม้ว่าช่องทางการสื่อสารของ Electron ส่วนใหญ่จะเป็นแบบทิศทางเดียว แต่ก็สามารถเข้าถึงโมดูล IPC ของกระบวนการหลักในกระบวนการ Renderer ได้โดยใช้ประโยชน์จาก ระยะไกล โมดูล. นอกจากนี้กระบวนการหลักยังสามารถส่งข้อความกลับไปที่ Renderer Process ซึ่งเหตุการณ์เกิดขึ้นโดยใช้ไฟล์ Event.sender.send () วิธี.
ในการใช้โมดูล IPC เราต้องการให้เหมือนกับโมดูล NPM อื่น ๆ ในสคริปต์กระบวนการหลักของเรา:
var ipc = require('ipc');
…แล้วเชื่อมโยงกับเหตุการณ์ด้วย on()
วิธี:
ipc.on('toggle-insert-view', function() { if(!insertWindow) { createInsertWindow(); } return (!insertWindow.isClosed() && insertWindow.isVisible()) ? insertWindow.hide() : insertWindow.show(); });
ประเด็นสำคัญ:
closed
หรือไม่ สถานะ.ตอนนี้เราจำเป็นต้องเริ่มเหตุการณ์นั้นจากกระบวนการ Renderer เราจะสร้างไฟล์สคริปต์ใหม่ชื่อ main.view.js
และเพิ่มลงในหน้า HTML ของเราเช่นเดียวกับที่เราทำกับสคริปต์ปกติ:
script
การโหลดไฟล์สคริปต์ผ่าน HTML
window.
แท็กโหลดไฟล์นี้ในบริบทฝั่งไคลเอ็นต์ ซึ่งหมายความว่าตัวอย่างเช่นตัวแปรส่วนกลางพร้อมใช้งานผ่านrequire()
ในการโหลดสคริปต์ในบริบทฝั่งเซิร์ฟเวอร์เราสามารถใช้require('./main.controller.js');
วิธีโดยตรงในหน้า HTML ของเรา:var ipc = require('ipc'); angular .module('Utils', []) .directive('toggleInsertView', function() { return function(scope, el) { el.bind('click', function(e) { e.preventDefault(); ipc.send('toggle-insert-view'); }); }; });
.
แม้ว่าจะโหลดสคริปต์ใน ด้านลูกค้า บริบทเรายังคงสามารถเข้าถึงโมดูล IPC สำหรับกระบวนการ Renderer ในลักษณะเดียวกับที่เราทำได้สำหรับกระบวนการหลักจากนั้นส่งเหตุการณ์ของเราดังนี้:
add
นอกจากนี้ยังมีวิธี sendSync () ที่ใช้ได้ในกรณีที่เราจำเป็นต้องส่งเหตุการณ์ของเราพร้อมกัน
ตอนนี้สิ่งที่เราต้องทำเพื่อเปิดหน้าต่าง 'แทรก' คือการสร้างปุ่ม HTML ที่มีคำสั่ง Angular ที่ตรงกัน:
angular .module('MainWindow', ['Utils']) .controller('MainCtrl', function() { var vm = this; });
และเพิ่มคำสั่งนั้นเป็นการพึ่งพาตัวควบคุมเชิงมุมของหน้าต่างหลัก:
uuid
เพื่อให้สิ่งต่างๆง่ายขึ้นเราสามารถใช้ NPM var uuid = require('uuid'); angular .module('Utils', []) ... .factory('Generator', function() { return { create: function() { return uuid.v4(); } }; })
โมดูลเพื่อสร้างรหัสเฉพาะที่จะทำหน้าที่เป็นรหัสผ่านสำหรับจุดประสงค์ของบทช่วยสอนนี้ เราสามารถติดตั้งได้เหมือนกับโมดูล NPM อื่น ๆ โดยต้องใช้ในสคริปต์ 'Utils' ของเราจากนั้นสร้างโรงงานอย่างง่ายที่จะส่งคืน ID เฉพาะ:
generate
ตอนนี้สิ่งที่เราต้องทำคือสร้างปุ่มในมุมมองแทรกและแนบคำสั่งที่จะฟังเหตุการณ์คลิกบนปุ่มและเรียกใช้เมธอด create ():
// in Utils.js angular .module('Utils', []) ... .directive('generatePassword', ['Generator', function(Generator) { return function(scope, el) { el.bind('click', function(e) { e.preventDefault(); if(!scope.vm.formData) scope.vm.formData = {}; scope.vm.formData.password = Generator.create(); scope.$apply(); }); }; }])
{ 'id': String 'description': String, 'username': String, 'password': String }
ณ จุดนี้เราต้องการจัดเก็บรหัสผ่านของเรา โครงสร้างข้อมูลสำหรับรายการรหัสผ่านของเราค่อนข้างง่าย:
Description... Username... Password... generate cancel save
ดังนั้นสิ่งที่เราต้องการจริงๆคือฐานข้อมูลในหน่วยความจำบางประเภทที่สามารถเลือกซิงค์ไฟล์เพื่อสำรองข้อมูลได้ ด้วยเหตุนี้ Loki.js จึงดูเหมือนเป็นตัวเลือกที่ดีที่สุด มันทำสิ่งที่เราต้องการสำหรับจุดประสงค์ของแอปพลิเคชันนี้และมีข้อเสนอพิเศษเพิ่มเติมจาก มุมมองแบบไดนามิก ช่วยให้เราสามารถทำสิ่งต่างๆที่คล้ายกับโมดูลการรวมของ MongoDB
มุมมองแบบไดนามิกไม่มีฟังก์ชันทั้งหมดที่โมดูล Aggregation ของ MongodDB ทำ โปรดดูที่ไฟล์ เอกสารประกอบ สำหรับข้อมูลเพิ่มเติม.
เริ่มต้นด้วยการสร้างรูปแบบ HTML ง่ายๆ:
var loki = require('lokijs'), path = require('path'); angular .module('Utils', []) ... .service('Storage', ['$q', function($q) { this.db = new loki(path.resolve(__dirname, '../..', 'app.db')); this.collection = null; this.loaded = false; this.init = function() { var d = $q.defer(); this.reload() .then(function() { this.collection = this.db.getCollection('keychain'); d.resolve(this); }.bind(this)) .catch(function(e) { // create collection this.db.addCollection('keychain'); // save and create file this.db.saveDatabase(); this.collection = this.db.getCollection('keychain'); d.resolve(this); }.bind(this)); return d.promise; }; this.addDoc = function(data) { var d = $q.defer(); if(this.isLoaded() && this.getCollection()) { this.getCollection().insert(data); this.db.saveDatabase(); d.resolve(this.getCollection()); } else { d.reject(new Error('DB NOT READY')); } return d.promise; }; }) .directive('savePassword', ['Storage', function(Storage) { return function(scope, el) { el.bind('click', function(e) { e.preventDefault(); if(scope.vm.formData) { Storage .addDoc(scope.vm.formData) .then(function() { // reset form & close insert window scope.vm.formData = {}; ipc.send('toggle-insert-view'); }); } }); }; }])
ตอนนี้เรามาเพิ่มตรรกะของ JavaScript เพื่อจัดการการโพสต์และบันทึกเนื้อหาของแบบฟอร์ม:
getCollection()
ประเด็นสำคัญ:
insert()
วิธี.saveDatabase()
ช่วยให้เราสามารถเพิ่มเอกสารใหม่ในคอลเล็กชันได้getCollection()
วิธี.ตอนนี้เรามีแบบฟอร์มง่ายๆที่ช่วยให้เราสร้างและบันทึกรหัสผ่านใหม่ได้ กลับไปที่มุมมองหลักเพื่อแสดงรายการเหล่านี้
บางสิ่งต้องเกิดขึ้นที่นี่:
เราสามารถเรียกดูรายการเอกสารได้โดยโทรไปที่ this.getCollection = function() { this.collection = this.db.getCollection('keychain'); return this.collection; }; this.getDocs = function() { return (this.getCollection()) ? this.getCollection().data : null; };
วิธีการบนวัตถุ Loki วิธีนี้ส่งคืนวัตถุที่มีคุณสมบัติที่เรียกว่า ข้อมูล ซึ่งเป็นเพียงอาร์เรย์ของเอกสารทั้งหมดในคอลเล็กชันนั้น:
angular .module('MainView', ['Utils']) .controller('MainCtrl', ['Storage', function(Storage) { var vm = this; vm.keychain = null; Storage .init() .then(function(db) { vm.keychain = db.getDocs(); }); });
จากนั้นเราสามารถเรียก getDocs () ในตัวควบคุมเชิงมุมของเราและดึงรหัสผ่านทั้งหมดที่เก็บไว้ในฐานข้อมูลหลังจากที่เราเริ่มต้น:
{{item.description}} {item.username } • copy remove
Angular templating เล็กน้อยและเรามีรายการรหัสผ่าน:
main.view.js
คุณลักษณะเพิ่มเติมที่ดีคือการรีเฟรชรายการรหัสผ่านหลังจากใส่รหัสใหม่ สำหรับสิ่งนี้เราสามารถใช้โมดูล IPC ของ Electron ดังที่ได้กล่าวไว้ก่อนหน้านี้โมดูล IPC ของกระบวนการหลักสามารถเรียกใช้ในกระบวนการ Renderer เพื่อเปลี่ยนเป็นกระบวนการฟังโดยใช้โมดูลระยะไกล นี่คือตัวอย่างวิธีการใช้งานใน var remote = require('remote'), remoteIpc = remote.require('ipc'); angular .module('MainView', ['Utils']) .controller('MainCtrl', ['Storage', function(Storage) { var vm = this; vm.keychain = null; Storage .init() .then(function(db) { vm.keychain = db.getDocs(); remoteIpc.on('update-main-view', function() { Storage .reload() .then(function() { vm.keychain = db.getDocs(); }); }); }); }]);
:
require()
ประเด็นสำคัญ:
on()
ของมันเอง วิธีการต้องการโมดูล IPC ระยะไกลจากกระบวนการหลักStorage .addDoc(scope.vm.formData) .then(function() { // refresh list in main view ipc.send('update-main-view'); // reset form & close insert window scope.vm.formData = {}; ipc.send('toggle-insert-view'); });
วิธีการและผูกฟังก์ชันการโทรกลับกับเหตุการณ์เหล่านี้จากนั้นมุมมองแทรกจะรับผิดชอบในการจัดส่งเหตุการณ์นี้เมื่อใดก็ตามที่บันทึกเอกสารใหม่:
var clipboard = require('clipboard'); angular .module('Utils', []) ... .directive('copyPassword', [function() { return function(scope, el, attrs) { el.bind('click', function(e) { e.preventDefault(); var text = (scope.vm.keychain[attrs.copyPassword]) ? scope.vm.keychain[attrs.copyPassword].password : ''; // atom's clipboard module clipboard.clear(); clipboard.writeText(text); }); }; }]);
โดยปกติไม่ควรแสดงรหัสผ่านเป็นข้อความธรรมดา แต่เราจะซ่อนและจัดเตรียมปุ่มอำนวยความสะดวกเพื่อให้ผู้ใช้สามารถคัดลอกรหัสผ่านสำหรับรายการเฉพาะได้โดยตรง
ข้อใดไม่ใช่เครื่องมือหรือเทคนิคทั่วไปที่ใช้ในการออกแบบที่ตอบสนอง
ที่นี่อีกครั้ง Electron มาช่วยเราด้วยการให้ไฟล์ คลิปบอร์ด โมดูลด้วยวิธีง่ายๆในการคัดลอกและวางไม่เพียง แต่เนื้อหาข้อความเท่านั้น แต่ยังรวมถึงรูปภาพและโค้ด HTML ด้วย:
writeText()
เนื่องจากรหัสผ่านที่สร้างขึ้นจะเป็นสตริงธรรมดาเราจึงสามารถใช้ copy-password
วิธีคัดลอกรหัสผ่านไปยังคลิปบอร์ดของระบบ จากนั้นเราสามารถอัปเดต HTML มุมมองหลักของเราและเพิ่มปุ่มคัดลอกด้วย copy
คำสั่งโดยให้ดัชนีของอาร์เรย์รหัสผ่าน:
remove()
ผู้ใช้ปลายทางของเราอาจต้องการที่จะลบรหัสผ่านได้ในกรณีที่ล้าสมัย ในการทำสิ่งนี้สิ่งที่เราต้องทำคือเรียก this.removeDoc = function(doc) { return function() { var d = $q.defer(); if(this.isLoaded() && this.getCollection()) { // remove the doc from the collection & persist changes this.getCollection().remove(doc); this.db.saveDatabase(); // inform the insert view that the db content has changed ipc.send('reload-insert-view'); d.resolve(true); } else { d.reject(new Error('DB NOT READY')); } return d.promise; }.bind(this); };
วิธีการรวบรวมพวงกุญแจ เราจำเป็นต้องให้ทั้งเอกสารกับเมธอด 'remove ()' ดังต่อไปนี้:
var remote = require('remote'), Menu = remote.require('menu');
เอกสารของ Loki.js ระบุว่าเราสามารถลบเอกสารโดยใช้ id ได้ แต่ดูเหมือนจะไม่ทำงานตามที่คาดไว้
Electron ผสานรวมกับสภาพแวดล้อมเดสก์ท็อประบบปฏิบัติการของเราได้อย่างราบรื่นเพื่อมอบประสบการณ์ผู้ใช้แบบ“ เนทีฟ” ให้กับแอป ดังนั้นอิเล็กตรอนจึงมาพร้อมกับ โมดูลเมนู ทุ่มเทให้กับการสร้างโครงสร้างเมนูเดสก์ท็อปที่ซับซ้อนสำหรับแอปของเรา
โมดูลเมนูเป็นหัวข้อที่กว้างขวางและเกือบจะสมควรได้รับการสอนด้วยตัวเอง ฉันขอแนะนำให้คุณอ่าน บทแนะนำการรวมสภาพแวดล้อมเดสก์ท็อปของ Electron เพื่อค้นหาคุณสมบัติทั้งหมดของโมดูลนี้
สำหรับขอบเขตของบทช่วยสอนปัจจุบันนี้เราจะดูวิธีสร้างเมนูแบบกำหนดเองเพิ่มคำสั่งที่กำหนดเองและใช้คำสั่งเลิกมาตรฐาน
โดยทั่วไปตรรกะของ JavaScript สำหรับเมนู Electron จะอยู่ในไฟล์สคริปต์หลักของแอปของเราซึ่งมีการกำหนดกระบวนการหลักของเรา อย่างไรก็ตามเราสามารถสรุปเป็นไฟล์แยกต่างหากและเข้าถึงโมดูลเมนูผ่านโมดูลระยะไกล:
buildFromTemplate()
ในการกำหนดเมนูง่ายๆเราจะต้องใช้ var appMenu = Menu.buildFromTemplate([ { label: 'Electron', submenu: [{ label: 'Credits', click: function() { alert('Built with Electron & Loki.js.'); } }] } ]);
วิธี:
label
รายการแรกในอาร์เรย์จะใช้เป็นรายการเมนู 'ค่าเริ่มต้น' เสมอ
ค่าของ
Electron
คุณสมบัติไม่สำคัญมากสำหรับรายการเมนูเริ่มต้น ในโหมด dev จะแสดงsetApplicationMenu()
เราจะดูวิธีกำหนดชื่อที่กำหนดเองให้กับรายการเมนูเริ่มต้นในภายหลังในช่วงการสร้าง
สุดท้ายเราต้องกำหนดเมนูที่กำหนดเองนี้เป็นเมนูเริ่มต้นสำหรับแอปของเราด้วย Menu.setApplicationMenu(appMenu);
วิธี:
Command+A
อิเล็กตรอนให้“ ตัวเร่ง ” คือชุดของสตริงที่กำหนดไว้ล่วงหน้าซึ่งจับคู่กับชุดแป้นพิมพ์จริงเช่น: Ctrl+Shift+Z
หรือ Command
.
File
ตัวเร่งความเร็วไม่ทำงานบน Windows หรือ Linux สำหรับแอปพลิเคชันพวงกุญแจรหัสผ่านเราควรเพิ่ม... { label: 'File', submenu: [ { label: 'Create Password', accelerator: 'CmdOrCtrl+N', click: function() { ipc.send('toggle-insert-view'); } }, { type: 'separator' // to create a visual separator }, { label: 'Quit', accelerator: 'CmdOrCtrl+Q', selector: 'terminate:' // OS X only!!! } ] } ...
รายการเมนูเสนอสองคำสั่ง:
type
ประเด็นสำคัญ:
separator
ตั้งค่าคุณสมบัติเป็น CmdOrCtrl
.selector
ตัวเร่งความเร็วเข้ากันได้กับคีย์บอร์ดทั้ง Mac และ PCmdl-
คุณสมบัติรองรับ OSX เท่านั้น!คุณอาจสังเกตเห็นตัวอย่างโค้ดต่างๆที่อ้างอิงถึงชื่อคลาสที่ขึ้นต้นด้วย gulp electron
สำหรับจุดประสงค์ของบทช่วยสอนนี้ฉันเลือกใช้ไฟล์ Material Design Lite เฟรมเวิร์ก UI แต่อย่าลังเลที่จะใช้เฟรมเวิร์ก UI ที่คุณเลือก
อะไรก็ตามที่เราสามารถทำได้ด้วย HTML5 สามารถทำได้ใน Electron เพียงแค่คำนึงถึงขนาดที่เพิ่มขึ้นของไบนารีของแอปและปัญหาด้านประสิทธิภาพที่อาจเกิดขึ้นหากคุณใช้ไลบรารีของบุคคลที่สามมากเกินไป
คุณสร้างแอพ Electron มันดูดีมากคุณเขียนการทดสอบ e2e ด้วย ซีลีเนียมและ WebDriver และคุณพร้อมที่จะแจกจ่ายให้กับโลก!
แต่คุณยังคงต้องการปรับแต่งให้เป็นชื่อที่กำหนดเองนอกเหนือจาก 'อิเล็กตรอน' เริ่มต้นและอาจมีไอคอนแอปพลิเคชันที่กำหนดเองสำหรับทั้งแพลตฟอร์ม Mac และ PC
วันนี้มี อึก ปลั๊กอินสำหรับทุกสิ่งที่เราคิดได้ สิ่งที่ฉันต้องทำคือพิมพ์ $ npm install gulp-electron --save-dev
ใน Google และมีไฟล์ อึกอิเล็กตรอน เสียบเข้าไป!
ปลั๊กอินนี้เป็นธรรม ง่ายต่อการใช้ ตราบเท่าที่โครงสร้างโฟลเดอร์ที่มีรายละเอียดในตอนต้นของบทช่วยสอนนี้ยังคงอยู่ ถ้าไม่เช่นนั้นคุณอาจต้องย้ายของไปรอบ ๆ
ปลั๊กอินนี้สามารถติดตั้งได้เหมือนกับปลั๊กอิน Gulp อื่น ๆ :
var gulp = require('gulp'), electron = require('gulp-electron'), info = require('./src/package.json'); gulp.task('electron', function() { gulp.src('') .pipe(electron({ src: './src', packageJson: info, release: './dist', cache: './cache', version: 'v0.31.2', packaging: true, platforms: ['win32-ia32', 'darwin-x64'], platformResources: { darwin: { CFBundleDisplayName: info.name, CFBundleIdentifier: info.bundle, CFBundleName: info.name, CFBundleVersion: info.version }, win: { 'version-string': info.version, 'file-version': info.version, 'product-version': info.version } } })) .pipe(gulp.dest('')); });
จากนั้นเราสามารถกำหนดงาน Gulp ของเราได้ดังนี้:
src/
ประเด็นสำคัญ:
platforms
โฟลเดอร์ต้องไม่เหมือนกับโฟลเดอร์ที่ Gulpfile.js อยู่หรือโฟลเดอร์เดียวกับโฟลเดอร์แจกจ่ายcache
อาร์เรย์packageJson
โฟลเดอร์ซึ่งจะดาวน์โหลดไบนารีอิเล็กตรอนเพื่อให้สามารถรวมเข้ากับแอปของเราได้packaging
ทรัพย์สิน.platformResources
ทำให้เราสามารถสร้างไฟล์ zip ของแอพที่สร้างขึ้นหนึ่งใน icon
คุณสมบัติคือ 'icon': 'keychain.ico'
คุณสมบัติช่วยให้เรากำหนดไอคอนที่กำหนดเองสำหรับแอพของเรา:
.icns
OS X ต้องการไอคอนที่มี
.png
ไฟล์นามสกุล. มีเครื่องมือออนไลน์มากมายที่ให้เราแปลง.ico
ไฟล์ลงใน.icns
และ|_+_|ฟรี.
ในบทความนี้เรามีเพียงรอยขีดข่วนบนพื้นผิวของสิ่งที่อิเล็กตรอนสามารถทำได้ ลองนึกถึงแอปดีๆอย่าง Atom หรือ หย่อน เป็นแหล่งที่มาของแรงบันดาลใจที่คุณสามารถใช้เครื่องมือนี้ได้
ฉันหวังว่าคุณจะพบว่าบทช่วยสอนนี้มีประโยชน์โปรดอย่าลังเลที่จะแสดงความคิดเห็นและแบ่งปันประสบการณ์ของคุณกับ Electron!