Metrics
0
Watch 25 Star 85 Fork 19

小狄子 / Electron快速开发框架NodeJS

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
需要用Electron做多页应用但是不想学vue、Angular或者React?试试这个框架吧,自己封装了路由和传参,便捷的多页应用开发框架。 持续学习&改进中~ 欢迎提建议,如果不错记得给个star~ spread retract

  • JavaScript 62.5%
  • HTML 28.0%
  • CSS 9.4%
  • Other 0.1%
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

Electron 快速开发框架 doc V1.0

==Author:小狄子 diyuchen@esunny.cc==

快速开始

  1. npm i 安装依赖
  2. 在config/appconfig.json中修改"firstview": "./view/app"为你的应用程序入口视图名
  3. 在view/使用html编写你的代码并引入【视图名Controller】
  4. 在controller/视图名Controller.js文件中编写你的代码逻辑,jq和nodejs可以混用哦
  5. 按需引用service/、common/和model/中的内容
  6. 需要跳转视图?在Controller文件中引入BaseController后调用BaseController的openNewWindow方法
  7. 需要在新的视图接收参数?同样引入BaseController后调用BaseController的getWindowArgs
  8. 没有需要的方法?到了你自己动手的时候了!
  9. Enjoy Coding ~

框架来源

前段时间,我在单位工作过程中,要求完成一个客户端应用程序,但是我并不会QT或者JavaSwing之类的图形界面开发,C#曾经学过一些WinForm和WPF但是都早已忘记,且我的前端设计水平简直就是渣渣,所以就想到了之前在学校曾经接触过的Electron跨平台应用开发程序,用HTML,Css及JavaScript构建跨平台桌面应用程序。

准备开始,我跟着书(《跨平台桌面应用开发:基于Electron与NW.js》作者:(丹麦)Paul B. Jensen(保罗 B. 詹森))尝试编写一些简单的例子,书中的例子还基本易懂,并且可以运行,这是个良好的开端,但是过了一段时间我意识到一个问题,书中的例子都是单页应用,即只有一个index.html文件,或者说只有一个渲染窗口,这个似乎不太符合我的预期。

那么就先看看有没有别人的轮子吧,还别说真的有,但是似乎都是使用诸如React,AngularJs,Vue等主流前端框架进行开发的,这就有点泪奔了,我好菜啊,这些也不会,诶...

学框架来不及,但是应用又要马上开发,磨刀不误砍柴工,我就先给自己设计一套框架吧,思考了一下主流框架都干了哪些事情,我需要做哪些事情,进行了设计。

框架适用场景

如果您的应用不是单页应用而是多页应用,且多页应用之间需要传递参数,比如一个列表页的列表项点击之后可以打开详情,需要传递列表项ID,这样的情况,就适合使用我的框架,我重写了简单的路由,封装了界面加载方法和路由传参,开发者只需要调用openNewWindow(view,args)方法即可打开新的路由,框架自动的处理了主进程和渲染进程间的通信,当然你也可以任意添加和修改程序逻辑。

如果你希望自己扩展框架的功能,没问题,框架的各个组件全部都是松耦合的,你完全可以在任意层级添加任意组件以任意可行的写法写任意代码,(当然我不保证你写的代码能正常工作),如果你需要,我提供了几个简单的Service的例子,可以参考我的例子来。

框架设计思想

框架的设计思想为MVC加Service方式,组合而成。 MVC是老生常谈,但是我这里似乎不能完全意义上的称做MVC,只是有MVC结构罢了,(没错MVC也是松耦合且可以按需调整),Model用来专注干数据或者业务该干的事情,(你也可以放在Controller做,没人阻止你这么干)。

框架整体上分为MVC、common、service和process四大结构,common中有Logger,Config,Router三个组件,分别用于日志,配置和路由。service自己封装了一些诸如消息通知,http请求,用localStorage本地化存储等服务,开发者可以自行扩展,并按需引用,process中主要针对主进程和渲染进程分别写了MainProcessHelperRendererProcessHelper,用来辅助主进程和渲染进程的通信,同时MainProcessHelper也负责在electron启动时启动渲染窗口。

框架约定

视图写在view文件夹中,控制器写在Controller文件夹中,建议命名为类似于【DemoController】,控制器代码需要在html用通过script标签的src属性引入,在Controller中可以按需通过require引入服务及common组件,在Controller中可以使用jquery,或者开发者可以自行扩展。

建议: 在每个Controller中引用BaseController,可以方便使用openNewWindow方法 在每个Controller中引用RendererProcessHelper,可以方便的像主进程通知消息,方便的注册回调函数。

框架引用的第三方组件

  • log4js 日志 https://www.npmjs.com/package/log4js
  • jquery DOM操作(可以按需引入) http://jquery.com/
  • unirest 轻量级http请求库 https://unirest.io/
  • art-template 前端模板框架 https://github.com/aui/art-template
  • electron-notifications 消息通知 https://github.com/blainesch/electron-notifications
  • AdminLTE 后台管理系统界面模板 https://adminlte.io/

没有解决你的问题?

欢迎自行扩展或者邮件联系我,如果你有更棒的点子也欢迎交流~ 大佬们放过我这个渣渣吧,只是还没空学主流框架QAQ后面一定学!

Comments ( 6 )

You need to Sign in for post a comment

Help Search

183227_9af5e6a8_1826025 111910_4d91f001_1826025