nodegui 使用react开发跨平台应用试用
nodegui官方团队提供了基于react 应用开发方式,同时我们集成官方的packer 进行快速的应用打包
项目说明
项目使用了官方的计算机应用,我使用官方的react starter,同时添加了packer ,当前运行环境为mac,windows以及linux
暂时还没有尝试过
环境准备
- clone 代码
git clone https://github.com/nodegui/react-nodegui-starter.git
- 修改index.ts 内容
代码来自: https://github.com/nodegui/examples/blob/master/react-nodegui/calculator/index.tsx - 添加打包支持
npm i @nodegui/packer --save-dev
- 添加npm script
"package":"nodegui-packer --init cal-app && yarn build && nodegui-packer --pack ./dist",
构建&&效果
- 安装依赖
npm i
- 构建&&打包
npm run pacakge
- 效果

- 运行应用

- 内存占用

说明
使用nodegui 开发跨平台桌面应用是一个很不错的选择,如果我们对于内存以及cpu 占用要求比较高的话,可以尝试使用此框架
参考资料
https://github.com/rongfengliang/nodegui-react-cal-packer
https://github.com/nodegui/examples/tree/master/react-nodegui/calculator
https://github.com/nodegui/nodegui
https://github.com/nodegui/react-nodegui-starter
https://github.com/nodegui/packer
nodegui 使用react开发跨平台应用试用的更多相关文章
- 带你从零学ReactNative开发跨平台App开发[react native SqlLite 终极运用](十二)
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- 带你从零学ReactNative开发跨平台App开发-[react native 仿boss直聘](十三)
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- 基于Nodejs生态圈的TypeScript+React开发入门教程
基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...
- 用Inferno代替React开发高性能响应式WEB应用
什么是Inferno Inferno可以看做是React的另一个精简.高性能实现.它的使用方式跟React基本相同,无论是JSX语法.组件的建立.组件的生命周期,还是与Redux或Mobx的配合.路由 ...
- 基于Vue.js的uni-app前端框架结合.net core开发跨平台project
一.由来 最近由于业务需要要开发一套公益的APP项目,因此结合所给出的需求最终采用uni-app这种跨平台前端框架以及.netcore快速搭建我们的项目,并且能做到一套代码跨多个平台. 当然在前期技术 ...
- 带你从零学ReactNative开发跨平台App开发(一)
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- java,swift,oc互相转换,html5 web开发跨平台
java,swift,oc互相转换,html5 web开发跨平台 写一个java->swift的程序,这个程序是做跨平台系统的核心部分swift和oc到java也在考虑之列Swift->J ...
- 带你从零学ReactNative开发跨平台App开发(十一)
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- 带你从零学ReactNative开发跨平台App开发(九)
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
随机推荐
- @Autowired注解到底是byType还是byName?
2016-08-05 14:29:32 杨家昌 阅读数 13400更多 分类专栏: spring 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明 ...
- windows中Crontab的使用
一.jdk的安装 安装地址ttps://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 二 . ...
- Java自学-接口与继承 抽象类
Java 抽象类 在类中声明一个方法,这个方法没有实现体,是一个"空"方法 这样的方法就叫抽象方法,使用修饰符"abstract" 当一个类有抽象方法的时候,该 ...
- 7.JavaScript-Promise的并行和串行
Promise 并行 Promise.all是所有的Promise执行完毕后(reject|resolve)返回一个Promise对象. 最近在开发一个项目中,需要等接口拿到全部数据后刷新页面,取消l ...
- WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor
将eslint更新版本后,出现TypeError: this.CliEngine is not a constructor的错误. 解决办法: 1.编辑 X:\WebStorm\plugins\Jav ...
- CSS 精灵技术(sprite)
一.精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...
- Cheat Engine 基本用法
打开游戏 当前血量2620 打开Cheat Engine 扫描2620 掉点血 再次扫描2600 此时,会根据第一次扫描结果,再次扫描 扫描成功 将数据放到修改区,点击箭头 修改数据 双击Value进 ...
- java学习(2):类和对象
一.类 类可以看成是创建对象的模板,它描述一类对象的行为和状态.创建对象也叫类的实例化.类必须先定义才能使用. 通过下面一个简单的类来理解下Java中类的定义: public class Dog { ...
- MVC4 Model View Controller分离成独立项目
适合人群:了解MVC项目的程序员 开发工具:vs2012 开发语言:C# 小项目或功能比较单一的项目可以直接新建一个MVC基本项目类型即可,但随着需求不断迭代,项目的功能模块越来越多,甚至有些模块可以 ...
- nginx 日志整理 目录区分 日志配置
Nginx日志对于统计.系统服务排错很有用,但是原始的配置方案,日志很难定位问题.因此设想将nginx日志分类,包括access及error日志.并且按照不同域名及日志进行分类. 配置nginx日志目 ...