ekylin / 软件技术 / HTML5桌面应用程序开发

0 0

   

HTML5桌面应用程序开发

2019-09-29  ekylin

这段时间要写一个桌面软件,比来比去没有满意的,要么不好看,要么不好用,要么打包体积太大。所以就有了这个小项目——easy-window

easy-window是什么?

easy-window 是一个旨在简化桌面开发难度的通用窗体,它可以让你使用当前主流的HTML5技术快速地创建Windows桌面应用程序。创作桌面应用,不需要掌握QT,C++,C#,Java那些繁琐的东西,只要会创建网页就可以。同时相较于NW.jsElectron,使用方式更加简洁,体积更小(只有几M)。

软件界面可以有多绚,就看想象力了。闲话不多说,先来看看本工具可以创建哪些窗体应用吧。

应用示例

  1. 简单窗体

image
image

  1. 设置窗体图标和标题

image

  1. 限制窗体宽高

image

  1. 隐藏最大化最小化按钮

image

  1. 无边框窗体

image
image
image

  1. 不规则窗体

image
image


使用方法

如果要运行示例程序,只需下载easy-window.exe文件,samples文件夹和后缀名为.vbs的文件,运行对应的vbs文件即可。可以修改vbs文件中对应的参数调整窗体样式。
vbs参数示例说明:

Dim shell
Set shell = WScript.CreateObject("WScript.Shell") 
shell.run "easy-window.exe -url https://www.baidu.com -title 百度首页"

其中easy-window.exe是渲染窗体的主程序,-url指定了要显示的页面,-title设置窗口标题为百度首页,运行效果如下图:
image
当然,vbs文件不是必须的,可以直接在cmd控制台中运行easy-window.exe -url https://www.baidu.com -title 百度首页,效果是一样的。
更多启动参数用法请参考下方参数说明

参数说明

bool类型值只能是true或者false

参数 类型 说明
url string 网页地址,相对地址,绝对地址,远程网址均可
timeout int 等待页面加载超时时间,单位:毫秒
icon string 窗体图标路径
title string 窗体标题
minbox bool 最小化窗体按钮,默认值:true
maxbox bool 最大化窗体按钮,默认值:true
minmax bool 限定窗口缩放范围,默认值:false
border bool 窗体是否有边框,默认值:true
resizable bool 窗体是否可缩放,默认值:true
shadow bool 窗体边框是否有阴影,默认值:false
posx int 窗体初始横坐标
posy int 窗体初始纵坐标
width int 窗体宽度
height int 窗体高度
contextmenu bool 是否启用鼠标右键菜单,默认值:true
layered bool 是否是不规则窗体,默认值:false
toolwindow bool 是否是弹窗工具窗体,默认值:false
topmost bool 窗体是否置顶,默认值:false

内置扩展JS函数

内置扩展JS函数的作用是弥补Javascript在开发桌面应用时,无法调用Windows api的不足。使用这些扩展的JS函数的时候就跟调用原生的JS函数一样方便,只需要在函数前边加上external.即可。
使用示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<body>
	<button onclick="loadFile()">打开文件</button>
	<script>
		function loadFile(){
			//选择文件
			var filePath = external.openFile('所有文件|*.*|文本文件(.txt)|*.txt|');
			//读取并显示文件
			external.alert(external.readFile(filePath), '您选择的文件内容如下');
		}
	</script>
</body>
</html>

运行效果

image
image
可以看到,调用external.openFile()打开了文件选择窗口,选择文件之后,该函数返回了选择的文件路径。external.readFile()则实现了本地文件的读取。
更多函数请参见下方函数说明。

函数 说明
hitCaption() 主要用于绑定鼠标拖动窗体。比如,在无边框或者不规则窗体中,对指定html元素绑定该函数即可实现鼠标拖动该元素的功能,示例:<img src="images/ecology-heart.png" onmousedown="external.hitCaption()">,详情参见不规则窗体示例
hitMax() 最大化窗体
hitMin() 最小化窗体
close() 关闭窗体
alert(text, title) 提示框,text:提示内容,title:提示窗口标题
openFile(fileType, title) 打开文件,fileType:文件类型(所有文件|*.*|文本文件|*.txt|), title:选择文件窗口标题。参数均非必填
openDir(dir, subTitle, title) 打开目录,dir:初始目录, subTitle:子标题, title:标题。参数均非必填
saveFile(fileType, title) 保存文件,fileType:文件类型(所有文件|*.*|文本文件|*.txt|), title:窗口标题。参数均非必填
readFile(path) 读取文件,path:文件路径
writeFile(path, text) 写文件,path: 文件路径, text:文件内容
clipRead() 读取剪贴板内容
clipWrite(text) 将内容写入剪贴板,text:文本内容
getMousePos() 获取鼠标位置
getPos() 获取窗体位置
setPos(x,y,width,height) 设置窗体位置和大小,x:横坐标,y:纵坐标,width:宽度,height:高度。宽高参数可选
getScreen() 获取屏幕宽高
setIcon(iconPath) 设置窗体图标
setTitle(text) 设置窗体标题
setTopmost(state) 窗体是否置顶,state:true/false

备注

本项目主要目的在于简化桌面窗体开发,本身功能有限。如果需要更多功能,有两种方案:

  1. 用户界面使用miniblink(精简浏览器内核)做渲染,浏览器支持的大部分功能基本都支持,所以可以通过Ajax或者Websocket与其它服务器语言通信,更多功能由其他语言实现,其实就是用开发网站那一套开发桌面软件。
  2. 本项目使用aardio语言开发,您可以自行修改编译源码,然后打包,替换本项目的easy-window.exe即可。

如果你对本项目感兴趣,欢迎使用,共同探讨完善。

项目地址: https://github.com/lixk/easy-window

项目引用

  1. aardio 地址 http://www.aardio.com/

  2. miniblink 地址 https://weolar.github.io/miniblink/

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。如发现有害或侵权内容,请点击这里 或 拨打24小时举报电话:4000070609 与我们联系。

    猜你喜欢

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多