成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

electron原來(lái)這么簡(jiǎn)單----打包你的react、VUE桌面應(yīng)用程序

suemi / 2187人閱讀

摘要：話不多說(shuō)，進(jìn)入正題一安裝為了方便你以后的使用，建議全局安裝。怎么安裝就不廢話了，不會(huì)的去官網(wǎng)，安裝好之后也安裝一個(gè)專用的打包工具，以方便我們后面打包的時(shí)候使用。有些只能在該事件發(fā)生后才能被使用。

也許你不甘心只寫網(wǎng)頁(yè)，被人叫做“他會(huì)寫網(wǎng)頁(yè)”，也許你有項(xiàng)目需求，必須寫桌面應(yīng)用，然而你只會(huì)前端，沒(méi)關(guān)系。網(wǎng)上的教程很多，但是很少有能說(shuō)的淺顯易懂的，我盡力將electron打包應(yīng)用說(shuō)的清晰明了，希望能你在寫自己的應(yīng)用的時(shí)候，感到心中有數(shù)。話不多說(shuō)，進(jìn)入正題：

一、安裝electron

為了方便你以后的使用，建議全局安裝。以后在任何文件夾都能使用electron。怎么安裝就不廢話了，不會(huì)的去官網(wǎng)，安裝好electron之后也安裝一個(gè)專用的打包工具electron-packager，以方便我們后面打包的時(shí)候使用。

二、run build

你的react項(xiàng)目寫完后（其實(shí)寫到一半，四分之一你隨意，只要頁(yè)面上有點(diǎn)內(nèi)容了），執(zhí)行 npm run
build,會(huì)在build文件夾下面生成如下圖所示的結(jié)構(gòu)：

這時(shí)候，你試著點(diǎn)擊index.html看看（無(wú)需放到服務(wù)器靜態(tài)資源目錄），如果能看到內(nèi)容，就是ok的，如果一片白屏，控制臺(tái)沒(méi)錯(cuò)誤提示，那么你只要在package.json里面添加一個(gè)"homepage":"./",再次執(zhí)行build，就可以看到內(nèi)容了。

如果你index.html沒(méi)內(nèi)容，就不要往下繼續(xù)了，檢查你的項(xiàng)目是否存在路徑問(wèn)題。

三、創(chuàng)建入口文件和配置 
基于之前index.html已經(jīng)能正常展示的前提下，在你項(xiàng)目build文件夾中創(chuàng)建以下2個(gè)文件
main.js
const electron = require("electron");
// 控制應(yīng)用生命周期的模塊
const {app} = electron;
// 創(chuàng)建本地瀏覽器窗口的模塊
const {BrowserWindow} = electron;
 
// 指向窗口對(duì)象的一個(gè)全局引用，如果沒(méi)有這個(gè)引用，那么當(dāng)該javascript對(duì)象被垃圾回收的
// 時(shí)候該窗口將會(huì)自動(dòng)關(guān)閉
let win;
 
function createWindow() {
  // 創(chuàng)建一個(gè)新的瀏覽器窗口
  win = new BrowserWindow({width: 1920, height: 1080});
 
  // 并且裝載應(yīng)用的index.html頁(yè)面
  win.loadURL(`file://${__dirname}/index.html`);
 
  // 打開(kāi)開(kāi)發(fā)工具頁(yè)面
  //win.webContents.openDevTools();
 
  // 當(dāng)窗口關(guān)閉時(shí)調(diào)用的方法
  win.on("closed", () => {
    // 解除窗口對(duì)象的引用，通常而言如果應(yīng)用支持多個(gè)窗口的話，你會(huì)在一個(gè)數(shù)組里
    // 存放窗口對(duì)象，在窗口關(guān)閉的時(shí)候應(yīng)當(dāng)刪除相應(yīng)的元素。
    win = null;
  });
}
 
// 當(dāng)Electron完成初始化并且已經(jīng)創(chuàng)建了瀏覽器窗口，則該方法將會(huì)被調(diào)用。
// 有些API只能在該事件發(fā)生后才能被使用。
app.on("ready", createWindow);
/* var mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
}); */
// 當(dāng)所有的窗口被關(guān)閉后退出應(yīng)用
app.on("window-all-closed", () => {
  // 對(duì)于OS X系統(tǒng)，應(yīng)用和相應(yīng)的菜單欄會(huì)一直激活直到用戶通過(guò)Cmd + Q顯式退出
  if (process.platform !== "darwin") {
    app.quit();
  }
});
 
app.on("activate", () => {
  // 對(duì)于OS X系統(tǒng)，當(dāng)dock圖標(biāo)被點(diǎn)擊后會(huì)重新創(chuàng)建一個(gè)app窗口，并且不會(huì)有其他
  // 窗口打開(kāi)
  if (win === null) {
    createWindow();
  }
});
 
// 在這個(gè)文件后面你可以直接包含你應(yīng)用特定的由主進(jìn)程運(yùn)行的代碼。
// 也可以把這些代碼放在另一個(gè)文件中然后在這里導(dǎo)入。

這里貼的別人的代碼，你如果想修改，學(xué)習(xí)electron去吧，這里只是簡(jiǎn)單介紹。
package.json

{
    "name":"crh_chat",
    "version":"1.0-test",
    "main":"main.js",
    "author": {
        "name":"YOURNAME"
    },
    "license": "MIT"
}

做完這兩件事基本上就ok了。

四、打包

在build文件夾下打開(kāi)命令行

electron-packager . crh-chat --win --out=release --arch=x64 --version=1.0.0 --electron-version=1.8.4 --overwrite --icon=./favicon.ico

這是我的，具體參數(shù)你得根據(jù)自己的修改，使用如下

圖上的--out是生成文件夾的名字，里面有一堆的dll, 執(zhí)行完成，就可以在你的out文件夾中看到可執(zhí)行程序了 點(diǎn)擊一下，就成功的跑起來(lái)了

就這么結(jié)束了，react build的文件能在非服務(wù)器環(huán)境跑起來(lái)真是方便極了，

多說(shuō)一嘴，如果你的react項(xiàng)目index頁(yè)面死活出不來(lái)，可能是你使用了react-router的BroswerHistory，換成HashHistory就可以了。
VUE項(xiàng)目出不來(lái)的話，很大可能是使用了history路由模式，改成hash路由模式就可以了

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52082.html

相關(guān)文章

  • electron原來(lái)這么簡(jiǎn)單----打包你的react、VUE桌面應(yīng)用程序

    摘要：話不多說(shuō)，進(jìn)入正題一安裝為了方便你以后的使用，建議全局安裝。怎么安裝就不廢話了，不會(huì)的去官網(wǎng)，安裝好之后也安裝一個(gè)專用的打包工具，以方便我們后面打包的時(shí)候使用。有些只能在該事件發(fā)生后才能被使用。 也許你不甘心只寫網(wǎng)頁(yè)，被人叫做他會(huì)寫網(wǎng)頁(yè)，也許你有項(xiàng)目需求，必須寫桌面應(yīng)用，然而你只會(huì)前端，沒(méi)關(guān)系。網(wǎng)上的教程很多，但是很少有能說(shuō)的淺顯易懂的，我盡力將electron打包應(yīng)用說(shuō)的清晰明了，希...

    shevy 評(píng)論0 收藏0

  • 使用 electron-vue 構(gòu)建你的桌面應(yīng)用

    摘要：翻譯一下它是一個(gè)運(yùn)行時(shí)，可以像一樣這樣執(zhí)行也是一個(gè)使用構(gòu)建跨平臺(tái)原生桌面應(yīng)用的框架。具有兩個(gè)進(jìn)程，分別是主進(jìn)程，以及渲染進(jìn)程。 什么是 electron 官網(wǎng)里這么說(shuō)：Electron提供了一個(gè)Nodejs的運(yùn)行時(shí)，專注于構(gòu)建桌面應(yīng)用，同時(shí)使用web頁(yè)面來(lái)作為應(yīng)用的GUI，你可以將其看作是一個(gè)由JavaScript控制的迷你版的Chromium瀏覽器。 翻譯一下：它是一個(gè)運(yùn)行時(shí)，可以像...

    qieangel2013 評(píng)論0 收藏0

  • 如何使用前端技術(shù)開(kāi)發(fā)一個(gè)桌面跨端應(yīng)用

    摘要：使用實(shí)現(xiàn)桌面應(yīng)用實(shí)現(xiàn)離線可用很多方法，比如使用技術(shù)。還有一個(gè)好處，因?yàn)樗耆趤?lái)實(shí)現(xiàn)可以使用的一些新功能，那我們理論上可以在做桌面應(yīng)用時(shí)順手把應(yīng)用也做了。 本文將會(huì)講述一個(gè)完整的跨端桌面應(yīng)用?代碼畫板?的構(gòu)建，會(huì)涉及到整個(gè)軟件開(kāi)發(fā)流程，從開(kāi)始的設(shè)計(jì)、編碼、到最后產(chǎn)品成型、包裝等。 本文不僅僅是一篇技術(shù)方面的專業(yè)文章，更會(huì)有很多產(chǎn)品方面的設(shè)計(jì)思想和將技術(shù)轉(zhuǎn)換成生產(chǎn)力的思考，我將結(jié)合我自...

    shixinzhang 評(píng)論0 收藏0

  • 使用React、Electron、Dva、Webpack、Node.js、Websocket快速構(gòu)建

    摘要：是一個(gè)使用和等技術(shù)創(chuàng)建原生程序的框架，它負(fù)責(zé)比較難搞的部分，你只需把精力放在你的應(yīng)用的核心上即可。談?wù)劶夹g(shù)選型使用去做底層的繪制，大項(xiàng)目首選狀態(tài)管理的最佳實(shí)踐肯定不是，目前首選，或者。 showImg(https://segmentfault.com/img/bVbtqlI?w=1308&h=565); 目前Electron在github上面的star量已經(jīng)快要跟React-nativ...

    Caicloud 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<