从零开始使用Electron + jQuery开发桌面应用


从零开始使用Electron + jQuery开发桌面应用

Electron介绍
现如今,用 HTML、JavaScript、CSS、Node.js 写桌面应用早已不是什么新鲜的事了,作为一名前端,能够使用自己熟悉的语言,快速实现自己想要的桌面应用,是件很让人兴奋的事。
目前常见的有 NW、heX、Electron。今天,就来简单的上手一下 Electron。

Electron 是什么?
Electron 是一款可以利用 Web技术 开发跨平台桌面应用的框架,最初是 Github 发布的 Atom 编辑器衍生出的 Atom Shell,后更名为 Electron。

Electron 能做什么?
Electron 内置了 Chromium 内核 和 Node,因此可以使用 HTML 和 CSS 来实现应用的 GUI 界面,用 JavaScript 调用丰富的原生 API 实现桌面应用。你也可以将 Electron 看作是一个由 JavaScript 控制的一个小型的 Chrome 内核浏览器。

由于内置的 Chromium 内核 和 Node, 因此我们不需要关心前端的兼容问题,你甚至可以写 -webkit- only 的代码; 也不需要关心一些需要编译的 Node 模块兼容问题,因为 Node 版本是固定的。因此,用 Electron 来编写跨平台应用程序是非常合适的。

Electron + jQuery
得知可以直接把web网站打包成桌面应用程序,我顿时乐开了花。赶紧去助赢官网查了资源,工欲善其事,必先利其器。首先得把工具down下来。
手上刚好有个web网站,我就拿他试水吧。不过我没有照官网的教程。我对前端自认为是过关的,我就略过了js,css等等
一个最简单的electron项目包含三个文件, package.json, index.html, main.js
为了把mvc网站嵌入到桌面应用中去,在index.html里面添加我mvc的锚文本。刷新electron,点击锚文本就能看到网站内容了,心情好激动呀。很快这刺激就过了,点击事件都不能正常响应。打开调试看看吧,console里面提示说$没有定义。明明网站就有引用,为什么还会提示这jb问题了。electron是不是傻了。

回想一下,electron是基于Chromium环境依赖于Node.js,那应该是引用的姿势不对了。前两天看jquery源码开头就有一段说是提供给node.js使用的,为什么在我手上就是不能正常使用了。带着这个疑问去查了查相关资料,发现引用jquery前得告诉jquery我现在的环境是Node.js。


后面jquery开发就和平常写代码一样了。

优质内容筛选与推荐>>
1、数据库-链式查询
2、Peeking Iterator 解答
3、阿里云移动研发平台EMAS,是如何连续5年安全护航双11的?
4、算法:排序
5、关于有锁iPhone的常识(转载)


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号