Electron(1.6.11) + koa2 仿腾讯TGP游戏登录器（一）：环境部署

最新推荐文章于 2023-05-31 14:17:18 发布

weixin_33967071

最新推荐文章于 2023-05-31 14:17:18 发布

阅读量624

点赞数

文章标签： javascript json 开发工具 ViewUI

原文链接：https://segmentfault.com/a/1190000010400045

版权

酝酿了好久想写个新版的Electron教程，奈何有点（非常）懒，并且经常被LOL吸引。。。终于下决心开搞了，要不然越堆越多的工作人生就GG了。预计的话大概需要一到两个月来完成吧，毕竟是非工作时间来写，还有LOL那个小婊砸需要我关怀。

还有，尽量不要吐槽我的代码，尤其是 css & html ,不过欢迎告知更好的写法。

项目地址：https://coding.net/u/YupegLV/...

代码我会不定期的push，但是如果没有大的新功能实现的话，就不更新教程了。

一、环境配置

1、新版的和旧版的环境配置基本一样，我用的electron-version:1.6.11，node-version:8.1.4。（截止2017-7-28）

2、关于墙的问题，最近由于xx原因，墙有点厚。推荐使用淘宝的npm镜像吧，不过 electron 的项需要特殊配置一下，参见这里。

3、推荐一个vscode插件：VersionLens，可以提示package.json 里的依赖项的最新版本

4、electron官方中文API：github

二、搞个基础的框架

1、基本的代码姿势差不多就这样

main.js 是程序主入口，index.html 为主页面。

三、一些我觉得需要写的东西

我的前端技术很渣，html只会div，所以也不着重说这块了。只说点感觉需要特别提示的东西吧。

1.jQuery的引用：

<script>
    window.$ = window.jQuery = require('./js/tools/jquery.js');
</script>

2.使区域可拖拽 css

.drag {
    -webkit-app-region: drag;
}

因为electron使用的是chrome的框架，所以css里只用-webkit就OK了。

3.关于子页面（区域5）的实现有两种实现方式。

①从服务器获取HTML文本直接添加到index.html里;
②本地写好html框架，从服务器获取json数据，动态加载数据。

两种的各有利弊，第一种办法就是传输数据量大，并且一些点击事件实现有些问题，还有就是服务器端的页面代码不好调试。第二种办法就是，页面框架被固定住了，想要更改的话只能更新软件。

再有再加，下节说服务器的搭建。