electron-vue跨平台桌面应用开发实战教程(十)——执行cmd命令

本文主要讲解electron如何执行cmd命令

通常我们有些功能是需要借助外部程序才能完成的,例如通过我们写的electron启动nginx或者获取本机的一些信息。

执行cmd命令不需要安装额外的依赖,使用node的child_process模块即可完成这个功能。

1.引用child_process模块
import { exec } from 'child_process'
2.执行CMD命令

这里我们执行一下windows常用命令ipconfig,使用child_process执行cmd命令是可以指定执行的目录的(cmdPath)

 // 任何你期望执行的cmd命令,ls都可以
      const cmdStr = 'ipconfig'
      // 执行cmd命令的目录,如果使用cd xx && 上面的命令,这种将会无法正常退出子进程
      const cmdPath = pathUtil.getAppResourcePath('')

      // 执行命令行,如果命令不需要路径,或就是项目根目录,则不需要cwd参数:
      const workerProcess = exec(cmdStr, { cwd: cmdPath })
      // 不受child_process默认的缓冲区大小的使用方法,没参数也要写上{}:workerProcess = exec(cmdStr, {})

      // 打印正常的后台可执行程序输出
      workerProcess.stdout.on('data', function (data) {
        console.log('stdout: ' + data)
      })

      // 打印错误的后台可执行程序输出
      workerProcess.stderr.on('data', function (data) {
        console.log('stderr: ' + data)
      })

      // 退出之后的输出
      workerProcess.on('close', function (code) {
        console.log('out code:' + code)
      })

这个时候我们可以看到控制台输出的内容
在这里插入图片描述
我们可以看到输入的结果中,中文乱码,接下来我们来解决乱码,这里我们需要引入一个外部依赖iconv-lite

3.安装iconv-lite
npm install iconv-lite --save
4.使用iconv-lite解决乱码

引入 iconv-lite

const iconv = require('iconv-lite')

将原来的

const workerProcess = exec(cmdStr, { cwd: cmdPath })
console.log('stdout: ' + data)

分别改为

const workerProcess = exec(cmdStr, { cwd: cmdPath, encoding: 'GBK' })
console.log('stdout: ' + iconv.decode(data, 'GBK'))

这个时候我们再执行就正常了
在这里插入图片描述

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Electron是一个基于Chromium和Node.js的框架,可以帮助开发者使用Web技术(HTML,CSS,JavaScript)来构建跨平台桌面应用程序。VueCli是一个基于Vue.js的命令行工具,可以帮助开发者快速构建Vue.js项目。使用Electron7+VueCli4开发跨平台桌面应用的过程如下: 1. 安装Node.js和npm 在安装ElectronVueCli之前,需要先安装Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行环境,npm是Node.js的包管理器。安装Node.js和npm可以让你在本地开发环境中运行和管理ElectronVueCli。 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技术来构建跨平台桌面应用程序,为用户提供更好的体验。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值