用Electron创建跨平台应用(第一弹)-阿里云开发者社区

开发者社区> 开发与运维> 正文

用Electron创建跨平台应用(第一弹)

简介: 用Electron创建跨平台应用连载目录: 用Electron创建跨平台应用(第一弹) 用Electron创建跨平台应用(第二弹)开启多窗口 用Electron创建跨平台应用(第三弹)开启系统通知 Electron是GitHub开发的一个开源框架,它使用Node.js(作为后端)和Chromium(作为前端)完成桌面GUI应用程序的跨平台开发,目前,Electron已经创建了包括VScode和Atom在内的大量应用。

用Electron创建跨平台应用连载目录:

  • Electron是GitHub开发的一个开源框架,它使用Node.js(作为后端)和Chromium(作为前端)完成桌面GUI应用程序的跨平台开发,目前,Electron已经创建了包括VScode和Atom在内的大量应用。


  • 如果你有htmlcssjs, Nodejs的基础, 掌握Electron将是一件非常容易的事
  • 如果你是一个前端工程师, 掌握了Electron,你无需学习C,Java, 或Python, 就可以创建跨平台的桌面级应用

安装electron

npm install -g electron

用electron-forge创建一个项目

electron-forge是一个脚手架程序(和create-react-app类似), 它可以帮我们快速构建一个electron应用, 应用创建成功后, 我们直接编辑src/index.html即可快速上手electron桌面程序, 下面是创建的具体步骤和几个简单实用的小demo

全局安装electron-forge

npm install -g electron-forge

用electron-forge快速创建项目zhaoolee-electron-app

electron-forge init zhaoolee-electron-app

开启项目


cd zhaoolee-electron-app
npm start

Demo1: 更改index.html内容, 用html css进行布局

  • index.html源码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>工程师的五个级别</title>
</head>

<body>
    <style>
    .title {
        font-weight: bold;
        font-size: 36px;
    }

    ol li {
        list-style: none;
        color: #413F43;
        font-size: 26px;
        line-height: 40px;
        position: relative;
    }

    ol li:hover {
        background-color: #FCF6E5;
    }

    ol li:hover:after {
        font-size: 20px;
        border: 1px solid #AB3319;
        border-radius: 5px;
        content: attr(data);
        position: absolute;
        right: 0;
        opacity: 1;
        transition: all 0.2s ease-out;
    }



    </style>
    <div class="title">工程师的五个级别</div>
    <ol>
        <li data="爱迪生、福特、贝尔、香农、理查德.斯托曼">
            第一级:开创一个产业
        </li>
        <li data="迪恩,丹尼斯.里奇,肯·汤普逊">第二级: 能设计和实现别人不能做出的产品</li>
        <li data="张小龙,阮一峰">第三级: 能独立设计和实现产品并且能在市场上获得成功</li>
        <li data="项目主管">第四级: 能领导和带领其他人一同完成更有影响力的工作</li>
        <li data="两年开发经验的工程师">第五级: 能独立解决问题, 完成工程工作</li>
    </ol>
</body>

</html>

如果出现中文乱码, command+shift+R 刷新缓存即可解决

Demo2: 读取本地文件

浏览器中的js是无法读取本地文件的, 但electron有了node的的加持, 可以随意读取本地的文件, 这里以读取index.html同级目录下的main.js为例

  • index.html 源码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>读取本地文件</title>
</head>

<body>
    <button id="btn">展示index.js内容</button>
    <div id="package-json-area">
    </div>
</body>
<script>
const fs = require("fs");
const path = require("path");
let btn = document.getElementById("btn");
console.log(btn);
btn.addEventListener('click', function(e) {
    fs.readFile(path.join(__dirname, "index.js"), "utf-8", function(err, data) {
        if (err) {
            console.log(err);
        } else {
            console.log(data);
            document.getElementById("package-json-area").innerHTML = data;
        }
    })
})
</script>

</html>

Demo3: 拖拽读取本地文件

  • index.html 源码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>拖拽读取文件</title>
</head>
<style>
body {
    margin: 0;
    padding: 0;
}

#text-area {
    height: 300px;
    background-color: #FCF6E5;
    position: relative;
    font-size: 20px;
    overflow: auto;
    font-weight: bold;
}

#text-area #info {
    border-radius: 20px;
    height: 100px;
    font-size: 40px;
    color: #A84631;
    text-align: center;
    line-height: 100px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
</style>

<body>
    <div id="text-area">
        <div id="info">将文件拖拽到此处打开</div>
    </div>
</body>
<script>
/*释放目标时触发的事件:
        ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
        ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
        ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
        ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
    */
const fs = require("fs");
const path = require("path");

let textArea = document.getElementById("text-area")
textArea.ondragenter = textArea.ondragover = textArea.ondragleave = function(e) {
    e.preventDefault();
}

textArea.ondrop = function(e) {
    e.preventDefault();
    let filePath = e.dataTransfer.files[0].path;
    console.log(filePath);
    fs.readFile(filePath, "utf-8", function(err, data){
        textArea.innerHTML = data;
    })

}

</script>

</html>

小结:

  • 有了nodejs, 前端程序员, 获得了开发网站后台的能力!
  • 有了 React-Native, 前端程序员有了开发跨平台app的能力!
  • 有了Electron, 我们可以自由的读取本地的文件, 随意调用npm下的大量工具包, 当然也可以把在线h5小游戏快速移植为桌面游戏, 前端程序员,可以使用已掌握的前端技术, 分一块桌面软件的蛋糕, 真香!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章