electron中如何使用axios electron ocx

文章目录

• 一、引言

• 1、Electron是什么？
• 2、为什么学Electron
• 3、Electron的缺点
• 4、学Electron的时候需要学的技术

• 二、正文

• 1、安装Node.js环境。
• 2、Windows系统的先安装“创建cmd右键快捷访问方式”，能够右击快速打开路径的Cmd命令
• 3、运行官方的demo。
• 4、参考官方的文档，自己创建一个Electron项目。

一、引言

1、Electron是什么？

官网https://www.electronjs.org/，已经很简明说了Electron是什么了。
Electron是使用前端语言（JavaScript、HTML、CSS）开发跨平台（Windows、Mac、Linux系统）桌面软件框架，依赖Chromium内核和Node.js框架。

2、为什么学Electron

（1）能够跨平台开发，打包的时候在不同平台打包即可，其项目代码通用。
与传统的桌面软件开发对比，我们知道开发Windows软件需要使用 C语言/C++/C#等语言开发，开发Mac软件则用Objective-C语言开发，开发Linux软件用C语言开发，在不同的系统平台开发应用用的开发语言不同，开发工具不同，想要开发跨平台应用，用系统原生语言开发的成本太大了，而用Electron则会很简单。

（2）Electron使用前端语言开发，开发难度相对原生桌面开发（C语言/C++/C#/Objective-C/）相对较低，会前端语言就能开发，但是开发过程中，还是要学习node.js框架和Electron本身框架的东西，这些都不是很难，而且由于前端技术本身已经很成熟了，有很多别人造的轮子能够用的。

（3）开源性，相对成熟。Electron是用MIT协议的开源项目，其项目已经加入OpenJS基金会，这个基金会和Apache基金会一样，专门为js的开源项目服务的，其中有很多比较出名的js开源项目都已经加入OpenJS基金会了，如Node.js、jQuery、Webpack等。其中使用Electron开发的有比较出名的Atom、VsCode、Skype、Github Desktop、WordPress、Slack等软件，然后Github还有一大推用Electron开发的开源项目，所以现在看Electron已经是相对成熟了。

（下面是盗用网上的图片说明下几个流行开源协议的区别）

（4）和NW.js比较。NW.js和Electron一样，也是用前端语言开发桌面应用，都是依赖Chromium内核和Node.js，都是夸平台，就是Electron不支持Windows Xp,而NW.js支持。国内的微信web开发工具（用过微信web开发工具，打开的时候会感觉比较卡）、钉钉就是基于NW.js开发的。按大多网友的说法，Electron相对NW.js较稳定，NW.js比较多bug，多数人推荐使用Electron开发，由于使用Electron开发成熟的应用软件比较多，而Electron官网则有很好的中文文档支持（良心啊！），而NW.js没有（和大多数外国的开源项目，都木有中文文档…），所以最后选择了Electron。

（5）Github星星数多，趋势强。Electron项目在Github上面星星数已经接近85K了，这个星星数说明已经受到很多人的喜爱，很多人关注这个项目，也意味着有很多人帮着维护这个项目，项目会越来越成熟。

3、Electron的缺点

（1）由于依赖Chromium内核和Node.js框架，Electron开发出的应用软件体积很大（最少的在几十M以上，一般都是1百多M以上），而且比系统原生语言开发的应用性能低很多。
（2）与硬件交互的开发API不够完善，对于与硬件交互的应用最好还是系统原生的语言开发，Electron现在大部分只适合应用层级别的软件开发，如果要实现与硬件交互的应用，估计会比较困难，可能有很多坑。

4、学Electron的时候需要学的技术

（1）HTML、CSS、JavaScript基础
（2）ES6（ECMAScript 6）基础，可以先学比较重要的。因为Node.js需要，所以要学。介绍及一些教程：
https://es6.ruanyifeng.com/https://www.runoob.com/w3cnote/es6-tutorial.html（3）Node.js、NPM，Electron框架Api。
Node.js、NPM：https://www.runoob.com/nodejs/nodejs-tutorial.html Electron：https://www.electronjs.org/docs

二、正文

1、安装Node.js环境。

到官网https://nodejs.org/en/download/下载安装包

安装时，选中Add to PATH，因为这个安装完成会自动帮你加到系统变量就不用手动加了，然后后面默认就好。

安装完成后，用电脑的的cmd命令：npm -v 会显示npm的版本号，如果出现“npm不是内部或外部命令“，则说明环境变量没有设置对

2、Windows系统的先安装“创建cmd右键快捷访问方式”，能够右击快速打开路径的Cmd命令

下载连接,
如图下是安装后，右键菜单会加了”管理员身份快捷访问cmd“的项

3、运行官方的demo。

官网文档https://www.electronjs.org/docs/tutorial/first-app#trying-this-example

在拉到最后，会看到以下截图，下面截图的步骤就是

（1）第一步用Git克隆demo仓库。如果之前没有用安装过Git，需要到官网https://git-scm.com/downloads下载安装。

新建文件夹，在该目录右键运行cmd命令：
git clone https://github.com/electron/electron-quick-start 克隆成功，会在文件夹下生成了electron-quick-start的目录

如果Git克隆不了或者太慢，可以手动在这个网址下载demo ：https://github.com/electron/electron-quick-start

（2）第一步进入electron-quick-start目录，安装依赖
在cmd使用命令：
cd electron-quick-startnpm install 使用install命令就会安装项目的依赖包

---

注意：如果在安装依赖包中，下载很慢的，请用Ctrl + c键取消安装，再用cnpm代替npm命令，因为npm原始下载源在国外，实在太慢了，所以以后遇到需要下载的都可以用cnpm命令代替npm：
cnpm install如果还没有安装过cnpm的命令的话，请参考以下链接：

---

下面图，我的没有报错之类的，项目文件夹会生成node_modules的文件夹。如果是报错，Electron版本下载不了，请参考

（3）运行electron-quick-start
在cmd使用命令：
npm start 便会运行electron-quick-start

4、参考官方的文档，自己创建一个Electron项目。

继续参考官网文档：https://www.electronjs.org/docs/tutorial/first-app#installing-electron从开头看起

（1）首先创建项目的文件夹，然后用npm init命令创建项目配置，如下面会出现一些会让我们填写，这里全部按回车键跳过，用默认的则可，到最后填"yes"，然后在项目目录就会创建了一个package.json的配置文件。

（2）打开package.json，按照官方的文档，在scripts节点加上"start": "electron ."记得上一语句加上一个逗号,然后main值把index.js改为main.js。下面是我的配置

{
  "name": "myelectrondemo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

说明：

• name：项目名称
• version：项目版本
• description：项目描述
• main：程序的入口处
• scripts：项目运行脚本，比如start指定了运行npm start时，所要执行的命令
• author：作者
• license：项目使用的协议

（3）项目根目录创建main.js（package.json配置的入口文件）的文件，下面是参考官方文档的代码：

const { app, BrowserWindow } = require('electron')

function createWindow(){
    let win = new BrowserWindow({
        width:800,
        height:600,
        webPreferences:{
            nodeIntegration:true
        }

    })
    // 并且为你的应用加载index.html。
    win.loadFile("index.html");

    //打开开发者工具
    win.webContents.openDevTools();

}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow);

app.on("window-all-closed",() => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== "darwin") {
        app.quit();
    }

})

app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。

（4）项目根目录创建index.html的文件,下面是文件代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

这个Electron应用

</body>
</html>

（5）按照文档，安装Electron依赖到项目中。
使用命令：
npm install --save-dev electron

---

注意：如果在安装依赖包中，下载很慢的，请用Ctrl + c键取消安装，再用cnpm代替npm命令，因为npm原始下载源在国外，实在太慢了，所以以后遇到需要下载的都可以用cnpm命令代替npm：
cnpm install --save-dev electron如果还没有安装过cnpm的命令的话，请参考以下链接：

---

安装electron成功后，项目目录便会多个了node_modules文件夹和package-lock.json的文件。

（6）运行项目。
使用命令运行项目：
npm start 下图就是运行的截图，说明demo已经成功了，下面图有个很熟悉的界面，没错，这是Chrome浏览器开发者工具的界面，因为Electron是用Chromium内核，Electron应用会自带这个“开发者工具”这个界面是main.js中的代码win.webContents.openDevTools();控制的。

（7）总结下使用npm start命令大概的运行步骤。

使用`npm start`命令 
> package.json文件中scripts节点的start节点 
> 运行命令electron .  
> 执行package.json文件main节点main.js  
> 执行代码app.whenReady().then(createWindow) 
> new BrowserWindow的时候创建了窗口 
> 代码win.loadFile("index.html") 加载index.html网页

上面demo连接：

下面说下Electron打包软件的方法：