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

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

• 用Electron创建跨平台应用(第一弹)
• 用Electron创建跨平台应用(第二弹)开启多窗口
• 用Electron创建跨平台应用(第三弹)开启系统通知

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

  
  
• 如果你有html， css，js, 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源码

    
    



    
    
工程师的五个级别
    

        

            第一级:开创一个产业
        
        
第二级: 能设计和实现别人不能做出的产品
        
第三级: 能独立设计和实现产品并且能在市场上获得成功
        
第四级: 能领导和带领其他人一同完成更有影响力的工作
        
第五级: 能独立解决问题, 完成工程工作
    

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

Demo2: 读取本地文件

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

• index.html 源码

    
    



    展示index.js内容
    

    

Demo3: 拖拽读取本地文件

• index.html 源码

    
    




    

        
将文件拖拽到此处打开
    

小结:

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

• 下一篇我们将尝试多窗口的实现: https://www.jianshu.com/p/438e852fa08f