html5 实现桌面客户端,html css js等web前端技术可以用来写windows下客户端程序?

谢邀,不是很了解这方面,但是还是要说点什么。。有错漏之处请大家指出。

豆瓣很早之前有一个叫做One Ring的开源项目,虽然已经很久没有更新(不知道是不是已经放弃了),但是可作为一个典型的学习参考范例。

OneRing是一个跨平台的桌面应用开发库,使用HTML5+CSS3制作用户界面,用Javascript编写交互逻辑,同时提供用写web后端的技术编写后台逻辑。

OneRing由框架和应用两个部分组成。框架部分通过为本地窗口内嵌一个WebKit浏览器来提供各个操作系统的桌面展现。并提供了一致的js接口。应用部分是一个Web

Server,负责应用逻辑,用html/css描述界面,用js提供用户交互。

根据hongqn大表叔的解释,做OneRing是为了使用Web技术来开发桌面应用(感觉很爽)。下面来看一下OneRing的出生迭代。

1.我们常见的Web技术是这样的:

bV2iC

2.加入App Launcher,监听本地端口,当运行程序时打开系统默认浏览器:

bV2iD

3.上面的实现有一个问题,应用还是在浏览器中运行,感觉不像本地体验,所以本地展示不能使用浏览器,封装一下浏览器,使用IE的窗体:

bV2iE

4.IE must DIE!所以所以,用webkit代替ie来做本地界面:

bV2iF

5.但是要访问系统API怎么办呢?使用onering.js:

bV2iG

6.服务端避免防火墙的annoying:

bV2iB

OneRing应用的启动流程:

应用启动,加载框架运行时库,注册应用url的访问方法(如WSGI),并调用框架的loop函数。

loop函数会访问应用的 /init URL,得到一个json数据,描述初始应用窗口的相关参数,如位置、大小、窗口属性、初始页面url等。

框架根据该数据创建窗口,并让该窗口内的浏览器访问初始页面url,渲染用户界面,然后等待UI事件。

用户在界面上操作时,可以通过超链接改变整个窗口内容,也可以使用Ajax技术更新窗口内部分内容。

应用可以让浏览器调用ONERING名字空间下的js函数,和操作系统进行交互,该名字空间由url onering://onering/onering.js 加载。

应用通过 bind(event, function) 函数监听窗口更改大小、移动等操作系统UI事件。

可以使用pub/sub机制主动推送消息给浏览器。

调用 ONERING.exit() 可以退出应用;所有窗口都关闭后也会退出应用。

解释很无力,看一个Python示例代码:

#!/usr/bin/env python

import json

import web

import onering

urls = (

'/init', 'init',

'/', 'index',

)

class init:

def GET(self):

web.header('Content-Type', 'application/json')

return json.dumps({'width': 400, 'height': 300, 'url': '/'})

class index:

def GET(self):

web.header('Content-Type', 'text/html')

return """

Hello, world!

Exit

"""

app = web.application(urls, globals())

if __name__ == '__main__':

onering.register_wsgi_app("demo", app.wsgifunc())

onering.loop("demo")

豌豆荚2.0时参考了OneRing的设计思路,重写了OneRing(豌豆荚一直说开源出来也没有开源-_-)。

豌豆荚2.0技术架构图:

bV2i6

参考OneRing的通信层,把通信层分成三个部分,一个是前端,一个是后端服务,另一个是操作系统,定义了这三个端,六个方向的通信实现的策略:

bV2i7

几个OneRing相关连接:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值