Redmi Pad評測：紅米充滿野心的一次嘗試
從Note系列到K系列，從藍牙耳機到筆記本電腦，紅米不知不覺之間也已經形成了自己頗有競爭力的產品體系，在中端和次旗艦市場上甚至要比小米新機的表現來得更好，正所謂“大丈夫生居
hi, 大家好, 我是徐小夕.
之前有些用戶和朋友希望我基于H5-Dooring開發一款桌面端應用, 最近剛好有時間, 就花了小半天時間使用electron開發了桌面端的軟件Dooring-electron。
當然這篇文章不會介紹如何從零使用 electron , 而是會提供一種方案, 幫助大家快速的將線上網站轉化為 electron 應用。
文章最后我也會分享一款我朋友開發的在線工具, 可以不寫一行代碼, 輕松把線上網站轉化為桌面端軟件。
熟悉Electron的朋友也許知道, Electron繼承了來自 Chromium 的多進程架構，這使得Electron在架構上非常類似于一個現代的網頁瀏覽器。我們可以控制兩種類型的進程：主進程和渲染器。
每個 Electron 應用都有一個單一的主進程，作為應用程序入口。主進程在 Node 環境中運行，我們可以使用所有 Node 的能力。
那么主進程中我們可以做些什么呢? 主進程的主要目的是使用 BrowserWindow 模塊創建和管理應用程序窗口。
BrowserWindow 類的每個實例創建一個應用程序窗口，且在單獨的渲染器進程中加載一個網頁。我們可從主進程用 window 的 webContent 對象與網頁內容進行交互。
有了以上基礎, 我畫了一張dooring-electron 的簡單架構圖方便大家理解:
想對electron有更多直觀理解的, 也可以參考其官網:
https://www.electronjs.org/。
我們知道如果想要加載第三方網絡資源, 可以使用 mainWindow.loadURL(url) 來實現, 所以只需要將網址放到 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');同時如果想要控制網站打開新的頁面時的窗口尺寸, 我們只需要對窗口進行監聽, 來動態設置新窗口的尺寸即可:
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',//允許新窗口被創建 overrideBrowserWindowOptions: {//允許自定義創建的窗口參數 ...base, ...h5Win, } } } if (details.url.indexOf('/ide') > -1) { return { action: 'allow',//允許新窗口被創建 overrideBrowserWindowOptions: {//允許自定義創建的窗口參數 ...base, ...otherWin, } } } if (details.url.indexOf('/h5_plus') > -1) { return { action: 'allow',//允許新窗口被創建 overrideBrowserWindowOptions: {//允許自定義創建的窗口參數 ...base, width: 1500, height: 860 } } } return { action: 'allow',//允許新窗口被創建 overrideBrowserWindowOptions: {//允許自定義創建的窗口參數 ...base, ...otherWin, } } })對于網站打包的配置 electron 文檔上介紹的很詳細, 這里我就不一一介紹了, 大家可以在 github 上參考學習:
在線地址：https://webdesk.pigjs.com/builder。
我親自體驗了一下, 使用起來還是相當方便的, 不需要寫一行代碼就可以將網站轉化的桌面端軟件, 以下是一些功能優缺點介紹.
本文鏈接：http://www.www897cc.com/showinfo-26-51238-0.html基于Electron快速將任意網站打包成跨平臺的桌面端軟件
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 如何設計更優雅的 React 組件?
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號