这几天在构思项目,研究了一下Electron,记录下来. 说起WEB桌面程序,当前最火的就是Electron了. Electron的架构用一句话总结,就是一个main.js进程加上一个或数个chrome窗口,每个窗口都包含一个独立的Node.js. 这样的架构,使得这种桌面应用必须是一个(或数个)单页面应用(SPA),而这个SPA还拥有访问本地API的能力(Node.js). 一方面,程序对前端框架的依赖必然加强,想再JQuery打天下就不那么容易了:另一方面也大大加强了前端框架的能力与版图.…
WEB套打可选方案不多,理想的更少,利用免费控件Lodop+JavaScript实现精确套打,算是较为经典的选择.这种方案其实比较简单,利用一个htm文件就可以实现模板设计过程,几乎是“空手套”式的开发,但理解这几个步骤还是需要点时间,下面一步步详细演示说明: 第一步:建立一个空白的模板设计文件 把以下超文本代码复制到一个本地htm文件中: <html> <body> <object id="LODOP" classid="clsid:2105C…
HoorayOS 写了差不多快2年了,在我的坚持下也有一部分人打算着手自己也写套类似的程序,我想我可以提供一点经验. 俗话说细节决定成败,开发2年多来,我看过大大小小类似的程序不下20个,各有优点也各有缺点.或许是处女座的强迫症导致我不能容忍这些缺点在我的程序上出现,所以一直完善至今. 以下是我初步整理的几处容易被忽视的细节: 一.当浏览器改变大小时,桌面图标无法重新排序 这个细节相对比较容易被注意,不细说. 反面教材:http://www.cdesk.org/demo/demo.html 二.…
一.前言 项目本来打算采用B/S架构去做的,浏览器网址方式打开还是让用户不方便: 二.使用electron集成桌面应用 本身项目是使用vue-cli开发的,在使用electron之前,需要将本身的项目打包好后打开index.html能显示网页.因为刚接触便直接拿官方demo进行打包了. 1.克隆官方demo:git clone https://github.com/electron/electron-quick-start 2.cd electron-quick-start->npm insta…
4.2.2 Stateless(不管状态)JavaScript库 为了让开发轻松点, 使用一个JavaScript接口来和数据库交互是个好主意, 它在QML中提供了方便的方法; 在QtCreator中创建一个新的JavaScript文件 noteDB.js, 保证选择了 State Library选项; 这样使得noteDB.js用起来像一个库, 提供了stateless的helper方法; 这样,在每一个QML组件 import noteDB.js以及使用它的时候, 就仅仅有一份实例被载入和使…
3.2 把Page Item和Marker Item绑定 之前我们实现了PagePanel组件, 使用了三个state来切换Page组件的opacity属性; 这一步我们会使用Marker和MarkerPanel组件来实现页面导航; 在原型阶段, MarkerPanel组件十分简单, 没有不论什么功能; 它使用了Repeater类型来产生三个QML Item以及Marker组件作为delegate; MarkerPanel应该存储当前激活的marker(标记), 即那个被用户点击的marker;…
1.前提条件 a. 安装了node b.安装了electron c.你知道自己写的东西(js,css,html等等)放在那个文件夹(假设这个文件夹命名为 app,下面会用到)中 2.安装electron-packager a.在app文件夹中打开命令窗口(在空白处使用 shift + 鼠标右击 就可以看到) b.在命令栏中输出 npm install electron-packager -g 安装完毕后,确保在配置文件 package.json (通常放在 app/) 中的dependenice…
一.显示登陆窗口 应用程序入口点为Main方法,因此在Main方法中创建登陆窗体. 1)创建登陆窗体(登陆窗体UI已提前创建好); 2)显示窗体,以模式对话框的形式显示,并赋值给result; 3)判断窗体的返回值是否为OK,若是,则显示主窗体,(窗体的对话框结果在相应的窗体中设置,已达到逻辑处理,登陆验证的效果),否则退出程序; 具体代码如下: 二.登陆窗体数据访问方法的编写 1.准备: 1)数据访问层DAL创建:解决方案→新建项目→类库; 2)在DAL中创建管理员数据访问类SysAdminS…
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree/master/docs-translations/zh-CN 2.下载 electron-v0.36.5-win32-x64 https://github.com/atom/electron/releases/download/v0.36.5/electron-v0.36.5-win32-x64.…
研究Web桌面应用开发有一段时间了,总结了Web桌面应用开发的一些主流方式. 一.前端Style 这种方式的就是直接实现一个Web程序,再封装一个浏览器展示,相当粗暴和有效.著名的框架就是Electron和NW.js了. 代表应用程序是atom. 一般是基于node.js.也有其它语言的. 各种前端框架的拥趸是这种Style的狂热粉丝.这里就不放Demo了.贴段代码就可以感受到它的霸气侧漏. app.on('ready', function() { // 创建浏览器窗口. mainWindow…