Äú¿ÉÒÔ¾èÖú£¬Ö§³ÖÎÒÃǵĹ«ÒæÊÂÒµ¡£

1Ôª 10Ôª 50Ôª





ÈÏÖ¤Â룺  ÑéÖ¤Âë,¿´²»Çå³þ?Çëµã»÷Ë¢ÐÂÑéÖ¤Âë ±ØÌî



  ÇóÖª ÎÄÕ ÎÄ¿â Lib ÊÓÆµ iPerson ¿Î³Ì ÈÏÖ¤ ×Éѯ ¹¤¾ß ½²×ù Model Center   Code  
»áÔ±   
   
 
     
   
 ¶©ÔÄ
  ¾èÖú
electronÈëÃÅÐĵÃ
 
×÷ÕߣºÒ»Èëǰ¶ËÉîËÆº£
  2725  次浏览      33
  2020-3-30
 
±à¼­ÍƼö:
±¾ÎÄÖ÷Òª°ïÖújs»ù´¡±È½Ï±¡Èõ£¬ÓÖûÓнӴ¥¹ýelectronµÄͬѧ¸üºÃµÄѧϰelectron£¬Ï£Íû¶ÔÄúÄÜÓÐËù°ïÖú¡£
±¾ÎÄÀ´×ÔÓÚ²©¿ÍÔ°£¬,ÓÉ»ðÁú¹ûÈí¼þDelores±à¼­ÍƼö¡£

electron °²×°

npmÃüÁî°²×°electron¿â

npm install electron
--save-dev --save-exact

ÈçºÎ¿ìËÙÉÏÊÖelectron

¸Õ½Ó´¥Ò»¸öж«Î÷£¬ÄÑÃâһͷÎíË®£¬Èç¹û¶à¿´Ò»µãÏà¹ØµÄÎÄÕÂÊÆ±Ø»áÓÐÒ»¸ö·½Ïò¸Ð£¬È¥¸üºÃµÄÉÏÊÖж«Î÷¡£ÉÏÊÖelectron£¬¹Ù·½ÌṩÁËÒ»¸ö·Ç³£ºÃµÄ¿ìËÙÉÏÊÖʵÀý¡£

git clone https://github.com/
electron/electron-quick-start
cd electron-quick-start
npm install
npm start

Õâ¸ö²Ö¿â¸øÎÒÃdzõʼ»¯ÁËÒ»¸öelectronÏîÄ¿£¬½á¹¹·Ç³£´¿¾»£¬¿Ë¡ÏÂÀ´Äã¾Í¿ÉÒÔÖ±½Ó¸ÄÔì³É×Ô¼ºµÄÏîÄ¿¡£

electron API

¹úÄÚÒ²Óз­Òë°æµÄAPIÎĵµ£¬µ«ÊDz»Äܱ£Ö¤ÊÇ×îеģ¬Ê¹ÓÃʱһ¶¨Òª¿´ºÃ×Ô¼ºµÄ°æ±¾ºÍ·­Òë°æ¡£Ê¹Ó÷­Òë°æAPI¡£Í¬Ê±¿ÉÒÔ¿´¿´¹Ù·½µÄ¸üÐÂÈÕÖ¾£¬¿´¿´ÓÐʲôй¦ÄÜ¡£¹Ù·½ÉçÇøÓкܶàÓÐÓõŤ¾ß£¬¿ªÊ¼Ñ§Ï°Ç·Îñ±ØÁË½â£¬Éæ¼°µ½ÏîÄ¿¿ª·¢µ÷ÊÔºÍÏîÄ¿¹¹½¨¡£ÕâÀïÍÆ¼öÒ»¸ö²Ö¿â£¬Õâ¸ö²Ö¿âÊÕ¼ÁËһЩ±È½Ï³£ÓõÄAPI£¬¿Ë¡ºóÅÜÆðÀ´Äã¾Í¿ÉÒÔ¿ìËٲ鿴ÕâЩ³£ÓÃAPI

git clone https://github.com
/fuchao2012/zh-cn-Electron-API-Demos
cd zh-cn-Electron-API-Demos
npm install
npm start

electronÏîÄ¿ºÍwebÏîÄ¿µÄÇø±ð

electronºËÐÄÎÒÃÇ¿ÉÒÔ·Ö³É2¸ö²¿·Ö£¬Ö÷½ø³ÌºÍäÖȾ½ø³Ì¡£Ö÷½ø³ÌÁ¬½Ó×ŲÙ×÷ϵͳºÍäÖȾ½ø³Ì£¬¿ÉÒÔ°ÑËý¿´×öÒ³ÃæºÍ¼ÆËã»ú¹µÍ¨µÄÇÅÁº¡£äÖȾ½ø³Ì¾ÍÊÇÎÒÃÇËùÊìϤǰ¶Ë»·¾³ÁË¡£Ö»ÊÇÔØÌå¸Ä±äÁË£¬´Óä¯ÀÀÆ÷±ä³ÉÁËwindow¡£´«Í³µÄweb»·¾³ÎÒÃÇÊDz»ÄܶÔÓû§µÄϵͳ¾ÍÐвÙ×÷µÄ¡£¶øelectronÏ൱ÓÚnode»·¾³£¬ÎÒÃÇ¿ÉÒÔÔÚÏîÄ¿ÀïʹÓÃËùÓеÄnode api ¡£

¼òµ¥Àí½â£º

¸øwebÏîÄ¿Ì×ÉÏÒ»¸önode»·¾³µÄ¿Ç¡£

Ïà±ÈwebÏîÄ¿£¬×ÀÃæÏîÄ¿¶àÁËÒ»¸ö½ø³Ì

ÏîÄ¿Ç¨ÒÆ

Èç¹ûÒªÇ¨ÒÆÏîÄ¿µ½web¶Ë£¬¾ÍÐèÒª°ÑÏîÄ¿ÖеÄelectronÌṩµÄAPIºÍnodeµÄAPIÍêÈ«°þÀë³öÀ´£¬Ö»ÄÜÒÅÁôwebµÄ´úÂ룬±ÈÈç node fsÄ£¿é£¬electronÌṩipc Ä£¿é£¬¶¼ÐèÒª°þÀë¡£

Èç¹ûÄãÒ»¿ªÊ¼¾Í´òËãË«¶Ë³ÌÐò£¬ÔÚ¿ªÊ¼Ð´´úÂëʱӦ¸Ã¶Ôweb´úÂëºÍelecctronµÄ´úÂë½øÐзÖÀ룬ÒÔ±ãºóÆÚµÄÇ¨ÒÆ¡£

ÏîÄ¿¿ª·¢´ò°ü¹¤¾ß

ÕâÀïÍÆ¼ödevtron ºÍ electron-builder 2¸ö¿ª·¢¹¤¾ß£¬ÅäÖüòµ¥£¬¹¦ÄÜÇ¿´ó¡£ÕâÀï²»Ïêϸ½éÉܹ¤¾ßµÄʹÓ᣹ٷ½¶¼Óзdz£ºÃµÄÎĵµ¡£

ps£º electron´ò°üµÄʱºòÐèÒªÏÂÔØÒ»¸ö°æ±¾¿â£¬ËÙ¶È»á·Ç³£Âý£¬¿ÉÒÔͨ¹ýÌÔ±¦¾µÏñÔ´½â¾ö

>¾ÍÊÇÔÚÄãµÄÃüÁîǰ¼ÓELECTRON_MIRROR
=https://npm.taobao.org
/mirrors/electron/¼°¿Õ¸ñ
$ ELECTRON_MIRROR=https://npm.taobao.org
/mirrors/electron/ npm run build

Electron½éÉܲ¶à¾Íµ½ÕâÀ¿ò¼ÜÓÐÁË¡£È»¶øÒ»´ó¶ÑÅäÖÃÍ·¶¼ÔÎÁË£¬´Ó0-1·Ç³£À§ÄÑ£¬ÎÒÃDz»·Á´Ó1µ½0£¬¿ÉÒÔÏÈÕÒ¸öÄ£°æ×ö¸öСdemo¸ÐÊÜÒ»ÏÂelectronµÄ÷ÈÁ¦£¬ÔÚ×öÏîÄ¿ÖÐѧϰelectron¡£

electron-vue¾­Ñé·ÖÏí

¹Ù·½ÎĵµÖÐ×÷ÕßÌṩÁ˺ܶà¶Ô¿ª·¢ÓÐÓõĶ«Î÷£¬ÎÒÍÆ¼öѧϰµÄͬѧ¶¼Í¨¶ÁÒ»±é

electron-vue£¬×÷ÕßΪÎÒÃÇ·â×°ºÃÁËÒ»¸ö»ùÓÚvue¿ò¼ÜµÄ½ÅÊּܣ¬°üÀ¨electronËùÓлù±¾µÄ¿ª·¢¹¹½¨¹¤¾ß ºÍvueÅäÌ×µÄÇëÇó£¬Â·ÓÉÒÔ¼°vuexµÈ²å¼þ¡£

ͨ¹ý½ÅÊÖ¼ÜÎÒÃÇ¿ÉÒÔÖ±½Ó½øÈ뿪·¢½×¶Î£¬¿ª·¢µÄͬʱ£¬È¥Á˽âelectronµÄ¹¤×÷»úÖÆ£¬Ö®ºóÔÙ¿ªÊ¼ÉîÈëÈ¥Àí½âËý¸üÉî²ã´ÎµÄ´úÂëÂß¼­¡£ ÏÈ×ßÐΣ¬ÔÙ×ßÐÄ¡£

²»Ç¨ÒÆÏîÄ¿¾Í¿ÉÒÔ´ò°üË«°æ±¾µÄ¿ÉÐз½°¸

×÷Õß²¢Î´Ìṩweb¿ª·¢µÄÖ§³Ö£¬µ«ÊÇÌṩÁ˷dz£ºÃµÄweb´ò°üÖ§³Ö¡£

ֻҪдºÃÂß¼­ÎÒÃÇ¿ÉÒÔ²»ÓÃÇ¨ÒÆÏîÄ¿¾Í¿ÉÒÔ´ò°ü×ÀÃæÏîÄ¿ºÍwebÏîÄ¿¡£

process.env.IS_WEBÊDZ©Â¶µÄÒ»¸öÈ«¾Ö±äÁ¿£¬ÎÒÃÇ¿ÉÒÔÔÚäÖȾ½ø³ÌÖлñÈ¡£¬ÏîÄ¿ÔÚelectron»·¾³Ï£¬·µ»Øfalse¡£·ñÔòΪtrue¡£ÓÚ´Ë£¬ÎÒÃÇ¿ÉÒÔͨ¹ýÉèÖÃËýµÄÖµÀ´´ïµ½web devµÄЧ¹û£¬Ò²¿ÉÒÔ´¦Àí²»Í¬»·¾³µÄ²»Í¬Âß¼­£¬Ò»Ð©Ê¾Àý£º

´ò¿ªÐ´°¿ÚµÄ¡°×î¼Ñ¡±×ö·¨

ÒòΪÊÇwebpackÅäÖã¬Èë¿ÚÖ»ÓÐindex.html £¬ËùÒÔ´ò¿ªÐ´°¿Ú£¬Ò»°ã»áÔÙÅäÖÃÒ»¸öÈë¿Ú¡£Æäʵ»¹ÓÐÒ»ÖÖ¸ü¼ÑµÄ×ö·¨

>>> Ö÷½ø³Ì ¶¨ÒåºÃ¼àÌýʼþ
ipc.on('newPage', function(e) {
const modalPath = process.env.
NODE_ENV === 'development'
? 'http://localhost:9080/#/newPage'
: `file://${__dirname}/index.html#newPage`
let win = new BrowserWindow({
width: 1024,
height: 724,
webPreferences: {
webSecurity: false
}
})
win.on('close', function() {
win = null
})
win.loadURL(modalPath)
})
>>> router/index.js ¶¨Òå·ÓÉ
// import ÄãµÄÐÂÒ³Ãæ .vue Îļþ
{
path: '/newPage',
name: 'newPage',
component: newPage,
}
¡·¡·¡·ÅäÖÃÍê³É ÈÎÒâ½ø³Ìµ÷ÓÃ
ipc.send('newPage') ÍêÃÀ½â¾ö

Ò³ÃæÖ®¼äµÄÊý¾Ý¹²ÏíÎÊÌâ

electronÏîÄ¿¿ÉÒÔͨ¹ý±¾µØÊý¾Ý¿âÈ¥×öÒ»¸öÊý¾Ý´æ´¢£¬ÕâÑùÄã¾Í¿ÉÒÔÔÚÈκÎÐèÒªµÄµØ·½µ÷ÓÃÕâ·ÝÊý¾Ý¡£ÎÒµÄ×ö·¨£º

1.Ê×ÏÈÑ¡ÔñÒ»¸ö±¾µØÊý¾Ý¿â²å¼þ£¬ÎÒÓõÄnedb

>>> н¨db.js
import Datastore from 'nedb'
import path from 'path'
import { remote } from 'electron'
const db = {
tableData: new Datastore({filename: path.join
(remote.app.getPath('userData'), '/tableData.db')}),
chartData: new Datastore({filename: path.join
(remote.app.getPath('userData'), '/chartData.db')}),
cfgData: new Datastore({filename: path.join
(remote.app.getPath('userData'), '/cfgData.db')}),
}
export default {
db
}
>>>> ÒýÈëÊý¾Ý¿â
/**
* ±¾µØÊý¾Ý¿âµ¼Èë
* webģʽעÊ͸ôúÂë
*/
import db from '../db'
Vue.prototype.$db = db.db
>>>> ÈÎÒâÒ³Ãæµ÷ÓÃÊý¾Ý¿â
this.$db.chartData.loadDatabase();
this.$db.chartData.find({}, (err, docs)=> {
// console.log(docs);
if(docs && docs.length > 0){
this.totalOptionList = docs;
}
});

¸ù¾Ý×Ô¼ºµÄϰ¹ßÑ¡ÔñÊý¾Ý¿â£¬ÎÒ×Ô¼º¶ÔmongodbÊý¾Ý¿â±È½ÏÊìϤ£¬ËùÒÔ²ÉÓÃÁËnedb¡£Óï·¨ÌÇÀàËÆ£¬»ù±¾Ö±½ÓÄÃÀ´¾ÍÄÜÓ㬲»ÐèÒªÔÙ´Îѧϰ¡£

ºó¼Ç

×îºó˵һЩ¿ÉÒÔ°ïÖúÄã¸üºÃѧϰelectronµÄ»ù´¡ÖªÊ¶£º

webpack£º ×îÇ¿¹¹½¨¹¤¾ß£¬Ã»ÓÐÖ®Ò»£¬Á˽âwebpack£¬Äã²ÅÄܸüºÃ±àдÏîÄ¿ÅäÖá£

node£º electronÊÇ´îÔØ¹È¸èv8Äں˵ĸßÐÔÄܵÄnode»·¾³ £¬ËùÓÐnodeÄÜÓõĶ«Î÷£¬ÎÒÃǶ¼ÄÜÓá£

 
   
2725 ´Îä¯ÀÀ       33
Ïà¹ØÎÄÕÂ

Éî¶È½âÎö£ºÇåÀíÀôúÂë
ÈçºÎ±àд³öÓµ±§±ä»¯µÄ´úÂë
ÖØ¹¹-ʹ´úÂë¸ü¼ò½àÓÅÃÀ
ÍŶÓÏîÄ¿¿ª·¢"±àÂë¹æ·¶"ϵÁÐÎÄÕÂ
Ïà¹ØÎĵµ

ÖØ¹¹-¸ÄÉÆ¼ÈÓдúÂëµÄÉè¼Æ
Èí¼þÖØ¹¹v2
´úÂëÕû½àÖ®µÀ
¸ßÖÊÁ¿±à³Ì¹æ·¶
Ïà¹Ø¿Î³Ì

»ùÓÚHTML5¿Í»§¶Ë¡¢Web¶ËµÄÓ¦Óÿª·¢
HTML 5+CSS ¿ª·¢
ǶÈëʽC¸ßÖÊÁ¿±à³Ì
C++¸ß¼¶±à³Ì