Electron 跨平台桌面开发 一波尝鲜体验!

原创 DarkNight 随笔 javasccript 276阅读 2018-08-27 15:02:06 举报

本文主要以学习和体验为主

Electron文档地址: https://electron.org.cn/

Electron 干嘛的?

JavaScript, HTML 和 CSS 构建跨平台的桌面应用等等桌面端软件都是做为前端Visual Studio编辑器 应该不会陌生, 是不是很强大它就是Electron 开发的例如 Code、Slack 、Atom ..

nwjs 和 electron

electron 前身 nwjs 后来发现作者是同一个人当我接触的时候electron 然后似乎有一种似曾相识的赶脚,前端开发桌面程序这个概念已经出现有一段时间了,大约在2年前在github上看到一个用nwjs 开的一个桌面程序的音乐播发器那时候也就随便看了下项目的源码记得那个项目只能运行在windiw 64位的系统 ,同样 nwjs Electron 提供了一个能通过 JavaScript 和 HTML 创建桌面应用的平台同时集成 Node 来授予网页访问底层系统的权限。

基本

安装 vue-cli 和 脚手架样板代码和我们平常初始化一个 vue-cli 项目一样

安装依赖并运行你的程序
这样就初始化了一个Electron的项目了 这个是官方的例子

接下来奉上自己写的一个demo 与大家一起分享!

码云地址:https://gitee.com/BlockShow/Electron.git

将项目clone下来 就可以直接跑了

界面UI:

就做了2个功能(备注 可用你们网易云真实账号登入)
1.登入
2.歌曲搜索


目录结构:


跨域问题

在electron中并没有发现 http通信代理的配置信息难道只能在服务端去处理么?
目前我的想法就是在开发阶段在本地配置nginx做接口转发,或者在服务的器处理跨域问题, 有那么大神可否知道告诉我一下。


后台使用使用网易云的接口

github地址: https://github.com/Binaryify/NeteaseCloudMusicApi

自己本地装个node就可以跑起来 或者部署在你的服务器上 最好安装一个pm2 来跑node 这样来开启守护进程避免每次都要来重启node服务

全局安装pm2。

然后进入这个目录用pm2 来运行app.js 就可以来

打包:

一套代码适用多个平台是不是很过瘾,还有就是打包编译时间要很久很久。。需要耐心等待而且打包出来的app体积也非常大
分别打包对应2个平台


结束:

本次学习主要还是以体验为主上手难度不算大,必然还有一些坑坑洼洼的东西没有去碰,算是对桌面级应用开发的一波尝鲜吧!做为一个前端开发者去做桌面级应用是否有点跑偏了,开发桌面级应用不应该都是C 或者C++ 这些大佬去做的事么,可是当你进入官网 看到JavaScript, HTML 和 CSS 构建跨平台的桌面应用,这不是赤裸裸的在诱惑你么,你无疑在感叹现在的js如何如此强大都渗透在桌面级应用去了,这些年来就感觉js什么事情都想干什么事情都想搞,也诠释了近年来所谓端大前端叫法,学习就是不断更新迭代过程我和大家一样也一个有理想抱负的前端攻城狮!吼!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复