Angular+Electron+VSCode的桌面应用 转自:http://blog.csdn.net/yr7942793/article/details/50986696 第一部分 Electron开发入门笔记 GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.它是 io.js 运行时的衍生,专注于桌面应用而不是 web 服务端.Electron 丰富的原生 API 使我们能够在页面中直接…

我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范 electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint electron教程(二): http服务器, ws服务器, 子进程管理 electron教程…

electron会默认显示边框和标题栏,如下图 我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种 首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分,new BrowserWindow时添加参数frame: false即可 mainWindow = new BrowserWindow({ useContentSize: true, frame: false, }) 这样会把标题栏和边框一并隐藏 然后我们开始制作自己的标题栏创建Mytitle组件…

electron是由Github开发,是一个用Html.css.JavaScript来构建桌面应用程序的开源库,可以打包为Mac.Windows.Linux系统下的应用. 快速开始 接下来,让代码来发声,雷打不动的hello world 创建文件夹,并执行npm init -y,生成package.json文件,下载electron模块并添加开发依赖 mkdir electron_hello && cd electron_hello && npm init -y &…

之前一直使用C#编写桌面应用,也顺带写一些Web端应用.最近在看node时发现常用的vscode是用electron编写的,一种想吃螃蟹的念头就涌了上来. 在网上找了找electron的资料,也研究了一下官方文档,发现electron app其实就是一个chrome浏览器,UI全部都是使用web端技术编写的,因为之前一直使用Vue来写Web应用,所以自然就想到Vue+Electron的组合. 在网上找了找,居然有现成的轮子Electron-Vue,立即install使用,可是发现最后却不那么如人…

使用mobile angular ui 1.2开发,在默认情况下,桌面浏览器中sidebar-left是默认打开的,怎么才能在程序初始打开时关闭sidebar-left呢? 目前我找到的唯一可行办法就是在controller中执行下面的语句: app.controller('mycontroller',function($scope,$rootElement,$timeout,SharedState){ var lmv='uiSidebarLeft';    $timeout(function(…

这几天在构思项目,研究了一下Electron,记录下来. 说起WEB桌面程序,当前最火的就是Electron了. Electron的架构用一句话总结,就是一个main.js进程加上一个或数个chrome窗口,每个窗口都包含一个独立的Node.js. 这样的架构,使得这种桌面应用必须是一个(或数个)单页面应用(SPA),而这个SPA还拥有访问本地API的能力(Node.js). 一方面,程序对前端框架的依赖必然加强,想再JQuery打天下就不那么容易了:另一方面也大大加强了前端框架的能力与版图.…

最近一直在学习 Electron 开发桌面应用程序,在尝试了 java swing 和 FXjava 后,感叹还是 Electron 开发桌面应用上手最快.我会在这一篇文章中实现一个HelloWord的应用程序,记录学习过程中的坑. Electron是什么呢? Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用. 你可以把它看作一个 Node. js 的变体,它专注于桌面应用而不是 Web 服务器端. 这不意味着 Electron 是某个…

一.前言 项目本来打算采用B/S架构去做的,浏览器网址方式打开还是让用户不方便: 二.使用electron集成桌面应用 本身项目是使用vue-cli开发的,在使用electron之前,需要将本身的项目打包好后打开index.html能显示网页.因为刚接触便直接拿官方demo进行打包了. 1.克隆官方demo:git clone https://github.com/electron/electron-quick-start 2.cd electron-quick-start->npm insta…

最近在学习nodejs,得知Electron是通过将Chromium和Node.js合并到同一个运行时环境中,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一门技术.对于之前一直从事flash AIR桌面应用开发的我迫不及待的想“尝尝鲜”. 首先,我们跟着Electron社区的快速入门程序(https://electronjs.org/docs/tutorial/quick-start)创建我的第一个electron App(HelloWorld). 1.在命令行里安装全局e…

1.前提条件 a. 安装了node b.安装了electron c.你知道自己写的东西(js,css,html等等)放在那个文件夹(假设这个文件夹命名为 app,下面会用到)中 2.安装electron-packager a.在app文件夹中打开命令窗口(在空白处使用 shift + 鼠标右击 就可以看到) b.在命令栏中输出 npm install electron-packager -g 安装完毕后,确保在配置文件 package.json (通常放在 app/) 中的dependenice…

1.Angular 8 Snippets(全家桶) 2.TSLint(ts代码规范.错误提示) 3.Material Icon Theme(文件图标) 4.One Dark Pro(主题) 5.Angular Language Service(超好用的从模板(html)F12一键定位变量定义位置)…

1.安装node.npm node以及npm都需要是最新版本(版本过低有坑) 2.安装淘宝镜像cnpm(建议,下载较快) npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装electron cnpm install -g electron 4.安装打包输出工具 cnpm install -g electron-packager 5.安装electron 客户端工具(选择性,其实没必要) Electron.exe…

初始化项目 npm init 修改package.json {"name": "trans","version": "1.0.0","main": "main.js","license": "MIT","scripts": {"start": "electron .","buil…

GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.它是io.js 运行时的衍生,专注于桌面应用而不是 web 服务端. Electron 丰富的原生 API 使我们能够在页面中直接使用 JavaScript 获取原生的内容. 这个教程向我们展示了如何使用 Angular 和 Electron 构建一个桌面应用.下面是本教程的所有步骤: 创建一个简单的 Electron 应用 使用 Visual…

译]使用 AngularJS 和 Electron 构建桌面应用 原文: Creating Desktop Applications With AngularJS and GitHub Electron GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.它是 io.js 运行时的衍生,专注于桌面应用而不是 web 服务端. Electron 丰富的原生 API 使我们能够在页面中直接使用 Ja…

我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 子进程管理 electron教程(三): 使用ffi-napi引入C++的dll electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)   引言 本篇将介绍如何将你开发的electron项目(main.js), 打包成一个可执行桌面程序(.exe). 有…

我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范 electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint electron教程(二): http服务器, ws服务器, 子进程管理 electron教程…

最近无意间看到了electron和nw的相关信息,感到很惊讶,因为学习前端也有一段时间了,竟然发现js还有这么强大的功能,因为js不仅可以写网页.写webapp.写hybrid,以及前不久出现的小程序,现在甚至已经可以用来写桌面应用了,从github上的star数已经快到50000就可以知道electron是多么火了,所以这里简单了解一下,以后有机会还是可以使用起来. electron官网 github 必看文章 官网介绍如下:electron使用html.css.js构建跨平台的桌面应用.当前…

我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使用ffi-napi引入C++的dll   引言   这一篇将介绍如何在node.js+electron环境中, 使用node-ffi/ffi-napi调用C/C++编写的动态链接库(即dll), 实现调用C/C++代码. 本教程适用于electron 4.x-6.x版本. 如electron 4.2…

我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使用ffi-napi引入C++的dll   一. 安装 1.安装node.js 从node.js官网下载 推荐下载LTS版本(当前为10.16.3), 默认安装即可.   2.安装yarn 以管理员模式启动cmd, 执行指令: npm install yarn -g 根据官网介绍, Yarn 对你的代…

我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使用ffi-napi引入C++的dll   引言   这次, 我们一起通过几个例子, 进一步了解node.js+electron.   三个例子:   搭建一个http服务器, 通过web对服务器进行访问 搭建一个ws服务器, 通过web向服务器发送消息 进程管理, 打开/关闭一个外部进程   例子1…

Github 官方地址 代表作: Visual Studio Code Atom - Code editor. Github开源的代码编辑器,Electron起源地 Visual Studio Code - Cross-platform IDE. 近几年最火的代码IDE Hyper - Terminal. 3万多星的命令行窗口,慌了! 其他 本章主要内容 理解Electron是什么 学习Electron基于什么技术 了解使用Electron和传统Web应用程序有什么不同 构建Electron应用…

新用户购买<Electron + Vue 3 桌面应用开发>,加小册专属微信群,参与群抽奖,送<深入浅出Electron>.<Electron实战>作者签名版. 1等奖:<深入浅出Electron>+<Electron实战> 2等奖:<深入浅出Electron> 3等奖:<Electron实战> 抽奖活动是掘金组织的,仅限近几日加入微信群的新成员(目前人还不多),我负责抽奖.邮寄,11月20日开始抽奖.凡参与抽奖的读者都有…

在linux系统中安装VSCode(Visual Studio Code) 1.从官网下载压缩包(话说下载下来解压就直接可以运行了咧,都不需要make) 访问Visual Studio Code官网 https://code.visualstudio.com/docs?dv=linux64 我是64位的: wget https://az764295.vo.msecnd.net/stable/7ba55c5860b152d999dda59393ca3ebeb1b5c85f/code-stable-…

现在需要做一个桌面应用,心里有点不甘,因为想做出一个简单的客户端,你要么使用Java的Swing编程,要么会使用MFC等等,这样学习的代价太高,也不便维护,于是了解了一下Electron,Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序.与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器,这并不意味着Electron是一个绑定图形用户界面(GUI)的JavaScript库,取而代之的是,Elect…

Electron简介: Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序,并且跨平台(win,mac,linux等各种PC端平台).与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器. 有时候面对需求,开发出的web page既要能Online又要Offline(Offline是针对一些特殊网络环境或者page资源很大的情况下,企业或者其他机构要求的) web page offline的时候,甚至…

必要的上下文 想尽快熟悉上下文语境的,可以点这里: https://github.com/electron/electron/issues/749 这段讨论,其实本来是讨论如何自动设置 input 标签的值来实现自动选择文件的.前一段有个 Electon 中自动上传文件的需求,被 Google 带到了这个讨论地址.虽然,最后当时是采用的不同讨论中的本地代理器转发cookie的策略,但不得不承认,这些讨论还是给了自己很大启发的 -- 虽然暂时并没有什么用. It's near impossible…

最近使用vscode比较多. 学习了一下如何在mac上使用vscode开发asp.netcore项目. 这里是我写的关于vscode的一篇文章: https://www.cnblogs.com/cgzl/p/8450179.html http://www.cnblogs.com/cgzl/p/8450409.html 这篇文章写的是使用mac(linux)/win10开发一个基于asp.net core 2.0 web api, angular 5, bootstrap 4, sql serve…

最近在用electron开发PC桌面应用,其中有个需求就是整个应用以管理员权限启动.很头痛,各种google,baidu. 最后终于解决了,可以分为三个步骤,做个总结分享. 一.如果没有manifest.xml文件的话 可通过执行命令:mt.exe -inputresource:某某.exe -out:extracted.manifest导出 manifest.xml; 二.如果有的manifest.xml文件的话,按照标红处修改: <?xml version="1.0" enc…