Electron-forge应用

 

一、  使用Electron-Forge做应用的缘由

最近遇到一个需求,Web应用登录时要校验用户的登录Mac地址,以确定该用户是在授权过的电脑设备上登录的。没错我傻了,没多想就直接开始做,后面卡到了,这管理端是获取不到的啊,浏览器也限制了获取客户端电脑信息(除了IE)。然后想了很多方法都不行,最后决定做个桌面应用,然后将电脑的信息通过接口给浏览器调用,之后看网上的大佬分析,这款是最适合的,方便快捷,上手快,只要有点前端基础都用得起来,本人是个后端,也用得挺舒服的。

二、  Electron-Forge的应用

1、    使用electron-forge的准备

1)    装vscode,极力推荐vscode,轻量、上手快,vscode的社区氛围也很好,插件多。

2)    装git, electron-forge打包时会检测系统,没有装git是打不了包的

3)    接下来打开vscode,全局装上electron-forge。

网上的文档都有,我就不多说了;

官网:https://www.worldlink.com.cn/osdir/electron-forge.html

2、    起步

npm install -g electron-forge

electron-forge init my-new-app

cd my-new-app

npm start

  做完这上面几步,你能看到一个应用的窗体显示在桌面

  如果没有跑不起来,请直接打开package.json,复制命令直接运行

  有没有一种超级简单的感觉

三、  使用Electron -forge遇到坑

接下来就是本人遇到的坑了:

1、    关于package.json文件的配置electronPackagerConfig,配置icon的时候,不能加后缀,因为electron-forge这个脚手架会帮你自动检测系统,自动帮你加上适合系统的icon

2、    引入的包,开发环境和正式环境都要,不然打包不成功

3、    最坑的来了,就是打包成安装包的时候,项目名称不能是中文,就是运行electron-forge make,成功后安装不了。

四、  一个Demo,已经放上码云了

https://gitee.com/aliyunjie/electron-forge-mac

五、  总结

1、    学习到了点新东西,不过用的还是很不熟悉,花了半天入门,然后后面都是跳坑里浪费时间,感觉网上资料还是有点少,很多东西都得自己去搞清楚。

2、 详细的解释可以看我发在码云上的demo

3、    转发请注明出处,谢谢!

Electron-forge应用(打包填坑)的更多相关文章

  1. Android—基于微信开放平台v3SDK,开发微信支付填坑。

    接触微信支付之前听说过这是一个坑,,,心里已经有了准备...我以为我没准跳坑出不来了,没有想到我填上了,调用成功之后我感觉公司所有的同事都是漂亮的,隔着北京的大雾霾我仿佛看见了太阳~~~好了,装逼结束 ...

  2. WebApi传参总动员(填坑)

    本以为系列文章已经Over,突然记起来前面留了个大坑还没填,真是自己给自己挖坑. 这个坑就是: (body 只能被读取一次)Only one thing can read the body MVC和W ...

  3. UiAutomator2.0升级填坑记

    UiAutomator2.0升级填坑记 SkySeraph May. 28th 2017 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.sk ...

  4. Android项目开发填坑记-so文件引发的攻坚战

    故事的最初 我负责的项目A要求有播放在线视频的功能,当时从别人的聊天记录的一瞥中发现百度有相关的SDK,当时找到的是Baidu-T5Player-SDK-Android-1.4s,项目中Demo的so ...

  5. wap2app(十)--wap2app 添加原生底部导航,添加原生标题栏,填坑

    一.添加原生标题栏 添加原生标题栏可以参照 <wap2app(六)-- wap2app的原生标题头无法隐藏>,具体如下: 1.打开 sitemap.json文件 --> page配置 ...

  6. electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动

    1.初始化node项目,生成package.json文件 npm init 2.安装electron,并保存为开发依赖项 npm install electron -D 3.根目录下新建index.j ...

  7. 使用vue开发微信公众号下SPA站点的填坑之旅

    原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...

  8. Android Studio 3.0正式版填坑之路

    原文:https://www.jianshu.com/p/9b25087a5d7d   Android Studio 3.0启动图 序言 总看别人的文章,今天尝试着自己来写一篇.在逛论坛时候,无意间发 ...

  9. Vue2.0 新手完全填坑攻略——从环境搭建到发布

    Jinkey原创感谢 showonne.yubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vu ...

随机推荐

  1. 学习canvas画布

    我们可以用画布(Canvas)绘制各种图形,下面代码是绘制的一个圆形: <!DOCTYPE html> <html> <head> <title>Can ...

  2. day3_python之函数返回值、语句形式、表达式形式

    一. 函数对象 1. 函数是第一类对象,即函数可以当作数据传递 #1 可以被引用 #2 可以当作参数传递 #3 返回值可以是函数 #3 可以当作容器类型的元素 二.返回值 return的返回值没有类型 ...

  3. Java排序算法总结

    1.冒泡排序 冒泡排序是排序算法中最基本的一种排序方法,该方法逐次比较两个相邻数据的大小并交换位置来完成对数据排序,每次比较的结果都找出了这次比较中数据的最大项,因为是逐次比较,所以效率是O(N^2) ...

  4. CSS像素设置为整数,渲染结果像素带有小数

    今天进行网页设计学习时,CSS代码设计width:300px,但实际显示像素如下图所示为199.99px. 最后发现是浏览器运用了缩放,恢复100%的缩放后,像素显示为整数.

  5. node_modules

    怎么使外部访问module,我们知道客户端的JavaScript使用script标签引入JavaScript文件,就可以访问其内容了,但这样会带来问题,最大的就是作用域相同,产生冲突问题,以至于前端大 ...

  6. activiti工作流-概述

    1       应用场景 1.1 业务流程 采购系统完成了企业的日常采购管理,包括采购单管理.采购单审核.入库.结算等模块. 用户角色包括:员工.部门经理.总经理.财务. 基本业务流程如下: 1.2  ...

  7. H3C 帧中继与水平分割(续)

  8. clone() 方法

    <html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...

  9. Python--day61--Django ORM关系的简单梳理

    models.py中的代码和数据库中的表对应

  10. Python--day40--datetime,socketserver,Threading模块分别是哪些模块的高层模块