±à¼ÍƼö: |
±¾ÎÄÖ÷Òª°ïÖú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ÄÜÓõĶ«Î÷£¬ÎÒÃǶ¼ÄÜÓá£
|