|
|
本帖最后由 不点 于 2016-9-17 13:28 编辑
用 html5 和 JS 开发本地应用程序
本人玩过很多计算机编程语言，从 VB、C、VC++、DELPHI、JAVA 一直到现在用的 Javascript 和 node.js，可以用一句话概况“多而不精”，当然这也反映了计算机的发展过程，从单机程序向网络程序逐步过渡。但在我们的工作过程中会发现，在某些情况下，操作本地资源的能力也是不可或缺的，做一个桌面软件也很有必要。那么是不是需要重新拣起 VC 或 DELPHI 呢？不说需要重新安装几个 G 的开发环境，丢下用顺手的语言，重新用另一种语言，也很不合算。那么 Javascript 可以开发桌面程序吗？答案是肯定的。在 Github 上就有一个开源的项目 node-webkit，现在已更名为 nw.js。它就可以实现这个功能。那么它是怎样实现的呢？
Nw.js 这个项目采用 webkit 内核作为界面显示的引擎。众所周知，webkit 是对 html5 支持最好的浏览器之一，我们可以用最新的 html5 技术来开发桌面软件。但考虑到安全性，webkit 不支持操作本地资源。Nw.js 有个创新，它把 node.js 集成了进来，而且让 node.js 和 webkit 的 Javascript 引擎运行在同一个进程中。这样就完全打通了前端和后端。我们完全可以用 html5 和 Javascript 来开发桌面应用软件。下面就以一个简单的功能实现为切入点来说明开发的大致过程。
首先要下载 nw.js，可以在 github 下载源码自己编译。也可以到官网下载编译好的二进制文件或者是安装文件。在 windows 环境下，当然是下载 msi 安装文件更方便。下载安装后，有这样一目录结构：
（图片略）
其中最重要的就是 nw.exe 这个可执行文件。只要编写好自己的脚本，然后把脚本拖到 nw.exe 上面即可运行，是不是非常简单呢？当然，也可以把脚本打包为可执行文件。可惜，打包后的程序体积比较庞大，想象一下，我们的程序集成了的大量功能，容易明白体积庞大是必然的。
其次，编写程序脚本。自己的脚本最好存放在一个单独的文件夹中。比如 APP。在这个文件夹中，最重要的是 package.json 文件。这个文件定义了程序的入口文件，以及窗口的样式等等，
- {
- "name": "nw-demo",
- "version": "0.0.1",
- "main": "index.html", // 入口的HTML文件
- "window": {
- "toolbar": true, // 是否显示toolbar
- "width": 800, // 窗口的宽
- "height": 500, // 窗口的高
- "frame": true
- }
- }
这是一个 JSON 格式的文本文件，我们可以自己用记事本或 notepad++ 来创建。
最后，就是编写脚本了。其实就是写网页啊，作为前端工作人员，这肯定是您最擅长的工作了。当然，因为要操作本地资源，你还得会 node.js。
在本例中，我要做一个把 Word 图文文档转换为 HTML 的软件。必须得把本地图片读取出来编码为 Base64 附加在 HTML 中。好在 html5 本身支持剪贴板，我为文本框绑定了 onpaste（粘贴）事件。以下是 index.html 的内容，它应该保存为 utf8 格式，否则在运行时，中文会显示为乱码：
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Word to HTML</title>
- </head>
- <body>
- <h1>Hello World!</h1>
- <textarea name=testInput id='testInput' rows=3 cols=80 >
- 请把含有图片的 word 文档的内容复制、粘贴到这里
- </textarea>
- <div id='wordhtml'></div>
- <!--textarea id='html_data' rows=100 cols=80 ></textarea-->
- <script>
- var s='';
- var s1='';
- var s2='';
- document.getElementById( 'testInput' ).addEventListener( 'paste', function( e ){
- var clipboardData = e.clipboardData;
- if(clipboardData.types.indexOf('text/html')!=-1){
- s=clipboardData.getData('text/html');
- // 将本地文件中的图片都转化为base64编码
- document.getElementById('wordhtml').innerHTML=s;
- var imgs=document.getElementsByTagName('img');
- //alert (imgs.length);
- for(var i=0;i<imgs.length;i++){
- imgs[ i ].onload=imgReader(imgs[ i ]);
- }
- //var tmp = document.getElementById('wordhtml').innerHTML;
- //document.getElementById('html_data').innerHTML=tmp;
- document.write(s);
- var wfile = 'word_tmp.html';
- fs.writeFileSync(wfile, s);
- alert ('转换后的 HTML 数据已经写入文件 ' + wfile);
- }
- });
- //var img_code = "";
- var k=0;
- var imgReader = function( image ){
- //alert (image.src);
- ss = 'src="file:///' + image.src.slice(8).replace(/\//g, '\\') + '"';
- k = s.indexOf(ss);
- //alert ('k=' + k + ', ' + ss);
- if (k < 0) {
- return;
- }
- s1 = s.substring(0, k + 5);
- s2 = s.slice(k + 5 + image.src.length);
- var data=base64_encode(image.src);
- console.log(data);
- image.src=data;
- s = s1 + data + s2;
- };
- var fs = require('fs');
- var os=require('os');
- function base64_encode(file) {
- file=file.slice(8); // 必须去除前面的file:///
- var head='data:image/png;base64,';
- var ext = file.substring(file.lastIndexOf('.') + 1).toLowerCase();
- console.log(ext);
- if(ext=='jpg' || ext=='jpeg'){
- head='data:image/jpg;base64,';
- }else if(ext=='png'){
- head='data:image/png;base64,';
- }else if(ext=='gif'){
- head='data:image/gif;base64,';
- }
- var bitmap = fs.readFileSync(file);
- // convert binary data to base64 encoded string
- var data= new Buffer(bitmap).toString('base64');
- return head+data;
- }
- </script>
- </body>
- </html>
关键代码在 base64_encode 中。它读取本地图片并编码为 base64 格式。
运行程序很简单：把 APP 这个文件夹往 nw.exe 上一拖，就开始运行了。
把 word 文档粘贴上去后是这样的：
（图片略）
这里的图片都是 Base64 格式附加在 HTML 文档中了。这样的文档存储在数据库中，会拖慢数据库的响应，但图片能够直接嵌入网页，也有好处。
|
|
IP卡
狗仔卡
发表于 2016-9-11 19:20:37
收藏
支持
反对
提升卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
