整项目地址：vue-element-admin

https://github.com/PanJiaChen/vue-element-admin

前言

拖更有点严重，过了半个月才写了第二篇教程。无奈自己是一个业务猿，每天被我司的产品虐的死去活来，之前又病了一下休息了几天，大家见谅。

进入正题，做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是：不同的权限对应着不同的路由，同时侧边栏也需根据不同的权限，异步生成。这里先简单说一下，我实现登录和权限验证的思路。

• 登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。
• 权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。

上述所有的数据和操作都是通过vuex全局管理控制的。(补充说明：刷新页面后 vuex的内容也会丢失，所以需要重复上述的那些操作)接下来，我们一起手摸手一步一步实现这个系统。

登录篇

首先我们不管什么权限，来实现最基础的登录功能。

随便找一个空白页面撸上两个input的框，一个是登录账号，一个是登录密码。再放置一个登录按钮。我们将登录按钮上绑上click事件，点击登录之后向服务端提交账号和密码进行验证。 这就是一个最简单的登录页面。如果你觉得还要写的更加完美点，你可以在向服务端提交之前对账号和密码做一次简单的校验。详细代码

click事件触发登录操作:

this.$store.dispatch('LoginByUsername', this.loginForm).then(()=> {
  this.$router.push({ path: '/' }); //登录成功之后重定向到首页
}).catch(err=> {
  this.$message.error(err); //登录失败提示错误
});

复制代码

action:

LoginByUsername({ commit }, userInfo) {
  const username=userInfo.username.trim()
  return new Promise((resolve, reject)=> {
    loginByUsername(username, userInfo.password).then(response=> {
      const data=response.data
      Cookies.set('Token', response.data.token) //登录成功后将token存储在cookie之中
      commit('SET_TOKEN', data.token)
      resolve()
    }).catch(error=> {
      reject(error)
    });
  });
}
复制代码

登录成功后，服务端会返回一个 token（该token的是一个能唯一标示用户身份的一个key），之后我们将token存储在本地cookie之中，这样下次打开页面或者刷新页面的时候能记住用户的登录状态，不用再去登录页面重新登录了。

ps:为了保证安全性，我司现在后台所有token有效期(Expires/Max-Age)都是Session，就是当浏览器关闭了就丢失了。重新打开浏览器都需要重新登录验证，后端也会在每周固定一个时间点重新刷新token，让后台用户全部重新登录一次，确保后台用户不会因为电脑遗失或者其它原因被人随意使用账号。

获取用户信息

用户登录成功之后，我们会在全局钩子router.beforeEach中拦截路由，判断是否已获得token，在获得token之后我们就要去获取用户的基本信息了

//router.beforeEach
if (store.getters.roles.length===0) { // 判断当前用户是否已拉取完user_info信息
  store.dispatch('GetInfo').then(res=> { // 拉取user_info
    const roles=res.data.role;
    next();//resolve 钩子
  })

复制代码

就如前面所说的，我只在本地存储了一个用户的token，并没有存储别的用户信息（如用户权限，用户名，用户头像等）。有些人会问为什么不把一些其它的用户信息也存一下？主要出于如下的考虑：

假设我把用户权限和用户名也存在了本地，但我这时候用另一台电脑登录修改了自己的用户名，之后再用这台存有之前用户信息的电脑登录，它默认会去读取本地 cookie 中的名字，并不会去拉去新的用户信息。

所以现在的策略是：页面会先从 cookie 中查看是否存有 token，没有，就走一遍上一部分的流程重新登录，如果有token,就会把这个 token 返给后端去拉取user_info，保证用户信息是最新的。 当然如果是做了单点登录得功能的话，用户信息存储在本地也是可以的。当你一台电脑登录时，另一台会被提下线，所以总会重新登录获取最新的内容。

而且从代码层面我建议还是把 login和get_user_info两件事分开比较好，在这个后端全面微服务的年代，后端同学也想写优雅的代码~

权限篇

先说一说我权限控制的主体思路，前端会有一份路由表，它表示了每一个路由可访问的权限。当用户登录之后，通过 token 获取用户的 role ，动态根据用户的 role 算出其对应有权限的路由，再通过router.addRoutes动态挂载路由。但这些控制都只是页面级的，说白了前端再怎么做权限控制都不是绝对安全的，后端的权限验证是逃不掉的。

我司现在就是前端来控制页面级的权限，不同权限的用户显示不同的侧边栏和限制其所能进入的页面(也做了少许按钮级别的权限控制)，后端则会验证每一个涉及请求的操作，验证其是否有该操作的权限，每一个后台的请求不管是 get 还是 post 都会让前端在请求 header里面携带用户的 token，后端会根据该 token 来验证用户是否有权限执行该操作。若没有权限则抛出一个对应的状态码，前端检测到该状态码，做出相对应的操作。

权限 前端or后端 来控制？

有很多人表示他们公司的路由表是于后端根据用户的权限动态生成的，我司不采取这种方式的原因如下：

• 项目不断的迭代你会异常痛苦，前端新开发一个页面还要让后端配一下路由和权限，让我们想了曾经前后端不分离，被后端支配的那段恐怖时间了。
• 其次，就拿我司的业务来说，虽然后端的确也是有权限验证的，但它的验证其实是针对业务来划分的，比如超级编辑可以发布文章，而实习编辑只能编辑文章不能发布，但对于前端来说不管是超级编辑还是实习编辑都是有权限进入文章编辑页面的。所以前端和后端权限的划分是不太一致。
• 还有一点是就vue2.2.0之前异步挂载路由是很麻烦的一件事！不过好在官方也出了新的api，虽然本意是来解决ssr的痛点的。。。

addRoutes

在之前通过后端动态返回前端路由一直很难做的，因为vue-router必须是要vue在实例化之前就挂载上去的，不太方便动态改变。不过好在vue2.2.0以后新增了router.addRoutes

Dynamically add more routes to the router. The argument must be an Array using the same route config format with the routes constructor option.

有了这个我们就可相对方便的做权限控制了。(楼主之前在权限控制也走了不少歪路，可以在项目的commit记录中看到，重构了很多次，最早没用addRoute整个权限控制代码里都是各种if/else的逻辑判断，代码相当的耦合和复杂)

具体实现

1. 创建vue实例的时候将vue-router挂载，但这个时候vue-router挂载一些登录或者不用权限的公用的页面。
2. 当用户登录后，获取用role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。
3. 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
4. 使用vuex管理路由表，根据vuex中可访问的路由渲染侧边栏组件。

router.js

首先我们实现router.js路由表，这里就拿前端控制路由来举例(后端存储的也差不多，稍微改造一下就好了)

// router.js
import Vue from 'vue';
import Router from 'vue-router';

import Login from '../views/login/';
const dashboard=resolve=> require(['../views/dashboard/index'], resolve);
//使用了vue-routerd的[Lazy Loading Routes
](https://router.vuejs.org/en/advanced/lazy-loading.html)

//所有权限通用路由表 
//如首页和登录页和一些不用权限的公用页面
export const constantRouterMap=[
  { path: '/login', component: Login },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: '首页',
    children: [{ path: 'dashboard', component: dashboard }]
  },
]

//实例化vue的时候只挂载constantRouter
export default new Router({
  routes: constantRouterMap
});

//异步挂载的路由
//动态需要根据权限加载的路由表 
export const asyncRouterMap=[
  {
    path: '/permission',
    component: Layout,
    name: '权限测试',
    meta: { role: ['admin','super_editor'] }, //页面需要的权限
    children: [
    { 
      path: 'index',
      component: Permission,
      name: '权限测试页',
      meta: { role: ['admin','super_editor'] }  //页面需要的权限
    }]
  },
  { path: '*', redirect: '/404', hidden: true }
];

复制代码

这里我们根据 vue-router官方推荐 的方法通过meta标签来标示改页面能访问的权限有哪些。如meta: { role: ['admin','super_editor'] }表示该页面只有admin和超级编辑才能有资格进入。

注意事项：这里有一个需要非常注意的地方就是 404 页面一定要最后加载，如果放在constantRouterMap一同声明了404，后面的所以页面都会被拦截到404，详细的问题见addRoutes when you've got a wildcard route for 404s does not work

main.js

关键的main.js

// main.js
router.beforeEach((to, from, next)=> {
  if (store.getters.token) { // 判断是否有token
    if (to.path==='/login') {
      next({ path: '/' });
    } else {
      if (store.getters.roles.length===0) { // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(res=> { // 拉取info
          const roles=res.data.role;
          store.dispatch('GenerateRoutes', { roles }).then(()=> { // 生成可访问的路由表
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch(err=> {
          console.log(err);
        });
      } else {
        next() //当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的全面会自动进入404页面
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !==-1) { // 在免登录白名单，直接进入
      next();
    } else {
      next('/login'); // 否则全部重定向到登录页
    }
  }
});

复制代码

这里的router.beforeEach也结合了上一章讲的一些登录逻辑代码。

上面一张图就是在使用addRoutes方法之前的权限判断，非常的繁琐，因为我是把所有的路由都挂在了上去，所有我要各种判断当前的用户是否有权限进入该页面，各种if/else的嵌套，维护起来相当的困难。但现在有了addRoutes之后就非常的方便，我只挂载了用户有权限进入的页面，没权限，路由自动帮我跳转的404,省去了不少的判断。

这里还有一个小hack的地方，就是router.addRoutes之后的next()可能会失效，因为可能next()的时候路由并没有完全add完成，好在查阅文档发现

next('/') or next({ path: '/' }): redirect to a different location. The current navigation will be aborted and a new one will be started.

这样我们就可以简单的通过next(to)巧妙的避开之前的那个问题了。这行代码重新进入router.beforeEach这个钩子，这时候再通过next()来释放钩子，就能确保所有的路由都已经挂在完成了。

store/permission.js

就来就讲一讲 GenerateRoutes Action

// store/permission.js
import { asyncRouterMap, constantRouterMap } from 'src/router';

function hasPermission(roles, route) {
  if (route.meta && route.meta.role) {
    return roles.some(role=> route.meta.role.indexOf(role) >=0)
  } else {
    return true
  }
}

const permission={
  state: {
    routers: constantRouterMap,
    addRouters: []
  },
  mutations: {
    SET_ROUTERS: (state, routers)=> {
      state.addRouters=routers;
      state.routers=constantRouterMap.concat(routers);
    }
  },
  actions: {
    GenerateRoutes({ commit }, data) {
      return new Promise(resolve=> {
        const { roles }=data;
        const accessedRouters=asyncRouterMap.filter(v=> {
          if (roles.indexOf('admin') >=0) return true;
          if (hasPermission(roles, v)) {
            if (v.children && v.children.length > 0) {
              v.children=v.children.filter(child=> {
                if (hasPermission(roles, child)) {
                  return child
                }
                return false;
              });
              return v
            } else {
              return v
            }
          }
          return false;
        });
        commit('SET_ROUTERS', accessedRouters);
        resolve();
      })
    }
  }
};

export default permission;

复制代码

这里的代码说白了就是干了一件事，通过用户的权限和之前在router.js里面asyncRouterMap的每一个页面所需要的权限做匹配，最后返回一个该用户能够访问路由有哪些。

侧边栏

最后一个涉及到权限的地方就是侧边栏，不过在前面的基础上已经很方便就能实现动态显示侧边栏了。这里侧边栏基于element-ui的NavMenu来实现的。 代码有点多不贴详细的代码了，有兴趣的可以直接去github上看地址，或者直接看关于侧边栏的文档。

说白了就是遍历之前算出来的permission_routers，通过vuex拿到之后动态v-for渲染而已。不过这里因为有一些业务需求所以加了很多判断 比如我们在定义路由的时候会加很多参数

/**
* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
* redirect: noredirect           if `redirect:noredirect` will no redirct in the breadcrumb
* name:'router-name'             the name is used by <keep-alive> (must set!!!)
* meta : {
   role: ['admin','editor']     will control the page role (you can set multiple roles)
   title: 'title'               the name show in submenu and breadcrumb (recommend set)
   icon: 'svg-name'             the icon show in the sidebar,
   noCache: true                if fasle ,the page will no be cached(default is false)
 }
**/
复制代码

这里仅供参考，而且本项目为了支持无限嵌套路由，所有侧边栏这块使用了递归组件。如需要请大家自行改造，来打造满足自己业务需求的侧边栏。

侧边栏高亮问题:很多人在群里问为什么自己的侧边栏不能跟着自己的路由高亮，其实很简单，element-ui官方已经给了default-active所以我们只要

:default-active="$route.path" 将default-active一直指向当前路由就可以了，就是这么简单

按钮级别权限控制

有很多人一直在问关于按钮级别粒度的权限控制怎么做。我司现在是这样的，真正需要按钮级别控制的地方不是很多，现在是通过获取到用户的role之后，在前端用v-if手动判断来区分不同权限对应的按钮的。理由前面也说了，我司颗粒度的权限判断是交给后端来做的，每个操作后端都会进行权限判断。而且我觉得其实前端真正需要按钮级别判断的地方不是很多，如果一个页面有很多种不同权限的按钮，我觉得更多的应该是考虑产品层面是否设计合理。当然你强行说我想做按钮级别的权限控制，你也可以参照路由层面的做法，搞一个操作权限表。。。但个人觉得有点多此一举。或者将它封装成一个指令都是可以的。

axios拦截器

这里再说一说 axios 吧。虽然在上一篇系列文章中简单介绍过，不过这里还是要在唠叨一下。如上文所说，我司服务端对每一个请求都会验证权限，所以这里我们针对业务封装了一下请求。首先我们通过request拦截器在每个请求头里面塞入token，好让后端对请求进行权限验证。并创建一个respone拦截器，当服务端返回特殊的状态码，我们统一做处理，如没权限或者token失效等操作。

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service=axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config=> {
  // Do something before request is sent
  if (store.getters.token) {
    config.headers['X-Token']=getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
  }
  return config
}, error=> {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response=> response,
  /**
  * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
  */
  //  const res=response.data;
  //     if (res.code !==20000) {
  //       Message({
  //         message: res.message,
  //         type: 'error',
  //         duration: 5 * 1000
  //       });
  //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
  //       if (res.code===50008 || res.code===50012 || res.code===50014) {
  //         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
  //           confirmButtonText: '重新登录',
  //           cancelButtonText: '取消',
  //           type: 'warning'
  //         }).then(()=> {
  //           store.dispatch('FedLogOut').then(()=> {
  //             location.reload();// 为了重新实例化vue-router对象 避免bug
  //           });
  //         })
  //       }
  //       return Promise.reject('error');
  //     } else {
  //       return response.data;
  //     }
  error=> {
    console.log('err' + error)// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  })

export default service

复制代码

两步验证

文章一开始也说了，后台的安全性是很重要的，简简单单的一个账号+密码的方式是很难保证安全性的。所以我司的后台项目都是用了两步验证的方式，之前我们也尝试过使用基于 google-authenticator 或者youbikey这样的方式但难度和操作成本都比较大。后来还是准备借助腾讯爸爸，这年代谁不用微信。。。安全性腾讯爸爸也帮我做好了保障。 楼主建议两步验证要支持多个渠道不要只微信或者QQ，前段时间QQ第三方登录就出了bug，官方两三天才修好的，害我背了锅/(ㄒoㄒ)/~~ 。

这里的两部验证有点名不副实，其实就是账号密码验证过之后还需要一个绑定的第三方平台登录验证而已。 写起来也很简单，在原有登录得逻辑上改造一下就好。

this.$store.dispatch('LoginByEmail', this.loginForm).then(()=> {
  //this.$router.push({ path: '/' });
  //不重定向到首页
  this.showDialog=true //弹出选择第三方平台的dialog
}).catch(err=> {
  this.$message.error(err); //登录失败提示错误
});
复制代码

登录成功之后不直接跳到首页而是让用户两步登录，选择登录得平台。 接下来就是所有第三方登录一样的地方通过 OAuth2.0 授权。这个各大平台大同小异，大家自行查阅文档，不展开了，就说一个微信授权比较坑的地方。注意你连参数的顺序都不能换，不然会验证不通过。具体代码，同时我也封装了openWindow方法大家自行看吧。 当第三方授权成功之后都会跳到一个你之前有一个传入redirect——uri的页面

如微信还必须是你授权账号的一级域名。所以你授权的域名是vue-element-admin.com,你就必须重定向到vue-element-admin.com/xxx/下面，所以你需要写一个重定向的服务，如vue-element-admin.com/auth/redirect?a.com 跳到该页面时会再次重定向给a.com。

所以我们后台也需要开一个authredirect页面：代码。他的作用是第三方登录成功之后会默认跳到授权的页面，授权的页面会再次重定向回我们的后台，由于是spa，改变路由的体验不好，我们通过window.opener.location.href的方式改变hash，在login.js里面再监听hash的变化。当hash变化时，获取之前第三方登录成功返回的code与第一步账号密码登录之后返回的uid一同发送给服务端验证是否正确，如果正确，这时候就是真正的登录成功。

 created() {
     window.addEventListener('hashchange', this.afterQRScan);
   },
   destroyed() {
     window.removeEventListener('hashchange', this.afterQRScan);
   },
   afterQRScan() {
     const hash=window.location.hash.slice(1);
     const hashObj=getQueryObject(hash);
     const originUrl=window.location.origin;
     history.replaceState({}, '', originUrl);
     const codeMap={
       wechat: 'code',
       tencent: 'code'
     };
     const codeName=hashObj[codeMap[this.auth_type]];
     this.$store.dispatch('LoginByThirdparty', codeName).then(()=> {
       this.$router.push({
         path: '/'
       });
     });
   }
复制代码

到这里涉及登录权限的东西也差不多讲完了，这里楼主只是给了大家一个实现的思路(都是楼主不断摸索的血泪史)，每个公司实现的方案都有些出入，请谨慎选择适合自己业务形态的解决方案。如果有什么想法或者建议欢迎去本项目下留言，一同讨论。

读

使用Electron开发客户端程序已经有一段时间了，整体感觉还是非常不错的，其中也遇到了一些坑点，本文是从【运行原理】到【实际应用】对Electron进行一次系统性的总结。【多图，长文预警～】

本文所有实例代码均在我的github electron-react上，结合代码阅读文章效果更佳。另外electron-react还可作为使用Electron + React + Mobx + Webpack技术栈的脚手架工程。

github:https://github.com/ConardLi/electron-react

一、桌面应用程序

桌面应用程序，又称为 GUI 程序（Graphical User Interface），但是和 GUI 程序也有一些区别。桌面应用程序 将 GUI 程序从GUI 具体为“桌面”，使冷冰冰的像块木头一样的电脑概念更具有 人性化，更生动和富有活力。

我们电脑上使用的各种客户端程序都属于桌面应用程序，近年来WEB和移动端的兴起让桌面程序渐渐暗淡，但是在某些日常功能或者行业应用中桌面应用程序仍然是必不可少的。

传统的桌面应用开发方式，一般是下面两种：

1.1 原生开发

直接将语言编译成可执行文件，直接调用系统API，完成UI绘制等。这类开发技术，有着较高的运行效率，但一般来说，开发速度较慢，技术要求较高，例如：

• 使用C++ / MFC开发Windows应用
• 使用Objective-C开发MAC应用

1.2 托管平台

一开始就有本地开发和UI开发。一次编译后，得到中间文件，通过平台或虚机完成二次加载编译或解释运行。运行效率低于原生编译，但平台优化后，其效率也是比较可观的。就开发速度方面，比原生编译技术要快一些。例如：

• 使用C# / .NET Framework(只能开发Windows应用)
• Java / Swing

不过，上面两种对前端开发人员太不友好了，基本是前端人员不会涉及的领域，但是在这个【大前端】的时代，前端开发者正在想方设法涉足各个领域，使用WEB技术开发客户端的方式横空出世。

1.3 WEB开发

使用WEB技术进行开发，利用浏览器引擎完成UI渲染，利用Node.js实现服务器端JS编程并可以调用系统API，可以把它想像成一个套了一个客户端外壳的WEB应用。

在界面上，WEB的强大生态为UI带来了无限可能，并且开发、维护成本相对较低，有WEB开发经验的前端开发者很容易上手进行开发。

本文就来着重介绍使用WEB技术开发客户端程序的技术之一【electron】

二、Electron

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

2.1 使用Electron开发的理由：

• 使用具有强大生态的Web技术进行开发，开发成本低，可扩展性强，更炫酷的UI
• 跨平台，一套代码可打包为Windows、Linux、Mac三套软件，且编译快速
• 可直接在现有Web应用上进行扩展，提供浏览器不具备的能力
• 你是一个前端～

当然，我们也要认清它的缺点：性能比原生桌面应用要低，最终打包后的应用比原生应用大很多。

2.2 开发体验

兼容性

虽然你还在用WEB技术进行开发，但是你不用再考虑兼容性问题了，你只需要关心你当前使用Electron的版本对应Chrome的版本，一般情况下它已经足够新来让你使用最新的API和语法了，你还可以手动升级Chrome版本。同样的，你也不用考虑不同浏览器带的样式和代码兼容问题。

Node环境

这可能是很多前端开发者曾经梦想过的功能，在WEB界面中使用Node.js提供的强大API，这意味着你在WEB页面直接可以操作文件，调用系统API，甚至操作数据库。当然，除了完整的Node API，你还可以使用额外的几十万个npm模块。

跨域

你可以直接使用Node提供的request模块进行网络请求，这意味着你无需再被跨域所困扰。

强大的扩展性

借助node-ffi，为应用程序提供强大的扩展性（后面的章节会详细介绍）。

2.3 谁在用Electron

现在市面上已经有非常多的应用在使用Electron进行开发了，包括我们熟悉的VS Code客户端、GitHub客户端、Atom客户端等等。印象很深的，去年迅雷在发布迅雷X10.1时的文案：

从迅雷X 10.1版本开始，我们采用Electron软件框架完全重写了迅雷主界面。使用新框架的迅雷X可以完美支持2K、4K等高清显示屏，界面中的文字渲染也更加清晰锐利。从技术层面来说，新框架的界面绘制、事件处理等方面比老框架更加灵活高效，因此界面的流畅度也显著优于老框架的迅雷。至于具体提升有多大？您一试便知。

你可以打开VS Code，点击【帮助】【切换开发人员工具】来调试VS Code客户端的界面。

三、Electron运行原理

Electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的API。

3.1 Chromium

Chromium是Google为发展Chrome浏览器而启动的开源项目，Chromium相当于Chrome的工程版或称实验版，新功能会率先在Chromium上实现，待验证后才会应用在Chrome上，故Chrome的功能会相对落后但较稳定。

Chromium为Electron提供强大的UI能力，可以在不考虑兼容性的情况下开发界面。

3.2 Node.js

Node.js是一个让JavaScript运行在服务端的开发平台，Node使用事件驱动，非阻塞I/O模型而得以轻量和高效。

单单靠Chromium是不能具备直接操作原生GUI能力的，Electron内集成了Nodejs，这让其在开发界面的同时也有了操作系统底层API的能力，Nodejs 中常用的 Path、fs、Crypto 等模块在 Electron 可以直接使用。

3.3 系统API

为了提供原生系统的GUI支持，Electron内置了原生应用程序接口，对调用一些系统功能，如调用系统通知、打开系统文件夹提供支持。

在开发模式上，Electron在调用系统API和绘制界面上是分离开发的，下面我们来看看Electron关于进程如何划分。

3.4 主进程

Electron区分了两种进程：主进程和渲染进程，两者各自负责自己的职能。

Electron 运行package.json的 main 脚本的进程被称为主进程。一个 Electron 应用总是有且只有一个主进程。

职责:

• 创建渲染进程（可多个）
• 控制了应用生命周期（启动、退出APP以及对APP做一些事件监听）
• 调用系统底层功能、调用原生资源

可调用的API:

• Node.js API
• Electron提供的主进程API（包括一些系统功能和Electron附加功能）

3.5 渲染进程

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。 每个Electron 中的 web页面运行在它自己的渲染进程中。

主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

你可以把渲染进程想像成一个浏览器窗口，它能存在多个并且相互独立，不过和浏览器不同的是，它能调用Node API。

职责:

• 用HTML和CSS渲染界面
• 用JavaScript做一些界面交互

可调用的API:

• DOM API
• Node.js API
• Electron提供的渲染进程API

四、Electron基础

4.1 Electron API

在上面的章节我们提到，渲染进和主进程分别可调用的Electron API。所有Electron的API都被指派给一种进程类型。 许多API只能被用于主进程中，有些API又只能被用于渲染进程，又有一些主进程和渲染进程中都可以使用。

你可以通过如下方式获取Electron API

const { BrowserWindow, ... }=require('electron')
复制代码

下面是一些常用的Electron API：

在后面的章节我们会选择其中常用的模块进行详细介绍。

4.2 使用 Node.js 的 API

你可以同时在Electron的主进程和渲染进程使用Node.js API，)所有在Node.js可以使用的API，在Electron中同样可以使用。

import {shell} from 'electron';
import os from 'os';

document.getElementById('btn').addEventListener('click', ()=> { 
  shell.showItemInFolder(os.homedir());
})
复制代码

有一个非常重要的提示: 原生Node.js模块 (即指，需要编译源码过后才能被使用的模块) 需要在编译后才能和Electron一起使用。

4.3 进程通信

主进程和渲染进程虽然拥有不同的职责，然是他们也需要相互协作，互相通讯。

例如：在web页面管理原生GUI资源是很危险的，会很容易泄露资源。所以在web页面，不允许直接调用原生GUI相关的API。渲染进程如果想要进行原生的GUI操作，就必须和主进程通讯，请求主进程来完成这些操作。

4.4 渲染进程向主进程通信

ipcRenderer 是一个 EventEmitter 的实例。 你可以使用它提供的一些方法，从渲染进程发送同步或异步的消息到主进程。 也可以接收主进程回复的消息。

在渲染进程引入ipcRenderer：

import { ipcRenderer } from 'electron';
复制代码

异步发送：

通过 channel 发送同步消息到主进程，可以携带任意参数。

在内部，参数会被序列化为 JSON，因此参数对象上的函数和原型链不会被发送。

ipcRenderer.send('async-render', '我是来自渲染进程的异步消息');
复制代码

同步发送：

 const msg=ipcRenderer.sendSync('sync-render', '我是来自渲染进程的同步消息');
复制代码

注意: 发送同步消息将会阻塞整个渲染进程，直到收到主进程的响应。

主进程监听消息：

ipcMain模块是EventEmitter类的一个实例。 当在主进程中使用时，它处理从渲染器进程（网页）发送出来的异步和同步信息。 从渲染器进程发送的消息将被发送到该模块。

ipcMain.on：监听 channel，当接收到新的消息时 listener 会以 listener(event, args...) 的形式被调用。

  ipcMain.on('sync-render', (event, data)=> {
    console.log(data);
  });
复制代码

4.5 主进程向渲染进程通信

在主进程中可以通过BrowserWindow的webContents向渲染进程发送消息，所以，在发送消息前你必须先找到对应渲染进程的BrowserWindow对象。：

const mainWindow=BrowserWindow.fromId(global.mainId);
 mainWindow.webContents.send('main-msg', `ConardLi]`)
复制代码

根据消息来源发送：

在ipcMain接受消息的回调函数中，通过第一个参数event的属性sender可以拿到消息来源渲染进程的webContents对象，我们可以直接用此对象回应消息。

  ipcMain.on('sync-render', (event, data)=> {
    console.log(data);
    event.sender.send('main-msg', '主进程收到了渲染进程的【异步】消息！')
  });
复制代码

渲染进程监听：

ipcRenderer.on:监听 channel, 当新消息到达，将通过listener(event, args...)调用 listener。

ipcRenderer.on('main-msg', (event, msg)=> {
    console.log(msg);
})
复制代码

4.6 通信原理

ipcMain 和 ipcRenderer 都是 EventEmitter 类的一个实例。EventEmitter 类是 NodeJS 事件的基础，它由 NodeJS 中的 events 模块导出。

EventEmitter 的核心就是事件触发与事件监听器功能的封装。它实现了事件模型需要的接口， 包括 addListener，removeListener, emit 及其它工具方法. 同原生 JavaScript 事件类似， 采用了发布/订阅(观察者)的方式， 使用内部 _events 列表来记录注册的事件处理器。

我们通过 ipcMain和ipcRenderer 的 on、send 进行监听和发送消息都是 EventEmitter 定义的相关接口。

4.7 remote

remote 模块为渲染进程（web页面）和主进程通信（IPC）提供了一种简单方法。 使用 remote 模块, 你可以调用 main 进程对象的方法, 而不必显式发送进程间消息, 类似于 Java 的 RMI 。

import { remote } from 'electron';

remote.dialog.showErrorBox('主进程才有的dialog模块', '我是使用remote调用的')
复制代码

但实际上，我们在调用远程对象的方法、函数或者通过远程构造函数创建一个新的对象，实际上都是在发送一个同步的进程间消息。

在上面通过 remote 模块调用 dialog 的例子里。我们在渲染进程中创建的 dialog 对象其实并不在我们的渲染进程中，它只是让主进程创建了一个 dialog 对象，并返回了这个相对应的远程对象给了渲染进程。

4.8 渲染进程间通信

Electron并没有提供渲染进程之间相互通信的方式，我们可以在主进程中建立一个消息中转站。

渲染进程之间通信首先发送消息到主进程，主进程的中转站接收到消息后根据条件进行分发。

4.9 渲染进程数据共享

在两个渲染进程间共享数据最简单的方法是使用浏览器中已经实现的HTML5 API。 其中比较好的方案是用Storage API， localStorage，sessionStorage 或者 IndexedDB。

就像在浏览器中使用一样，这种存储相当于在应用程序中永久存储了一部分数据。有时你并不需要这样的存储，只需要在当前应用程序的生命周期内进行一些数据的共享。这时你可以用 Electron 内的 IPC 机制实现。

将数据存在主进程的某个全局变量中，然后在多个渲染进程中使用 remote 模块来访问它。

在主进程中初始化全局变量：

global.mainId=...;
global.device={...};
global.__dirname=__dirname;
global.myField={ name: 'ConardLi' };
复制代码

在渲染进程中读取：

import { ipcRenderer, remote } from 'electron';

const { getGlobal }=remote;

const mainId=getGlobal('mainId')
const dirname=getGlobal('__dirname')
const deviecMac=getGlobal('device').mac;
复制代码

在渲染进程中改变：

getGlobal('myField').name='code秘密花园';
复制代码

多个渲染进程共享同一个主进程的全局变量，这样即可达到渲染进程数据共享和传递的效果。

五、窗口

5.1 BrowserWindow

主进程模块BrowserWindow用于创建和控制浏览器窗口。

  mainWindow=new BrowserWindow({
    width: 1000,
    height: 800,
    // ...
  });
  mainWindow.loadURL('http://www.conardli.top/');
复制代码

你可以在这里查看它所有的构造参数。

5.2 无框窗口

无框窗口是没有镶边的窗口，窗口的部分（如工具栏）不属于网页的一部分。

在BrowserWindow的构造参数中，将frame设置为false可以指定窗口为无边框窗口，将工具栏隐藏后，就会产生两个问题：

• 1.窗口控制按钮（最小化、全屏、关闭按钮）会被隐藏
• 2.无法拖拽移动窗口

可以通过指定titleBarStyle选项来再将工具栏按钮显示出来，将其设置为hidden表示返回一个隐藏标题栏的全尺寸内容窗口，在左上角仍然有标准的窗口控制按钮。

new BrowserWindow({
    width: 200,
    height: 200,
    titleBarStyle: 'hidden',
    frame: false
  });
复制代码

5.3 窗口拖拽

默认情况下, 无边框窗口是不可拖拽的。我们可以在界面中通过CSS属性-webkit-app-region: drag手动制定拖拽区域。

在无框窗口中, 拖动行为可能与选择文本冲突，可以通过设定-webkit-user-select: none;禁用文本选择：

.header {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}
复制代码

相反的，在可拖拽区域内部设置 -webkit-app-region: no-drag则可以指定特定不可拖拽区域。

5.4 透明窗口

通过将transparent选项设置为true, 还可以使无框窗口透明:

new BrowserWindow({
    transparent: true,
    frame: false
  });
复制代码

5.5 Webview

使用 webview 标签在Electron 应用中嵌入 "外来" 内容。外来内容包含在 webview 容器中。 应用中的嵌入页面可以控制外来内容的布局和重绘。

与 iframe 不同, webview 在与应用程序不同的进程中运行。它与您的网页没有相同的权限, 应用程序和嵌入内容之间的所有交互都将是异步的。

六、对话框

dialog 模块提供了api来展示原生的系统对话框，例如打开文件框，alert框，所以web应用可以给用户带来跟系统应用相同的体验。

注意：dialog是主进程模块，想要在渲染进程调用可以使用remote

6.1 错误提示

dialog.showErrorBox用于显示一个显示错误消息的模态对话框。

 remote.dialog.showErrorBox('错误', '这是一个错误弹框！')
复制代码

6.2 对话框

dialog.showErrorBox用于调用系统对话框，可以为指定几种不同的类型： "none", "info", "error", "question" 或者 "warning"。

在 Windows 上, "question" 与"info"显示相同的图标, 除非你使用了 "icon" 选项设置图标。 在 macOS 上, "warning" 和 "error" 显示相同的警告图标

remote.dialog.showMessageBox({
  type: 'info',
  title: '提示信息',
  message: '这是一个对话弹框！',
  buttons: ['确定', '取消']
}, (index)=> {
  this.setState({ dialogMessage: `【你点击了${index ? '取消' : '确定'}！！】` })
})
复制代码

6.3 文件框

dialog.showOpenDialog用于打开或选择系统目录。

remote.dialog.showOpenDialog({
  properties: ['openDirectory', 'openFile']
}, (data)=> {
  this.setState({ filePath: `【选择路径：${data[0]}】 ` })
})
复制代码

6.4 信息框

这里推荐直接使用HTML5 API，它只能在渲染器进程中使用。

let options={
  title: '信息框标题',
  body: '我是一条信息～～～',
}
let myNotification=new window.Notification(options.title, options)
myNotification.onclick=()=> {
  this.setState({ message: '【你点击了信息框！！】' })
}
复制代码

七、系统

7.1 获取系统信息

通过remote获取到主进程的process对象，可以获取到当前应用的各个版本信息：

• process.versions.electron：electron版本信息
• process.versions.chrome：chrome版本信息
• process.versions.node：node版本信息
• process.versions.v8：v8版本信息

获取当前应用根目录：

remote.app.getAppPath()
复制代码

使用node的os模块获取当前系统根目录：

os.homedir();
复制代码

7.2 复制粘贴

Electron提供的clipboard在渲染进程和主进程都可使用，用于在系统剪贴板上执行复制和粘贴操作。

以纯文本的形式写入剪贴板：

clipboard.writeText(text[, type])
复制代码

以纯文本的形式获取剪贴板的内容：

clipboard.readText([type])
复制代码

7.3 截图

desktopCapturer用于从桌面捕获音频和视频的媒体源的信息。它只能在渲染进程中被调用。

下面的代码是一个获取屏幕截图并保存的实例：

  getImg=()=> {
    this.setState({ imgMsg: '正在截取屏幕...' })
    const thumbSize=this.determineScreenShotSize()
    let options={ types: ['screen'], thumbnailSize: thumbSize }
    desktopCapturer.getSources(options, (error, sources)=> {
      if (error) return console.log(error)
      sources.forEach((source)=> {
        if (source.name==='Entire screen' || source.name==='Screen 1') {
          const screenshotPath=path.join(os.tmpdir(), 'screenshot.png')
          fs.writeFile(screenshotPath, source.thumbnail.toPNG(), (error)=> {
            if (error) return console.log(error)
            shell.openExternal(`file://${screenshotPath}`)
            this.setState({ imgMsg: `截图保存到: ${screenshotPath}` })
          })
        }
      })
    })
  }

  determineScreenShotSize=()=> {
    const screenSize=screen.getPrimaryDisplay().workAreaSize
    const maxDimension=Math.max(screenSize.width, screenSize.height)
    return {
      width: maxDimension * window.devicePixelRatio,
      height: maxDimension * window.devicePixelRatio
    }
  }

复制代码

八、菜单

应用程序的菜单可以帮助我们快捷的到达某一功能，而不借助客户端的界面资源，一般菜单分为两种：

• 应用程序菜单：位于应用程序顶部，在全局范围内都能使用
• 上下文菜单：可自定义任意页面显示，自定义调用，如右键菜单

Electron为我们提供了Menu模块用于创建本机应用程序菜单和上下文菜单，它是一个主进程模块。

你可以通过Menu的静态方法buildFromTemplate(template)，使用自定义菜单模版来构造一个菜单对象。

template是一个MenuItem的数组，我们来看看MenuItem的几个重要参数：

• label：菜单显示的文字
• click：点击菜单后的事件处理函数
• role：系统预定义的菜单，例如copy(复制)、paste(粘贴)、minimize(最小化)...
• enabled：指示是否启用该项目，此属性可以动态更改
• submenu：子菜单，也是一个MenuItem的数组

推荐：最好指定role与标准角色相匹配的任何菜单项，而不是尝试手动实现click函数中的行为。内置role行为将提供最佳的本地体验。

下面的实例是一个简单的额菜单template。

const template=[
  {
    label: '文件',
    submenu: [
      {
        label: '新建文件',
        click: function () {
          dialog.showMessageBox({
            type: 'info',
            message: '嘿!',
            detail: '你点击了新建文件！',
          })
        }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [{
      label: '剪切',
      role: 'cut'
    }, {
      label: '复制',
      role: 'copy'
    }, {
      label: '粘贴',
      role: 'paste'
    }]
  },
  {
    label: '最小化',
    role: 'minimize'
  }
]
复制代码

8.1 应用程序菜单

使用Menu的静态方法setApplicationMenu，可创建一个应用程序菜单，在 Windows 和 Linux 上，menu将被设置为每个窗口的顶层菜单。

注意：必须在模块ready事件后调用此 API app。

我们可以根据应用程序不同的的生命周期，不同的系统对菜单做不同的处理。

app.on('ready', function () {
  const menu=Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
})

app.on('browser-window-created', function () {
  let reopenMenuItem=findReopenMenuItem()
  if (reopenMenuItem) reopenMenuItem.enabled=false
})

app.on('window-all-closed', function () {
  let reopenMenuItem=findReopenMenuItem()
  if (reopenMenuItem) reopenMenuItem.enabled=true
})

if (process.platform==='win32') {
  const helpMenu=template[template.length - 1].submenu
  addUpdateMenuItems(helpMenu, 0)
}
复制代码

8.2 上下文菜单

使用Menu的实例方法menu.popup可自定义弹出上下文菜单。

    let m=Menu.buildFromTemplate(template)
    document.getElementById('menuDemoContainer').addEventListener('contextmenu', (e)=> {
      e.preventDefault()
      m.popup({ window: remote.getCurrentWindow() })
    })
复制代码

8.3 快捷键

在菜单选项中，我们可以指定一个accelerator属性来指定操作的快捷键：

  {
    label: '最小化',
    accelerator: 'CmdOrCtrl+M',
    role: 'minimize'
  }
复制代码

另外，我们还可以使用globalShortcut来注册全局快捷键。

    globalShortcut.register('CommandOrControl+N', ()=> {
      dialog.showMessageBox({
        type: 'info',
        message: '嘿!',
        detail: '你触发了手动注册的快捷键.',
      })
    })
复制代码

CommandOrControl代表在macOS上为Command键，以及在Linux和Windows上为Control键。

九、打印

很多情况下程序中使用的打印都是用户无感知的。并且想要灵活的控制打印内容，往往需要借助打印机给我们提供的api再进行开发，这种开发方式非常繁琐，并且开发难度较大。第一次在业务中用到Electron其实就是用到它的打印功能，这里就多介绍一些。

Electron提供的打印api可以非常灵活的控制打印设置的显示，并且可以通过html来书写打印内容。Electron提供了两种方式进行打印，一种是直接调用打印机打印，一种是打印到pdf。

并且有两种对象可以调用打印：

• 通过window的webcontent对象，使用此种方式需要单独开出一个打印的窗口，可以将该窗口隐藏，但是通信调用相对复杂。
• 使用页面的webview元素调用打印，可以将webview隐藏在调用的页面中，通信方式比较简单。

上面两种方式同时拥有print和printToPdf方法。

9.1 调用系统打印

contents.print([options], [callback])；
复制代码

打印配置(options)中只有简单的三个配置：

• silent：打印时是否不展示打印配置（是否静默打印）
• printBackground：是否打印背景
• deviceName：打印机设备名称

首先要将我们使用的打印机名称配置好，并且要在调用打印前首先要判断打印机是否可用。

使用webContents的getPrinters方法可获取当前设备已经配置的打印机列表，注意配置过不是可用，只是在此设备上安装过驱动。

通过getPrinters获取到的打印机对象：electronjs.org/docs/api/st…

我们这里只管关心两个，name和status，status为0时表示打印机可用。

print的第二个参数callback是用于判断打印任务是否发出的回调，而不是打印任务完成后的回调。所以一般打印任务发出，回调函数即会调用并返回参数true。这个回调并不能判断打印是否真的成功了。

    if (this.state.curretnPrinter) {
      mainWindow.webContents.print({
        silent: silent, printBackground: true, deviceName: this.state.curretnPrinter
      }, ()=> { })
    } else {
      remote.dialog.showErrorBox('错误', '请先选择一个打印机！')
    }
复制代码

9.2 打印到PDF

printToPdf的用法基本和print相同，但是print的配置项非常少，而printToPdf则扩展了很多属性。这里翻了一下源码发现还有很多没有被贴进文档的，大概有三十几个，包括可以对打印的margin，打印页眉页脚等进行配置。

contents.printToPDF(options, callback)
复制代码

callback函数在打印失败或打印成功后调用，可获取打印失败信息或包含PDF数据的缓冲区。

    const pdfPath=path.join(os.tmpdir(), 'webviewPrint.pdf');
    const webview=document.getElementById('printWebview');
    const renderHtml='我是被临时插入webview的内容...';
    webview.executeJavaScript('document.documentElement.innerHTML=`' + renderHtml + '`;');
    webview.printToPDF({}, (err, data)=> {
      console.log(err, data);
      fs.writeFile(pdfPath, data, (error)=> {
        if (error) throw error
        shell.openExternal(`file://${pdfPath}`)
        this.setState({ webviewPdfPath: pdfPath })
      });
    });
复制代码

这个例子中的打印是使用webview完成的，通过调用executeJavaScript方法可动态向webview插入打印内容。

9.3 两种打印方案的选择

上面提到，使用webview和webcontent都可以调用打印功能，使用webcontent打印，首先要有一个打印窗口，这个窗口不能随时打印随时创建，比较耗费性能。可以将它在程序运行时启动好，并做好事件监听。

此过程需和调用打印的进行做好通信，大致过程如下：

可见通信非常繁琐，使用webview进行打印可实现同样的效果但是通信方式会变得简单，因为渲染进程和webview通信不需要经过主进程，通过如下方式即可：

  const webview=document.querySelector('webview')
  webview.addEventListener('ipc-message', (event)=> {
    console.log(event.channel)
  })
  webview.send('ping')；

  const {ipcRenderer}=require('electron')
  ipcRenderer.on('ping', ()=> {
    ipcRenderer.sendToHost('pong')
  })
复制代码

之前专门为ELectron打印写过一个DEMO：electron-print-demo有兴趣可以clone下来看一下。

9.4 打印功能封装

下面是几个针对常用打印功能的工具函数封装。

/**
 * 获取系统打印机列表
 */
export function getPrinters() {
  let printers=[];
  try {
    const contents=remote.getCurrentWindow().webContents;
    printers=contents.getPrinters();
  } catch (e) {
    console.error('getPrintersError', e);
  }
  return printers;
}
/**
 * 获取系统默认打印机
 */
export function getDefaultPrinter() {
  return getPrinters().find(element=> element.isDefault);
}
/**
 * 检测是否安装了某个打印驱动
 */
export function checkDriver(driverMame) {
  return getPrinters().find(element=> (element.options["printer-make-and-model"] || '').includes(driverMame));
}
/**
 * 根据打印机名称获取打印机对象
 */
export function getPrinterByName(name) {
  return getPrinters().find(element=> element.name===name);
}

复制代码

十、程序保护

10.1 崩溃

崩溃监控是每个客户端程序必备的保护功能，当程序崩溃时我们一般期望做到两件事：

• 1.上传崩溃日志，及时报警
• 2.监控程序崩溃，提示用户重启程序

electron为我们提供给了crashReporter来帮助我们记录崩溃日志，我们可以通过crashReporter.start来创建一个崩溃报告器：

const { crashReporter }=require('electron')
crashReporter.start({
  productName: 'YourName',
  companyName: 'YourCompany',
  submitURL: 'https://your-domain.com/url-to-submit',
  uploadToServer: true
})
复制代码

当程序发生崩溃时，崩溃报日志将被储存在临时文件夹中名为YourName Crashes的文件文件夹中。submitURL用于指定你的崩溃日志上传服务器。 在启动崩溃报告器之前，您可以通过调用app.setPath('temp', 'my/custom/temp')API来自定义这些临时文件的保存路径。你还可以通过crashReporter.getLastCrashReport()来获取上次崩溃报告的日期和ID。

我们可以通过webContents的crashed来监听渲染进程的崩溃，另外经测试有些主进程的崩溃也会触发该事件。所以我们可以根据主window是否被销毁来判断进行不同的重启逻辑，下面是整个崩溃监控的逻辑：

import { BrowserWindow, crashReporter, dialog } from 'electron';
// 开启进程崩溃记录
crashReporter.start({
  productName: 'electron-react',
  companyName: 'ConardLi',
  submitURL: 'http://xxx.com',  // 上传崩溃日志的接口
  uploadToServer: false
});
function reloadWindow(mainWin) {
  if (mainWin.isDestroyed()) {
    app.relaunch();
    app.exit(0);
  } else {
    // 销毁其他窗口
    BrowserWindow.getAllWindows().forEach((w)=> {
      if (w.id !==mainWin.id) w.destroy();
    });
    const options={
      type: 'info',
      title: '渲染器进程崩溃',
      message: '这个进程已经崩溃.',
      buttons: ['重载', '关闭']
    }
    dialog.showMessageBox(options, (index)=> {
      if (index===0) mainWin.reload();
      else mainWin.close();
    })
  }
}
export default function () {
  const mainWindow=BrowserWindow.fromId(global.mainId);
  mainWindow.webContents.on('crashed', ()=> {
    const errorMessage=crashReporter.getLastCrashReport();
    console.error('程序崩溃了！', errorMessage); // 可单独上传日志
    reloadWindow(mainWindow);
  });
}
复制代码

10.2 最小化到托盘

有的时候我们并不想让用户通过点关闭按钮的时候就关闭程序，而是把程序最小化到托盘，在托盘上做真正的退出操作。

首先要监听窗口的关闭事件，阻止用户关闭操作的默认行为，将窗口隐藏。

function checkQuit(mainWindow, event) {
  const options={
    type: 'info',
    title: '关闭确认',
    message: '确认要最小化程序到托盘吗？',
    buttons: ['确认', '关闭程序']
  };
  dialog.showMessageBox(options, index=> {
    if (index===0) {
      event.preventDefault();
      mainWindow.hide();
    } else {
      mainWindow=null;
      app.exit(0);
    }
  });
}
function handleQuit() {
  const mainWindow=BrowserWindow.fromId(global.mainId);
  mainWindow.on('close', event=> {
    event.preventDefault();
    checkQuit(mainWindow, event);
  });
}
复制代码

这时程序就再也找不到了，任务托盘中也没有我们的程序，所以我们要先创建好任务托盘，并做好事件监听。

windows平台使用ico文件可以达到更好的效果

export default function createTray() {
  const mainWindow=BrowserWindow.fromId(global.mainId);
  const iconName=process.platform==='win32' ? 'icon.ico' : 'icon.png'
  tray=new Tray(path.join(global.__dirname, iconName));
  const contextMenu=Menu.buildFromTemplate([
    {
      label: '显示主界面', click: ()=> {
        mainWindow.show();
        mainWindow.setSkipTaskbar(false);
      }
    },
    {
      label: '退出', click: ()=> {
        mainWindow.destroy();
        app.quit();
      }
    },
  ])
  tray.setToolTip('electron-react');
  tray.setContextMenu(contextMenu);
}
复制代码

十一、扩展能力

在很多情况下，你的应用程序要和外部设备进行交互，一般情况下厂商会为你提供硬件设备的开发包，这些开发包基本上都是通过C++ 编写，在使用electron开发的情况下，我们并不具备直接调用C++代码的能力，我们可以利用node-ffi来实现这一功能。

node-ffi提供了一组强大的工具，用于在Node.js环境中使用纯JavaScript调用动态链接库接口。它可以用来为库构建接口绑定，而不需要使用任何C++代码。

注意node-ffi并不能直接调用C++代码，你需要将C++代码编译为动态链接库：在 Windows下是 Dll ，在 Mac OS下是 dylib ，Linux 是 so 。

node-ffi 加载 Library是有限制的，只能处理 C风格的 Library。

下面是一个简单的实例：

const ffi=require('ffi');
const ref=require('ref');
const SHORT_CODE=ref.refType('short');


const DLL=new ffi.Library('test.dll', {
    Test_CPP_Method: ['int', ['string',SHORT_CODE]], 
  })

testCppMethod(str: String, num: number): void {
  try {
    const result: any=DLL.Test_CPP_Method(str, num);
    return result;
  } catch (error) {
    console.log('调用失败～',error);
  }
}

this.testCppMethod('ConardLi',123);
复制代码

上面的代码中，我们用ffi包装C++接口生成的动态链接库test.dll，并使用ref进行一些类型映射。

使用JavaScript调用这些映射方法时，推荐使用TypeScript来约定参数类型，因为弱类型的JavaScript在调用强类型语言的接口时可能会带来意想不到的风险。

借助这一能力，前端开发工程师也可以在IOT领域一展身手了～

十二、环境选择

一般情况下，我们的应用程序可能运行在多套环境下（production、beta、uat、moke、development...），不同的开发环境可能对应不同的后端接口或者其他配置，我们可以在客户端程序中内置一个简单的环境选择功能来帮助我们更高效的开发。

具体策略如下：

• 在开发环境中，我们直接进入环境选择页面，读取到选择的环境后进行响应的重定向操作
• 在菜单保留环境选择入口，以便在开发过程中切换

const envList=["moke", "beta", "development", "production"];
exports.envList=envList;
const urlBeta='https://wwww.xxx-beta.com';
const urlDev='https://wwww.xxx-dev.com';
const urlProp='https://wwww.xxx-prop.com';
const urlMoke='https://wwww.xxx-moke.com';
const path=require('path');
const pkg=require(path.resolve(global.__dirname, 'package.json'));
const build=pkg['build-config'];
exports.handleEnv={
  build,
  currentEnv: 'moke',
  setEnv: function (env) {
    this.currentEnv=env
  },
  getUrl: function () {
    console.log('env:', build.env);
    if (build.env==='production' || this.currentEnv==='production') {
      return urlProp;
    } else if (this.currentEnv==='moke') {
      return urlMoke;
    } else if (this.currentEnv==='development') {
      return urlDev;
    } else if (this.currentEnv==="beta") {
      return urlBeta;
    }
  },
  isDebugger: function () {
    return build.env==='development'
  }
}
复制代码

十三、打包

最后也是最重要的一步，将写好的代码打包成可运行的.app或.exe可执行文件。

这里我把打包氛围两部分来做，渲染进程打包和主进程打包。

13.1 渲染进程打包和升级

一般情况下，我们的大部分业务逻辑代码是在渲染进程完成的，在大部分情况下我们仅仅需要对渲染进程进行更新和升级而不需要改动主进程代码，我们渲染进程的打包实际上和一般的web项目打包没有太大差别，使用webpack打包即可。

这里我说说渲染进程单独打包的好处：

打包完成的html和js文件，我们一般要上传到我们的前端静态资源服务器下，然后告知服务端我们的渲染进程有代码更新，这里可以说成渲染进程单独的升级。

注意，和壳的升级不同，渲染进程的升级仅仅是静态资源服务器上html和js文件的更新，而不需要重新下载更新客户端，这样我们每次启动程序的时候检测到离线包有更新，即可直接刷新读取最新版本的静态资源文件，即使在程序运行过程中要强制更新，我们的程序只需要强制刷新页面读取最新的静态资源即可，这样的升级对用户是非常友好的。

这里注意，一旦我们这样配置，就意味着渲染进程和主进程打包升级的完全分离，我们在启动主窗口时读取的文件就不应该再是本地文件，而是打包完成后放在静态资源服务器的文件。

为了方便开发，这里我们可以区分本地和线上加载不同的文件：

function getVersion (mac,current){
  // 根据设备mac和当前版本获取最新版本
}
export default function () {
  if (build.env==='production') {
    const version=getVersion (mac,current);
    return 'https://www.xxxserver.html/electron-react/index_'+version+'.html';
  }
  return url.format({
    protocol: 'file:',
    pathname: path.join(__dirname, 'env/environment.html'),
    slashes: true,
    query: { debugger: build.env==="development" }
  });
}
复制代码

具体的webpack配置这里就不再贴出，可以到我的github electron-react的/scripts目录下查看。

这里需要注意，在开发环境下我们可以结合webpack的devServer和electron命令来启动app：

  devServer: {
    contentBase: './assets/',
    historyApiFallback: true,
    hot: true,
    port: PORT,
    noInfo: false,
    stats: {
      colors: true,
    },
    setup() {
      spawn(
        'electron',
        ['.'],
        {
          shell: true,
          stdio: 'inherit',
        }
      )
        .on('close', ()=> process.exit(0))
        .on('error', e=> console.error(e));
    },
  },//...
复制代码

13.2 主进程打包

主进程，即将整个程序打包成可运行的客户端程序，常用的打包方案一般有两种，electron-packager和electron-builder。

electron-packager在打包配置上我觉得有些繁琐，而且它只能将应用直接打包为可执行程序。

这里我推荐使用electron-builder，它不仅拥有方便的配置 protocol 的功能、内置的 Auto Update、简单的配置 package.json 便能完成整个打包工作，用户体验非常不错。而且electron-builder不仅能直接将应用打包成exe app等可执行程序，还能打包成msi dmg等安装包格式。

你可以在package.json方便的进行各种配置：

 "build": {
   "productName": "electron-react", // app中文名称
   "appId": "electron-react",// app标识
   "directories": { // 打包后输出的文件夹
     "buildResources": "resources",
     "output": "dist/"
   }
   "files": [ // 打包后依然保留的源文件
     "main_process/",
     "render_process/",
   ],
   "mac": { // mac打包配置
     "target": "dmg",
     "icon": "icon.ico"
   },
   "win": { // windows打包配置
     "target": "nsis",
     "icon": "icon.ico"
   },
   "dmg": { // dmg文件打包配置
     "artifactName": "electron_react.dmg",
     "contents": [
       {
         "type": "link",
         "path": "/Applications",
         "x": 410,
         "y": 150
       },
       {
         "type": "file",
         "x": 130,
         "y": 150
       }
     ]
   },
   "nsis": { // nsis文件打包配置
     "oneClick": false,
     "allowToChangeInstallationDirectory": true,
     "shortcutName": "electron-react"
   },
 }
复制代码

执行electron-builder打包命令时，可指定参数进行打包。

 --mac, -m, -o, --macos   macOS打包
 --linux, -l              Linux打包
 --win, -w, --windows     Windows打包
 --mwl                    同时为macOS，Windows和Linux打包
 --x64                    x64 (64位安装包)
 --ia32                   ia32(32位安装包) 
复制代码

关于主进程的更新你可以使用electron-builder自带的Auto Update模块，在electron-react也实现了手动更新的模块，由于篇幅原因这里就不再赘述，如果有兴趣可以到我的github查看main下的update模块。

13.3 打包优化

electron-builder打包出来的App要比相同功能的原生客户端应用体积大很多，即使是空的应用，体积也要在100mb以上。原因有很多：

第一点；为了达到跨平台的效果，每个Electron应用都包含了整个V8引擎和Chromium内核。

第二点：打包时会将整个node_modules打包进去，大家都知道一个应用的node_module体积是非常庞大的，这也是使得Electron应用打包后的体积较大的原因。

第一点我们无法改变，我们可以从第二点对应用体积进行优化：Electron在打包时只会将denpendencies的依赖打包进去，而不会将 devDependencies 中的依赖进行打包。所以我们应尽可能的减少denpendencies中的依赖。在上面的进程中，我们使用webpack对渲染进程进行打包，所以渲染进程的依赖全部都可以移入devDependencies。

另外，我们还可以使用双packajson.json的方式来进行优化，把只在开发环境中使用到的依赖放在整个项目的根目录的package.json下，将与平台相关的或者运行时需要的依赖装在app目录下。具体详见two-package-structure。

参考

本项目源码地址：https://github.com/ConardLi/electron-react

小结

希望你阅读本篇文章后可以达到以下几点：

• 了解Electron的基本运行原理
• 掌握Electron开发的核心基础知识
• 了解Electron关于弹框、打印、保护、打包等功能的基本使用

文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，欢迎点赞和关注。

想阅读更多优质文章、可关注我的github博客，你的star?、点赞和关注是我持续创作的动力！

github:https://github.com/ConardLi/ConardLi.github.io

原链接：https://juejin.im/post/5cfd2ec7e51d45554877a59f