6月安卓手機性價比榜：Note 12 Turbo斷層式碾壓
6月份有一個618，雖然這是京東周年慶的日子，但別的電商也都不約而同的跟進了，反正促銷沒壞處，廠商和用戶都能滿意。618期間一些產品也出現(xiàn)了歷史低價，那么各個價位段的產品性價比
hi, 大家好, 我是徐小夕.
之前有些用戶和朋友希望我基于H5-Dooring開發(fā)一款桌面端應用, 最近剛好有時間, 就花了小半天時間使用electron開發(fā)了桌面端的軟件Dooring-electron。
當然這篇文章不會介紹如何從零使用 electron , 而是會提供一種方案, 幫助大家快速的將線上網站轉化為 electron 應用。
文章最后我也會分享一款我朋友開發(fā)的在線工具, 可以不寫一行代碼, 輕松把線上網站轉化為桌面端軟件。
熟悉Electron的朋友也許知道, Electron繼承了來自 Chromium 的多進程架構，這使得Electron在架構上非常類似于一個現(xiàn)代的網頁瀏覽器。我們可以控制兩種類型的進程：主進程和渲染器。
每個 Electron 應用都有一個單一的主進程，作為應用程序入口。主進程在 Node 環(huán)境中運行，我們可以使用所有 Node 的能力。
那么主進程中我們可以做些什么呢? 主進程的主要目的是使用 BrowserWindow 模塊創(chuàng)建和管理應用程序窗口。
BrowserWindow 類的每個實例創(chuàng)建一個應用程序窗口，且在單獨的渲染器進程中加載一個網頁。我們可從主進程用 window 的 webContent 對象與網頁內容進行交互。
有了以上基礎, 我畫了一張dooring-electron 的簡單架構圖方便大家理解:
想對electron有更多直觀理解的, 也可以參考其官網:
https://www.electronjs.org/。
我們知道如果想要加載第三方網絡資源, 可以使用 mainWindow.loadURL(url) 來實現(xiàn), 所以只需要將網址放到 loadURL 方法中讓 electron 打開即可:
const mainWindow = new BrowserWindow({ maximizable: true, show: false, title: "H5-dooring網站制作平臺", fullscreen: false, center: true, webPreferences: { preload: path.join(__dirname, 'preload.js'), enableRemoteModule: true, nodeIntegration: true, }, }); mainWindow.maximize(); mainWindow.setAutoHideMenuBar(true); mainWindow.loadURL('your website address');同時如果想要控制網站打開新的頁面時的窗口尺寸, 我們只需要對窗口進行監(jiān)聽, 來動態(tài)設置新窗口的尺寸即可:
mainWindow.webContents.setWindowOpenHandler((details) => { const base = { fullscreen: false, skipTaskbar: true, center: true, maximizable: true, autoHideMenuBar: false,//自動隱藏菜單欄 // icon: iconPath,// 窗口圖標 parent: null ,//指定父窗口 resizable: true, webPreferences: {//網頁功能設置。 webSecurity: false,//禁用同源策略 nodeIntegration: true, nodeIntegrationInWorker: true, enableRemoteModule: true, contextIsolation: false }, } const h5Win = { width: 1200, minWidth: 1200, minHeight: 775, height: 775, y: 60, } const otherWin = { width: 1200, minWidth: 1200, minHeight: 800, height: 800, y: 60, } if (details.url.indexOf('/preview') > -1) { return { action: 'allow',//允許新窗口被創(chuàng)建 overrideBrowserWindowOptions: {//允許自定義創(chuàng)建的窗口參數(shù) ...base, ...h5Win, } } } if (details.url.indexOf('/ide') > -1) { return { action: 'allow',//允許新窗口被創(chuàng)建 overrideBrowserWindowOptions: {//允許自定義創(chuàng)建的窗口參數(shù) ...base, ...otherWin, } } } if (details.url.indexOf('/h5_plus') > -1) { return { action: 'allow',//允許新窗口被創(chuàng)建 overrideBrowserWindowOptions: {//允許自定義創(chuàng)建的窗口參數(shù) ...base, width: 1500, height: 860 } } } return { action: 'allow',//允許新窗口被創(chuàng)建 overrideBrowserWindowOptions: {//允許自定義創(chuàng)建的窗口參數(shù) ...base, ...otherWin, } } })對于網站打包的配置 electron 文檔上介紹的很詳細, 這里我就不一一介紹了, 大家可以在 github 上參考學習:
在線地址：https://webdesk.pigjs.com/builder。
我親自體驗了一下, 使用起來還是相當方便的, 不需要寫一行代碼就可以將網站轉化的桌面端軟件, 以下是一些功能優(yōu)缺點介紹.
本文鏈接：http://www.www897cc.com/showinfo-26-51238-0.html基于Electron快速將任意網站打包成跨平臺的桌面端軟件
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號