酝酿了好久想写个新版的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数据,动态加载数据。
两种的各有利弊,第一种办法就是传输数据量大,并且一些点击事件实现有些问题,还有就是服务器端的页面代码不好调试。第二种办法就是,页面框架被固定住了,想要更改的话只能更新软件。