nw.js应用（或者Electron应用）与本地化Hybird方式应用大小比较

最新推荐文章于 2021-12-21 09:40:27 发布
最新推荐文章于 2021-12-21 09:40:27 发布 699 收藏
分类专栏： 跨平台应用 跨平台开发 前端框架应用 文章标签： macos android ios swift web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ranjio_z/article/details/106534333
版权

nw.js或是Electron给我们的开发带来了很大的方便，但是随之而来的是：“你不知道你的电脑上装了多少个Chrome浏览器”。

是的，无数的应用使用Chrome内核的Electron或nw.js开发实现，而使用这些框架的直接问题就是：每个应用都有一份Chrome内核，小至100多兆，大至两三百兆。

 

那有没有办法既能使用高效的web框架来开发，又能使打包后的应用程序很小呢？

世上无难事。只要你广开思路，想想每个操作系统都带有系统自带的浏览器就能想到一个绝佳的办法：那就是业务部分使用web框架开发，而浏览器部分使用各个操作系统的自带的组件：iOS使用WKWebView，android使用WKWebView，macOS使用WKWebView，windows10使用Edge或是IE（笔者还未体验windows上的Hybird开发）。没错就是WKWebView，各个系统都会有，能力足够，为何还要使用nw.js或是Electron？

下面是使用WKWebView开发macOS应用和使用Electron开发macOS应用的软件程序大小比较（web框架部分代码都比较小，差异在于可执行程序部分）：

阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作
ranjio_z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
electronic-next：使用Next.js构建Electron应用程序
02-04
下一电子 该软件包可让您使用构建您的应用程序的渲染器！ 在生产中，它确保file://协议（Electron用于在渲染器过程中加载静态资产）与Next.js包（由next export生成）一起正常使用 在开发过程中，它会处理构建渲染器代码所需的全部流程 用法 首先，使用任何节点软件包管理器安装软件包： yarn add electron-next 然后加载它： const prepareRenderer = require ( 'electron-next' ) 作为最后一步，请调用程序包： <path> ：包含渲染器的目录的路径（相对于应用程序的根目录）。 如果开发和生产的路
Electron、NW.js、Tauri 三个跨端框架比较
最新发布
鹿哲君的博客
06-02 1105
Electron、NW.js、Tauri 是三个常用的桌面应用程序开发框架，它们在设计和功能上有所不同
Cross-Platform Desktop Application Development Electron, Node, NW.js, and React
01-06
“The goal of this book is to help the reader discover what exciting opportunities unlock Node.js-driven runtime (NW.js and Electron) to a JavaScript developer and how surprisingly easy it is to catch up on programming specifics in this area.”
evaluation:Neutralinojs vs Electron vs Nw.js
05-27
为什么Neutralinojs更适合轻量级应用程序？ - 证明 在评估框架时，将其与Electron和NW.js进行了比较，并考虑了磁盘消耗，内存消耗，开发工作流程的易用性和可移植性。 请注意，以下比较数据可能与Neutralinojs，NW.js和Electron的最新版本不匹配。 该基准测试于2018年完成。 样例应用 在Linux和Windows的每个框架中都使用简单的Hello World类型的应用程序进行评估。 图1：在Linux上分别使用Electron，NW.js和Neutralino编写的示例跨平台应用程序。 图2：分别在Windows上使用Electron，NW.js和Neutralino编写的示例跨平台应用程序。 操作系统详细信息 Ubuntu 18.04.1 LTS Windows 10企业版 1.磁盘消耗 节点Webkit Linux Zipped SD
使用Electron构建桌面应用
02-24
即使在移动端和云端大行其道而，桌面端日渐落末的现在，我的心中仍然为桌面应用留有一个特殊的位置。和Web应用比起来桌面应用的优点还是很多的：只要把它们放在开始菜单栏或者dock上，你就能随时打开它们；还可以通过alt-tab或者cmd-tab切换应用；和操作系统之间的交互更良好（快捷键，通知栏等）。使用JavaScript开发桌面应用意味着在打包（packageapplication）的时候你会需要根据操作系统的不同发出不同的命令。这一行为是将原生桌面应用兼容不同平台的概念抽象出来，方便维护应用。现在，我们可以借助Electron或者NW.js开发一个桌面应用。其实这两者提供的或多或少差不多的特
NW.js和Electron优缺点综合对比
LIangell的博客
12-21 4747
NW.js和Electron优缺点综合对比两个框架对于开发者来说差别并不是特别大，最主要的差别无过于 Electron 区分主进程和渲染进程： 两个框架对于开发者来说差别并不是特别大，最主要的差别无过于 Electron 区分主进程和渲染进程： Electron 主进程负责创建、管理渲染进程以及控制整个应用的生命周期，渲染进程负责显示界面及控制与用户的交互逻辑。在 Electron 中，主进程和渲染进程间通信需要经由 ipcMain 和 ipcRenderer 传递消息来实现。 NW.js 则无须关注这些问
electron程序大小_我从构建我的第一个Electron JS应用程序中学到了什么
weixin_26750481的博客
09-08 784
electron程序大小 是什么赋予了？ (What Gives?) I’ve always felt a little intimidated when it comes to fully learning JavaScript, mostly because there are so many different frameworks and libraries already establi...
利用nw.js将html项目打包成桌面应用
专注
05-21 1161
优点 不需要学习桌面应用开发的语言，只需要掌握web端开发的技术即可 缺点 nw相关的插件体积过大，导致生成的桌面应用体积过大（可运行的demo体积到达290m左右） 开发的程序（和web端开发一样） 下载nw的sdk（作用是将html项目当做桌面应用运行） 下载nsi脚本执行工具（该工具最终将项目打包成桌面应用） 编辑打包配置，模板配置文件下载（稍后讲述打包过程需要自主添加配置） 将项目和nw打包成一个可执行文件 利用nsi脚本工具执行配置文件即可完成打包，点击安装打包完成的exe文件即可完成安装 步
【electron】electron入门 教你如何创建第一个electron应用 并进行打包【超详细】
小辣抓
10-05 2万+
前言electron 是一个可以让我们使用js创建桌面应用程序的框架，并且可以很简单的实现跨平台，让我们可以更轻松的书写业务逻辑，而不用担心跨平台的问题。事实上，electron可以被看做一个精简版的Chrome，内部的V8解释器固然很强大，但是对比起传统的桌面应用程序，也有略显不足的地方。但是这样的框架只有electron一个吗？当然不是，与之相对应的，还有一款出名的框架NW.js，至于二者的差别
NW.JS 跨平台桌面客户端新手快速入门实战
07-06
如果你想找的就是一个可以跨平台的、轻量级的图形界面开发的库，轻松快捷地开发新一代桌面客户端软件程序。那么，大喵给大家推荐NW.JS， 它就像一座灯塔，冥冥之中照亮了桌面UI图形开发前进的方向。我们来看下它的基本特点：1. 支持用HTML5, CSS3, JS和WebGL来写应用程序，包括桌面端和移动端；2. 完全支持Node.js APIs和所有的第三方模块；3. 性能也不会很差，对于轻量级的应用足够了；4. 对应用进行打包和发布十分简单，也就是说写一份代码很容易移植到不同的平台（包括主流的Linux, Mac OS X 和 Windows）；课程基本介绍：本课程属于 NW.JS新手入门跨平台项目实战课程，适合各个阶段的开发人员，大喵将会教会大家学习NW技术且掌握如何使用前端技术（HTML5，CSS3，Javascript）轻松愉快地快速开发新一代跨平台桌面客户端应用。
javascript+electron+前端桌面应用程序+菜鸟入门.zip
11-04
适合新手开发 JavaScript + css + electron 的简单前端桌面应用程序，有需要的小伙伴可以下载，文档在主页中的“electron的基本使用” 中，可结合看 ，自己一笔一笔看视频敲的，其中有很多注释帮助理解。
NW.js(node-webkit)桌面应用（app）开发之环境配置
Lockey23的博客
07-25 8578
nw.js(node-webkit)是什么 nwjs开发桌面应用 nwjs package.json配置
NW.js 和 Electron 优缺点分析对比
热门推荐
small_tu的专栏
01-23 3万+
文章转自：http://www.codebye.com/nodejs-nw-js-vs-electron.html 拷贝下来，便于资料统一管理 从开发角度来说，选择用 nw.js 还是 election ，区别其实不是很大。大部分工作还是在自己的 javascript 和 HTML 上。 国内比较有名的，比如微信web开发工具、钉钉都是基于 nw.js 开发的 electron 相对来说比 ...
NW.js 简介与使用
weixin_33725722的博客
01-31 679
简介 （1）以网络最流行的技术编写原生应用程序的新方法 （2）基于HTML5, CSS3, JS and WebGL而编写 （3）完全支持nodejs所有api及第三方模块 （4）可以使用DOM直接调用nodejs模块 （5）容易打包和分发 （6）支持运行环境包括32位和64位的Window、Linux和Mac OS 使用方法如下： 一、下载nw 1...
屌炸天的内核来袭，史上最小chromium内核miniblink！
zzstack的专栏
03-20 1万+
转载自：https://zhuanlan.zhihu.com/p/22611497?utm_source=tuicool&utm_medium=referral 一直忘记发一个miniblink的介绍了。 miniblink是什么？ Miniblink是一个全新的、追求极致小巧的浏览器内核项目， 其基于chromium最新版内核，去除了chromium所有多余的部件，只保留最基本
Electron理论知识 14 - Electron和NW.js的对比分析
liuzhen007的专栏
06-15 4344
类似的技术方案 快速开发并部署客户端的现有技术方案中，NW.js可以说和Electron是最相似的了，它们都允许使用Html、Javascript、Node.js技术完成客户端的开发工作。 总体来说作为intel的技术方案，NW.js也有不俗的表现，它起步早，最开始的时候有很大的市场占有量。只是目前已经被后起之秀Electron超越了。类似的技术技术方案，Electron为什么能够后发制人呢？一定有对应的原因。结合官网的信息，我们来分析一下二者的区别和优劣。 不同的表现 1. 应用程序入口 NW.
Electron与NW.js开发桌面运用，跨平台
HSJ0170的博客
09-04 970
Electron与NW.js
【浏览器&exe桌面应用】用nw.js &Electron -HTML和JavaScript制作exe桌面程序-打造浏览器,查询机客户端，大屏展示客户端
程序员石磊
06-07 1040
接着前几篇的讲，尝试了不同方案来制作浏览器，今天又网友提出了新的方案，那么我就来简单记录了解下，多几个方案，多几个出路，遇到问题不用慌。 nw.js 官网 https://nwjs.io/ 简单介绍 NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScr...
基于 Electron + ES6 实现的桌面计算器应用
全栈空间
04-23 1030
清理GitHub老旧仓库时发现了一个有趣的app：用electron写的计算器。虽然现在已经无法运行了（因为package.json中依赖的版本都写的是“latest”），但还是发出来纪念...
java开发桌面应用_Electron7+VueCli4开发跨平台桌面应用
05-26
Electron是一个基于Chromium和Node.js的框架，可以帮助开发者使用Web技术（HTML，CSS，JavaScript）来构建跨平台桌面应用程序。VueCli是一个基于Vue.js的命令行工具，可以帮助开发者快速构建Vue.js项目。使用Electron7+VueCli4开发跨平台桌面应用的过程如下： 1. 安装Node.js和npm 在安装Electron和VueCli之前，需要先安装Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，npm是Node.js的包管理器。安装Node.js和npm可以让你在本地开发环境中运行和管理Electron和VueCli。 2. 安装Electron 在安装Electron之前，需要先创建一个空目录作为项目根目录，然后在命令行中切换到该目录下，执行以下命令： ``` npm init -y npm install electron --save-dev ``` 以上命令会创建一个package.json文件，并将Electron安装到本地项目中。 3. 创建Electron应用 在项目根目录下创建一个名为main.js的文件，这是Electron应用的主进程文件。在main.js中添加以下代码： ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载index.html文件 win.loadFile('index.html') } app.whenReady().then(() => { createWindow() }) ``` 以上代码创建了一个Electron窗口，并加载了一个名为index.html的文件。在项目根目录下创建一个名为index.html的文件，并添加以下代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 以上代码创建了一个包含“Hello World!”文本的HTML页面。 4. 安装VueCli 在命令行中执行以下命令安装VueCli： ``` npm install -g @vue/cli ``` 以上命令会全局安装VueCli。 5. 创建Vue.js应用 在项目根目录下执行以下命令创建一个Vue.js应用： ``` vue create renderer ``` 以上命令会创建一个名为renderer的子目录，并在其中初始化一个Vue.js项目。 6. 集成Vue.js应用 在main.js中添加以下代码将Vue.js应用集成到Electron应用中： ```javascript const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, preload: path.join(__dirname, 'preload.js') // 加载preload.js文件 } }) // 加载renderer/index.html文件 win.loadFile(path.join(__dirname, 'renderer', 'dist', 'index.html')) } app.whenReady().then(() => { createWindow() }) ``` 以上代码添加了一个preload.js文件，并将Vue.js应用的入口文件设置为renderer/dist/index.html。 7. 编译Vue.js应用 在renderer目录下执行以下命令编译Vue.js应用： ``` npm run build ``` 以上命令会生成一个名为dist的子目录，并在其中包含一个编译后的Vue.js应用。 8. 运行应用 在命令行中执行以下命令启动Electron应用： ``` npm start ``` 以上命令会启动Electron应用，并在Electron窗口中显示“Hello World!”文本和一个Vue.js应用。通过Electron7+VueCli4开发跨平台桌面应用，你可以使用Web技术来构建跨平台桌面应用程序，为用户提供更好的体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ranjio_z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值