手动搭建electron项目

最新推荐文章于 2024-07-09 15:11:40 发布

lamente

最新推荐文章于 2024-07-09 15:11:40 发布

阅读量251

点赞数

分类专栏： electron 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45327015/article/details/115011071

版权

electron 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

title: 手动搭建electron项目
author: lamente
tags: vue

入门式跨平台桌面应用开发

手动搭建Electron项目

渲染进程

首先文件夹里新建生成渲染进程 index.html,使用命令：
输入 html:5回车
在<body> </body>里写入想要的内容

主进程

其次新建主进程main.js文件，在此项目目录中打开cmd,输入命令

npm init --yes

由此生成package.json文件，注意此时json的入口要与主进程一致，因此最后生成json文件，正确入口如下：

"main": "main.js"

css

新建一个.css文件。例如 base.css,在css中可改写信息参数如颜色等，注意此时要在.html中引入link模块以关联到.css。如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css"><!----关联引用index.css文件-->
</head>
<body>
    <h2>This is a electron item</h2>
</body>
</html>

方便书写

在main.js里写命令时，为方便书写提示，可在下方的终端窗口再次安装electron，虽然全局已经安装过，命令如下：

cnpm i electron --save-dev

集成 Eslint:

为有代码报错提示在cmd中安装eslint,全局安装，只需要一次，代码是

cnpm install -g eslint

而后在项目中打开cmd输入：

eslint --init

选择默认第二项>To check syntax and find problems,回车选择commonjs,回车选择第三项None of these,回车默认选no,回车选node（也可broswer）,回车默认javascript,回车选择no(也可yes)
创建完毕

调用node.js

关于在渲染进程（.html）中直接使用node.js,主进程（.js）原本就可以调用
在实例化的window下添加如下命令

webPreferences: {
            nodeIntegration: true
        }//没有集成node的话，require这样的关键字就无法使用

添加

在渲染进程中添加按钮和文本框：

<button id="btn">获取随机题库</button>
    <textarea id="textarea" cols="40"  rows="20"></textarea>>
    <script src="./renderer/index.js"></script><!---renderer文件夹下的index.js文件（可替换）--->

与此同时在index.html中添加能实现按钮，文本框功能的代码。以点击按钮后文本框中显示json文件为例：


const fs =require("fs");
<!--Node.js 文件系统封装在 fs 模块是中，它提供了文件的读取、写入、更名、删除、遍历目录、链接等POSIX 文件系统操作-->

window.onload=()=>{
    var btnDom=document.querySelector("#btn");      <!---获取节点--->
    var textareaDom = document.querySelector("#textarea");

    btnDom.onclick=()=>{              <!---接听事件--->
        //alert("确定生成？")
        fs.readFile('package.json',(err,data)=>{  <!--接听正误-->
            if(err){      <!--判段是否读取错误-->
                console.log(err)
                return;
            }
            textareaDom.innerHTML=data
        })
    }
}

使用第三方模块 [^以MD5为例]

第三方模块库网址

cnpm install MD5 --save  //模块类   保存在Dependencies
cnpm install MD5 --save -dev  //工具类  保存在devDependencies

在main.js里使用模块，在main.js中添加 const md5=require(“md5”);在createwindow语句下添加console.log(md5(“123456”));注意在主进程中打印的要在当前终端查看
在index.js里使用，首先在渲染进程中

webPreferences: {
            nodeIntegration: true
        }

而后直接在渲染进程中添加 const md5=require(“md5”)，在window,onload中加上console.log(md5(“123456”))；渲染进程中的打印要在运行跳出的窗口中看，在网页源码中

lamente

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手动搭建electron项目

title: 手动搭建electron项目author: lamentetags: vue入门式跨平台桌面应用开发手动搭建Electron项目渲染进程首先文件夹里新建生成渲染进程 index.html,使用命令：输入 html:5回车在<body> </body>里写入想要的内容主进程其次新建主进程main.js文件，在此项目目录中打开cmd,输入命令npm init --yes由此生成package.json文件，注意此时json的入口要与主进程一致.
复制链接

扫一扫

专栏目录