ÐÂÎżò»¯Á÷³Ì£¬ÊµÏÖ¸ßЧת»»
ÔÚÍøÒ³¿ª·¢µÄ¹ý³ÌÖУ¬ÎÒÃǾ³£ÐèÒª½«HTMLÎļþת»»Îª¿ÉÖ´ÐÐÎļþ£¨EXE£©¡£È»¶ø£¬´«Í³µÄ·½·¨ÍùÍùÐèÒª·±ËöµÄ±à³ÌºÍ¸´ÔӵIJÙ×÷£¬¸ø¿ª·¢Õß´øÀ´Á˺ܴóµÄÀ§ÈÅ¡£±¾ÎĽ«ÏòÄú½éÉÜÒ»ÖÖ¼òµ¥¿ì½ÝµÄ·½·¨£¬°ïÖúÄú¿ìËÙ½«HTMLת»»ÎªEXE£¬Ê¡Ê±Ê¡Á¦¡£HTMLתexeµÄÆäËû֪ʶºÍÄÚÈÝÒ²¿ÉÒÔµ½ÍøÕ¾¾ßÌåÁ˽âһϣ¬ÎÒÃÇÊÇÁìÓòÄÚרҵµÄÆóҵƽ̨£¬»¶ÓÄúµÄ¹Ø×¢ºÍÁ˽⣡
1. ʹÓÃElectron¿ò¼Ü
ElectronÊÇÒ»¸ö»ùÓÚChromiumºÍNode.jsµÄ¿ªÔ´¿ò¼Ü£¬ËüÔÊÐí¿ª·¢ÕßʹÓÃǰ¶Ë¼¼Êõ£¨HTML¡¢CSS¡¢JavaScript£©¹¹½¨¿çƽ̨µÄ×ÀÃæÓ¦ÓóÌÐò¡£Í¨¹ýElectron£¬ÎÒÃÇ¿ÉÒÔ½«HTMLÎļþ´ò°ü³ÉÒ»¸ö¶ÀÁ¢µÄ¿ÉÖ´ÐÐÎļþ£¬¶øÎÞÐè±àд¸´ÔӵĴúÂë¡£
2. °²×°Electron²¢´´½¨ÏîÄ¿
Ê×ÏÈ£¬ÄúÐèÒªÔÚ¼ÆËã»úÉϰ²×°Node.js¡£È»ºó£¬Ê¹ÓÃÒÔÏÂÃüÁî°²×°Electron£º
npm install electron -g
°²×°Íê³Éºó£¬Äú¿ÉÒÔʹÓÃÒÔÏÂÃüÁî´´½¨Ò»¸öеÄElectronÏîÄ¿£º
electron init my-app
Õ⽫ÔÚµ±Ç°Ä¿Â¼Ï´´½¨Ò»¸öÃûΪ"my-app"µÄÏîÄ¿Îļþ¼Ð£¬²¢Éú³ÉËùÐèµÄÎļþ½á¹¹¡£
3. ±à¼main.jsÎļþ
½øÈë"my-app"Îļþ¼Ð£¬Äú»á¿´µ½Ò»¸öÃûΪ"main.js"µÄÎļþ¡£ÕâÊÇElectronÓ¦ÓóÌÐòµÄÖ÷ÒªÈë¿ÚÎļþ£¬ÎÒÃÇÐèÒªÔÚÆäÖÐÌí¼ÓһЩ´úÂëÀ´¼ÓÔØHTMLÎļþ¡£
ʹÓÃÎı¾±à¼Æ÷´ò¿ª"main.js"Îļþ£¬²¢Ìí¼ÓÒÔÏ´úÂ룺
const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
Õâ¶Î´úÂëµÄ×÷ÓÃÊÇ´´½¨Ò»¸öеĴ°¿Ú£¬²¢¼ÓÔØÃûΪ"index.html"µÄHTMLÎļþ¡£
4. ±à¼index.htmlÎļþ
ÔÚ"my-app"Îļþ¼ÐÖУ¬ÕÒµ½ÃûΪ"index.html"µÄÎļþ¡£ÕâÊÇÄúҪת»»ÎªEXEµÄHTMLÎļþ¡£Äú¿ÉÒÔʹÓÃÈκÎÎı¾±à¼Æ÷´ò¿ªËü£¬²¢°´Ðè½øÐб༺ÍÉè¼Æ¡£
5. ¹¹½¨¿ÉÖ´ÐÐÎļþ
±à¼Íê³Éºó£¬»Øµ½ÃüÁîÐнçÃæ£¬½øÈë"my-app"Îļþ¼Ð£¬²¢Ö´ÐÐÒÔÏÂÃüÁî¹¹½¨¿ÉÖ´ÐÐÎļþ£º
electron-builder build
Ö´ÐÐÍê±Ïºó£¬Äú½«ÔÚ"my-app"Îļþ¼ÐÖеÄ"dist"Îļþ¼ÐÖÐÕÒµ½Éú³ÉµÄEXEÎļþ¡£
×ܽá
ͨ¹ýʹÓÃElectron¿ò¼Ü£¬Äú¿ÉÒÔ¼ò»¯HTMLתEXEµÄ¹ý³Ì£¬±ÜÃ⸴Ôӵıà³ÌºÍ·±ËöµÄ²Ù×÷¡£Ö»Ð輸¸ö¼òµ¥µÄ²½Ö裬¼´¿É½«HTMLÎļþ¿ìËÙת»»Îª¿ÉÖ´ÐÐÎļþ£¬ÊµÏÖ¿çÆ½Ì¨µÄ×ÀÃæÓ¦ÓóÌÐò¿ª·¢¡£Ï£Íû±¾ÎĶÔÄúÓÐËù°ïÖú£¬×£Äú±à³ÌÓä¿ì£¡ ѧϰÁË£¬Ð»Ð»·ÖÏí¡¢¡¢¡¢ ²Å·¢ÏÖ²ýƽҲÓÐÍøÂçÆ½Ì¨£¬Í¦ºÃ Ö§³ÖÁË¡£ ѧϰÁË£¬Ð»Ð»·ÖÏí¡¢¡¢¡¢
Ò³:
[1]