nwjs_nwjs停止工作 - CSDN
精华内容
参与话题
  • nwjs-sdk 完整版

    2020-07-30 23:32:07
    nwjs-sdk 完整版 可以打包网页各种打包 nwjs-sdk 完整版
  • nwjs-0.34.0-win32

    2020-07-30 23:31:54
    nwjs使用HTML5、CSS3,JS开发跨平台的桌面应用程序,国内的下载速度太慢
  • Nw.js入门文档

    千次阅读 2019-09-24 16:29:18
    图片太多,带图片的文档可以去我的csdn下载找到。 目录 技术介绍 4 技术介绍 4 1 开发环境搭建及开发工具 5 1.1开发环境搭建 5 1.2 开发工具介绍 7 2 项目结构及配置文件 8 2.1 项目目录结构 8 ...4 常...

    图片太多,带图片的文档可以去我的csdn下载找到,或者有道云:http://note.youdao.com/noteshare?id=fd450e1a5ebd05e395ca02e18ab6a648&sub=05FDFAF28F9D46F9A2223810617F19FC

    目录

    技术介绍 4
    技术介绍 4
    1 开发环境搭建及开发工具 5
    1.1开发环境搭建 5
    1.2 开发工具介绍 7
    2 项目结构及配置文件 8
    2.1 项目目录结构 8
    2.2 配置文件 9
    3 生成exe及跨平台打包 14
    3.1 Hello Word 14
    3.2 生成exe文件 15
    3.3 跨平台打包 17
    4 常用功能 19
    4.1 自定义窗口 19
    4.2 窗口相关功能 19
    4.3 快捷键 21
    4.4 开机自启动 22
    4.5 配置菜单项 23

    技术介绍

    技术介绍
    (1)NW.JS简介

    NW.js (原名 node-webkit)是一个结合了 Chromium 和 node.js 的应用。主要用于跨平台轻量级桌面应用开发,运行环境包括32位和64位的Window、Linux和Mac OS。运行时,通过它可以用 HTML 和 JavaScript 编写原生应用程序。它还允许开发者从 DOM 调用 Node.js 的模块,实现了一个用所有 Web 技术来写原生应用程序的新的开发模式,而且,开发者可以很容易的将一个web应用打包成原生应用。

    (2)NW.JS的优缺点

    NW.js的优点:
    – 以网络最流行的技术编写原生应用程序的新方法
    – 基于HTML5, CSS3, JS 而编写
    – 完全支持nodejs所有api及第三方模块
    – 良好的性能:node和webkit运行在相同的线程,对象在同一堆可以相互调用
    – 容易打包和分发
    – 支持运行环境包括32位和64位的Window、Linux和Mac OS

    NW.js的缺点:
    – 因为nwjs基于chromium,所以初始内存占用率较高

    1 开发环境搭建及开发工具

    1.1开发环境搭建

    1、Node.js

    到Node.js官网下载Node.js安装包并安装

    安装之后可在cmd中使用 node -v 检测是否安装成功

    2、NW.js

    到NW.js官网下载,有两个版本,一个是Normal版本,一个是SDK版本,如果是做开发测试,则建议选择下载SDK版本,SDK版本可以使用开发工具进行debug等。

    下载完成之后,解压至本地目录

    1.2 开发工具介绍

    1、Enigma Virtual Box

    Enigma Virtual Box是软件虚拟化工具,它可以将多个文件封装到应用程序主文件,从而制作成为单执行文件的绿色软件。它支持所有类型的文件格式,虚拟化后的软件不释放任何临时文件到您的硬盘,文件模拟过程仅在内存运行。

    到官网下载Enigma Virtual Box安装包并安装(注意下载第三个)

    2、webstorm或vscode等

    2 项目结构及配置文件

    2.1项目目录结构

    locales文件夹是区域语言设置
    d3dcompiler_47.dll是软件和游戏运行的重要动态链接库
    ffmpeg.dll是谷歌浏览器核心引擎升级后用来支持视频和音频播放的动态链接库
    icudtl.dat是一个存储基本数据信息的文件
    libEGL.dll是实现webGL必须用到的动态链接库
    libGLESv2.dll是实现GPU必须用到的动态链接库
    nw.exe主要应用
    nw.pak顾名思义,核心数据的压缩包
    nwjc.exe用于打包时项目加密使用

    我们需要自己创建一个新的文件夹 helloworld作为项目代码根目录,在根目录下有package.json(程序的配置文件)和index.html(可以是任意名称,应用的启动页面);assest存放应用的样式、脚本、和资源文件(html、图片等);node_modules存放node.js的扩展组件。这只是一个通用的基本组织结构,实际项目的组织结构,不必一定按照此结构进行搭建,如项目使用的是js模块化编程require框架的。最终的组织结构以适应实际项目为准,但文件package.json和index.html必须放在根目录下。

    2.2 配置文件
    nw在启动应用程序时,首先要读取package.json文件,初始化基本属性,下面我们看看package.json的完整参数。每个参数配置都标有注释。

    {
        /**指定程序的起始页面。*/
        "main": "index.html",
        /**字符串必须是小写字母或者数字,可以包含.或者_或者-不允许带空格。name必须全局唯一。*/
        "name": "demo",
        /**程序描述*/
        "description": "demo app of node-webkit",
        /**程序版本号*/
        "version": "0.1.0",
        /**关键字*/
        "keywords": ["demo","node-webkit"],
        /**bool值,如果设置为false,将禁用webkit的node支持。*/
        "nodejs": true,
        /**
        * 指定一个node.js文件,当程序启动时,该文件会被运行,启动时间要早于node-webkit加载html的时间。
        * 它在node上下文中运行,可以用它来实现类似后台线程的功能。
        * (不需要可注释不用)
        */
        //"node-main": "js/node.js",
        /**
        * bool值。默认情况下,如果将node-webkit程序打包发布,那么只能启动一个该应用的实例。
        * 如果你希望允许同时启动多个实例,将该值设置为false。
        */
        "single-instance": true,
        /**窗口属性设置 */
        "window": {
            /**字符串,设置默认title。*/
            "title": "demo",
            /**窗口的icon。*/
            "icon": "link.png",
            /**bool值。是否显示导航栏。*/
            "toolbar": false,
            /**bool值。是否允许调整窗口大小。*/
            "resizable": true,
            /**是否全屏*/
            "fullscreen": false,
            /**是否在win任务栏显示图标*/
            "show_in_taskbar": true,
            /**bool值。如果设置为false,程序将无边框显示。*/
            "frame": true,
            /**字符串。窗口打开时的位置,可以设置为“null”、“center”或者“mouse”。*/
            "position": "center",
            /**主窗口的的宽度。*/
            "width": 800,
            /**主窗口的的高度。*/
            "height": 670,
            /**窗口的最小宽度。*/
            "min_width": 400,
            /**窗口的最小高度。*/
            "min_height": 335,
            /**窗口显示的最大宽度,可不设。*/
            "max_width": 800,
            /**窗口显示的最大高度,可不设。*/
            "max_height": 670,
            /**bool值,如果设置为false,启动时窗口不可见。*/
            "show": true,
            /**是否在任务栏显示图标。*/
            "show_in_taskbar":true,
            /**
             * bool值。是否使用kiosk模式。如果使用kiosk模式,
             * 应用程序将全屏显示,并且阻止用户离开应用。
             * */
            "kiosk": false
        },
        /**webkit设置*/
        "webkit": {
            /**bool值,是否加载插件,如flash,默认值为false。*/
            "plugin": true,
            /**bool值,是否加载Java applets,默认为false。*/
            "java": false,
            /**bool值,是否启用页面缓存,默认为false。*/
            "page-cache": false
        }
    }```
    在上面的配置中,main和name是必须的属性。
    下面主要讲讲几个比较难理解的参数配置。
    (1)"node-main"配置:指定一个js文件,该js文件是启动程序时最早运行文件,在node-main脚本中还可以访问全局的“window”对象,它指向DOM窗口,但是如果页面导航发生变化,访问到的window对象也会发生变化。因为它执行时间要早于DOM加载,所以要等页面加载完毕,才能使用“window”对象。同时,在DOM页面中,可以通过process.mainModule来获取node-main信息。
    (2)"single-instance"配置:简单地说,是指是否允许同时打开多个nw应用。
    (3)"kiosk"配置:如果该配置设为ture,则显示为全屏模式并屏蔽关闭按钮,即该显示器将会一直停留在nw应用的显示界面,类似于银行的排队等待办理业务的取票机界面。
     
     
    还有一些不经常使用的参数如下:
    user-agent
    应用发起http请求时,使用的user-agent头信息。下列占位符可以被替换:
    %name: 替换配置中的name属性
    %ver: 替换配置中的version属性
    %nwver: 被node-webkit版本信息替换.
     %webkit_ver: 被WebKit 引擎的版本信息替换.
    %osinfo: 被 操作系统和 CPU 信息 替换,在浏览器的 user agent 字符串中可以被看到.
    示例配置:
    

    {
    “user-agent”: “测试 %ver %nwver %webkit_ver windows7” /* 替换占位符内容即可 */
    }

    js-flags
    string类型,传递给js引擎(V8)的参数。例如,想启用Harmony Proxies和 Collections功能,可以使用如下配置方式:
    

    {
    “js-flags”: “–harmony_proxies --harmony_collections”
    }

    inject-js-start / inject-js-end
    string 类型。指定一个js文件。
    对于inject-js-start,该js文件会在所有css文件加载完毕,dom初始化之前执行。
    对于inject-js-end,该js文件会在页面加载完毕,onload事件触发之前执行。
    snapshot
    string类型,应用程序的快照文件路径。包含编译的js代码。使用快照文件可以有效的保护js代码。后续文章会详细介绍。
    
    dom_storage_quota
    int类型,dom 存储的限额(以自己为单位)。建议限制为你预想大小的2倍。
    no-edit-menu
    bool值,Edit菜单是否显示。仅在Mac系统下有效。
    maintainers
    软件维护者信息,是一个数组,每个维护人的信息中,name字段是必须字段,其他两个(email和web)是可选字段。示例如下:
    

    {
    “maintainers”:[{
    “name”: “Bill Bloggs”,
    “email”: “billblogs@bblogmedia.com”,
    “web”: “http://www.bblogmedia.com”,
    }]
    }

    contributors
    贡献者信息,格式同maintainers,按照约定,第一个contributor是该应用的作者。
    bugs
    提交bug的url。可以是“mailto:”或者“http://”格式。
    licenses
    一个数组,可以包含多个声明。每个声明包含“type”和“url”两个属性,分别指定声明的类型和文本。示例如下:
    

    {
    “licenses”: [{
    “type”: “GPLv2”,
    “url”: “http://www.example.com/licenses/gpl.html”,
    }]
    }

    3    生成exe及跨平台打包
     
    3.1 Hello World
    在index.html写入最简单的Hello World!
    
    Hello World!

    Hello World!

    ``` 在package.json 写入最简单的配置 `{ "name": "helloworld", "version": "0.0.1", "main": "index.html" }``` 在cmd中进入到项目目录(注意是nw项目目录,不是helloworld目录) 然后执行 nw helloworld命令,就可以运行了。 注:有的可能会提示报错,如下图。

    具体原因不明,可能是因为cmd的原因,因为上图是Windows PoweShell,并不是原机的cmd。

    解决办法如下:
    将 nw 命令替换为 .\nw 。
    .\nw helloword

    运行成功效果如下:

    3.2 生成exe文件
    1、压缩helloworld文件夹中的所有文件,保存为ZIP格式,
    并将此文件更名为 helloworld.nw

    2、将helloworld.nw从helloworld文件夹中复制出来,保证helloworld.nw和nw.exe在同一目录下。

    3、在此目录下执行

    copy / b nw.exe + helloworld.nw helloworld.exe
    

    然后发现目录下多了 helloworld.exe 双击即可运行。

    但将他换到其它目录就不可以执行了,因为换到其它目录找不到nwjs包内的依赖文件,所以需要跨平台打包。

    3.3 跨平台打包
    打开 Enigma Virtual Box ,然后在 Enter Input File Name 处选择上一步生成的 helloworld.exe 文件,Enter Output Name 可以默认;
    之后再点击下面的 Add 按钮,将 nwjs 文件夹(名称不一定是 nwjs ,就是最开始第一步 NW.js 环境的那个文件夹)下除 nw.exe 和 helloworld.nw 以及 helloworld.exe 之外的所有文件加载上(注意包括文件夹,按如下方法添加),然后点击 Process ,等待执行成功即可,这时候会在相应的路径下生成一个新的 .exe 文件(我们暂且叫做 helloworld_boxed.exe),此时的 helloworld_boxed.exe 文件即可在任意的 Windows 环境下运行了。

    4 常用功能

    4.1 自定义窗口
    由于原程序的窗口边框很古老,我们想要个性化的窗口边框,如下图:

    1、 创首先要在package.json中配置frame为false,表示隐藏默认的窗口

    2、 然后我们可以在html中自己编写一个header充当边框(此处不贴代码了)

    3、然后配置各按钮的功能,比如窗口最大化、最小化、关闭等(详见4.2)

    4.2 窗口相关功能

    1、全屏和取消全屏
    和全屏有关的三个api:
    Window.enterFullscreen()
    该api使整个窗口进入全屏状态。

    Window.leaveFullscreen()
    使窗口退出全屏状态。

    Window.toggleFullscreen()
    逆转窗口的全屏状态。

    示例:
    新建fullscreenhtml文件。

    fullscreen.html 内容如下:

    <html>
    <head>
    <title>测试node-webkit 全屏api</title>
    <meta charset="utf-8" />
    </head>
    <body >
    <button id="full"> 全屏</button>
    <button id="exitFull">退出全屏</button>
    <div>
    </div>
    <script>
    var gui = require('nw.gui');
    var win = gui.Window.get();
    var fullBt = document.querySelector('#full');
    fullBt.addEventListener("click", function (evt) {
    win.enterFullscreen();
    }, false);
    var exitBt = document.querySelector('#exitFull');
    exitBt.addEventListener("click", function (evt) {
    win.leaveFullscreen();
    }, false);
    </script>
    </body>
    </html>
    

    代码很简单,分别绑定了两个button的事件,用来全屏和退出全屏

    2、创建托盘图标

    <script>
    var isShowWindow = true;
    // Load native UI library
    var gui = require('nw.gui');
    var win = gui.Window.get();
    var tray = new gui.Tray({
    title: '测试软件',
    icon: '2655716405282662783.png' 
    });
    tray.tooltip = '点此打开';
    //添加一个菜单
    var menu = new gui.Menu();
    menu.append(new gui.MenuItem({ type: 'checkbox', label: '选择我' }));
    tray.menu = menu;
    //click事件
    tray.on('click', function() {
    if(isShowWindow){
    win.hide();
    isShowWindow = false;
    }else{
    win.show();
    isShowWindow = true;
    }
    });
    </script>
    

    3、 窗口最大化、最小化、关闭

    $(".minimize-win").click(function () {//窗口最小化到托盘
    win.hide();
    });
    $(".min-bottom-taskbar").click(function () {//最小化到底部任务栏
    win.minimize();
    });
    $(".maximize-win").click(function () {//窗口最大化
    win.maximize();
    });
    $(".close-win").click(function () {//窗口关闭
    win.close();
    });
    

    4.3 快捷键

    <script>
    var gui = require('nw.gui');
    var option = {
    key : "Ctrl+Shift+A",
    active : function() {
    console.log("Global desktop keyboard shortcut: " + this.key + " active.");
    },
    failed : function(msg) {
    // :(, fail to register the |key| or couldn't parse the |key|.
    console.log(msg);
    }
    };
    var shortcut = new gui.Shortcut(option);
    gui.App.registerGlobalHotKey(shortcut);
    </script>
    

    4.4 开机自启动
    开机自启动使用到 startOnBoot.js
    startOnBoot.js 代码如下:

    let WinReg = require('winreg');
    let startOnBoot = {
    enableAutoStart: function (name, file, callback) {
    let key = getKey();
    key.set(name, WinReg.REG_SZ, file, callback || noop);
    },
    disableAutoStart: function (name, callback) {
    let key = getKey();
    key.remove(name, callback || noop);
    },
    getAutoStartValue: function (name, callback) {
    let key = getKey();
    key.get(name, function (error, result) {
    if (result) {
    callback(result.value);
    } else {
    callback(null, error);
    }
    });
    }
    };
    let RUN_LOCATION = '\\Software\\Microsoft\\Windows\\CurrentVersion\\Run';
     
    function getKey() {
    return new WinReg({
    hive: WinReg.HKCU, //CurrentUser,
    key: RUN_LOCATION
    });
    }
    function noop() {}
    module.exports = startOnBoot;
    

    使用时如下(因为开机自启动一次后就失效,所以我选择使用localstorage存储状态):

    <script>
    let startOnBoot = require('./assest/js/startOnBoot.js');
    $(".self-starting").click(function () {//点击开机自启动
    if (window.localStorage.selfStart) {
    if (window.localStorage.selfStart === "1") {
    startOnBoot.disableAutoStart('<写入注册表的key>');
    window.localStorage.selfStart = "0";
    } else {
    startOnBoot.enableAutoStart('<写入注册表的key>',   process.execPath);
    window.localStorage.selfStart = "1";
    }
    } else {
    window.localStorage.setItem('selfStart',"1");
    startOnBoot.enableAutoStart('<写入注册表的key>', process.execPath);
    }
    });
    </script>
    

    4.5 配置菜单项
    创建menuDemo.html
    menuDemo.html代码如下:

    <html>
    <head>
    <title>menuDemo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body >
    <h1>menu api 测试</h1>
    <script>
    // Load native UI library
    var gui = require('nw.gui');
    var win = gui.Window.get();
    //创建window menu
    var windowMenu = new gui.Menu({ type: 'menubar' });
    var windowSubmenu = new gui.Menu();
    var subMenuItem = new gui.MenuItem({ label: '子菜单项' });
    windowSubmenu.append(subMenuItem);
    windowMenu.append(
    new gui.MenuItem({ label: '子菜单', submenu: windowSubmenu })
    );
    win.menu = windowMenu;
    // Create an empty menu
    var menu = new gui.Menu();
    // Add some items
    menu.append(new gui.MenuItem({ label: 'Item A' }));
    menu.append(new gui.MenuItem({ label: 'Item B' }));
    menu.append(new gui.MenuItem({ type: 'separator' }));
    menu.append(new gui.MenuItem({ label: 'Item C' }));
    // Remove one item
    menu.removeAt(1);
    // Popup as context menu
    menu.popup(10, 10);
    // Iterate menu's items
    for (var i = 0; i < menu.items.length; ++i) {
    var element = document.createElement('div');
    element.appendChild(document.createTextNode(menu.items[i].label));
    document.body.appendChild(element);
    }
    </script>
    </body>
    </html>
    

    最后展示个小Demo界面


    觉得有帮助的小伙伴右上角点个赞~

    在这里插入图片描述

    扫描上方二维码关注我的订阅号~

    展开全文
  • NW.js 简介与使用

    千次阅读 2019-01-31 09:40:19
    最近接触到一款非常好的支持node.js项目引擎NW.js, 使用nw.js的场景: 1、产品需要桌面版、网络版两个版本,希望用一套代码搞定,方便维护。 2、需要使用node.js的网络服务器功能。 3、希望跟随node.js和chrome...

    最近接触到一款非常好的支持node.js项目引擎NW.js,

    使用nw.js的场景:

    1、产品需要桌面版、网络版两个版本,希望用一套代码搞定,方便维护。

    2、需要使用node.js的网络服务器功能。

    3、希望跟随node.js和chrome的发展,受到它们的技术支撑。

    4、产品跨平台。

    简介

    (1)以网络最流行的技术编写原生应用程序的新方法

    (2)基于HTML5, CSS3, JS and WebGL而编写

    (3)完全支持nodejs所有api及第三方模块

    (4)可以使用DOM直接调用nodejs模块

    (5)容易打包和分发

    (6)支持运行环境包括32位和64位的Window、Linux和Mac OS

     

    使用方法如下:

    一、下载nw

    1.下载 NW.js(官网:http://nwjs.io/)

    这里面normal这个算是运行时吧,sdk那个是一些工具箱,建议都下下来~

    https://nwjs.io/downloads/

    2.下载 Enigma Virtual Box(官网:http://enigmaprotector.com/)

    二、配置 package.json 文件

    {
      "name": "nw-demo",
      "version": "0.0.1",
      "main": "index.html"
    }

    更多的可用如下:

    复制代码

    {
      "main": "app/index.html", 
      "name": "WeixinMenuEditor",
      "description": "使用nw.js封装的一个微信公众号菜单编辑器App",
      "version": "0.0.1",
      "keywords": [ "微信", "菜单编辑器" ],  
      "window": {
        "title": "微信菜单编辑器",
        "icon": "app/static/img/weixin_logo.jpg",
        "toolbar": true,
        "frame": true,
        "width": 1008,
        "height": 750,
        "position": "center",
        "min_width": 400,
        "min_height": 200
      },
      "webkit": {
        "plugin": true,
        "java": false,
        "page-cache": false    
      },
      "chromium-args" :"-allow-file-access-from-files"
    }

    复制代码

     

    • title : 字符串,设置默认 title。
    • width/height : 主窗口的大小。
    • toolbar : bool 值。是否显示导航栏。
    • icon : 窗口的 icon。
    • position :字符串。窗口打开时的位置,可以设置为“null”、“center”或者“mouse”。
    • min_width/min_height : 窗口的最小值。
    • max_width/max_height : 窗口显示的最大值。
    • resizable : bool 值。是否允许调整窗口大小。
    • always-on-top : bool 值。窗口置顶。
    • fullscreen : bool 值。是否全屏显示。
    • show_in_taskbar : 是否在任务栏显示图标。
    • frame : bool 值。如果设置为 false,程序将无边框显示。
    • "chromium-args" :"-allow-file-access-from-files" 相当于给谷歌浏览器添加启动参数一样,这行代码允许angularjs直接访问本地json文件。

    三、生成exe

    项目目录如下:

     

    将html项目压缩成zip,并改名为nw,输入以下命令

    copy /b nw.exe+app.nw firstApp.exe

    四、打发包发布

    打开 Enigma Virtual Box 程序(enigmavb.exe),界面应该是这样的:

    然后在 Enter Input File Name 处选择上一步生成的 test.exe 文件,Enter Output Name 可以默认;

    之后再点击下面的 Add 按钮,将 nwjs 文件夹(名称不一定是 nwjs ,就是最开始第一步 NW.js 环境的那个文件夹)下除 nw.exe 和 test.nw 以及 test.exe 之外的所有文件加载上,然后点击 Process ,等待执行成功即可,这时候会在相应的路径下生成一个新的 .exe 文件(我们暂且叫做 newtest.exe),此时的 newtest.exe 文件即可在任意的 Windows 环境下运行了,你可以拷贝给你的小伙伴去 Show 一下。

    下面是nw使用过程中的一些坑

     

     

    1.如果只希望当前应用获取焦点才执行快捷键,看看这个库用js设置快捷键

    复制代码

    // 加载本地ui库
        var gui = require('nw.gui');
    
        var option = {
            key: "Ctrl+R",
            active: function () {
                alert("全局快捷键" + this.key + "按下");
            },
            failed: function (msg) {
                //创建快捷键失败
                alert(msg);
            }
        };
    
        // 创建快捷键
        var shortcut = new gui.Shortcut(option);
    
        // 注册全局快捷键
        gui.App.registerGlobalHotKey(shortcut);
    
        // 解除注册,在应用结束的时候执行
        gui.App.unregisterGlobalHotKey(shortcut);

    复制代码

    2.nw.js不能对页面多次刷新,各种不正常,这是由于刷新页面后重新加载js文件对变量重新赋值引起的bug。 解决方案

    nw.js 读取和保存文件

    复制代码

    <html>
    
    <head>
        <meta charset="utf-8"/>
        <title>nw.js实现文件读写</title>
    </head>
    
    <body>
    
        <input  id="readFile" type="file" >读取文件</input>
    
         <!-- 默认文件名为filename.html -->
         <input id="writeFile" nwsaveas="filename.html"  type="file">保存文件</input>
         <p></p>
    
         <script>
            //nw.js提供的读写文件模块
            var fs = require("fs");
            //读文件
            var chooser = document.querySelector('#readFile');
            chooser.addEventListener("change", function (evt) {
                   //用户选择的文件
                   var filePath = this.value.toString();
                   document.querySelector("p").innerHTML = "读取文件从" + filePath;
                   fs.readFile(filePath, function (err, data) {
                       if (err) {
                           layer.msg("读取文件失败! :" + err.message);
                           return;
                       } else {
                           console.log(data);
                           alert(data);
                       }
                   })
               });
    
            //写文件
            chooser = document.querySelector('#writeFile');
            chooser.addEventListener("change", function (evt) {
                   //用户选择的文件
                   var filePath = this.value.toString();
                   document.querySelector("p").innerHTML = "写入文件到:" + filePath;
                   //把hello写入文件
                   fs.writeFile(filePath, "Hello!\n", function (err) {
                       if (err) {
                           alert("保存失败!");
                       }
                   });  
               });
         </script>
    
    </body>
    </html>

    复制代码

    3.使用nwjs的’fs’直接保存cancas为本地图片,在网上找到的方法都是弹出选择框保存,但我需要直接保存图片到指定路径,不能弹出对话框让用户选择。kailniris给了一个解决方案,可行,代码如下:

    复制代码

    var fs = require('fs');
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();
    
      <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
      </canvas>
    
    
    
    base64Data = c.toDataURL("image/png").replace(/^data:image\/png;base64,/, "")
    fs.writeFile("c:/Dev/test.png",  base64Data, 'base64', function (err) {
        if (err) {
            console.log("err", err);
        } else {
            return res.json({ 'status': 'success' });
        }
    });

    复制代码

    html2canvas把html页面转换为图片,再把图片保存到本地。贴一下代码(需要导入html2canvas.js和jquery):

    复制代码

    //要保存图片的文件路径
                var filePath = templateDir + filename + '.html';
                //要保存的html页面
                var editerDocument = window.editor.edit.iframe.get().contentWindow.document;
                html2canvas(editerDocument.body, {
                    onrendered: function (canvas) {
                        var base64Data = canvas.toDataURL("image/png").replace(/^data:image\/png;base64,/, "")
                        var fs = require("fs");
                        fs.writeFile(templateDir + filename + '.png', base64Data, 'base64', function (err) {
                            if (err) {
                                alert("保存模板失败!");
                            }
                            $('#model_template_name').modal("hide");
                            layer.msg("模板已保存为" + filename);
                        });
                    }
                });

    复制代码

     

    4.在app.js里引用Node内置模块

    复制代码

    //调用NodeJs内置模块
            $scope.fs = require('fs');  
         //读取配置文件
            $scope.readConfig = function () {
                try {
                    var configStr = $scope.fs.readFileSync(config.weixin.path, 'utf8');
                    console.log(configStr);
                    var obj = eval('(' + configStr + ')');
                    $scope.weixin.appid = obj.appid;
                    $scope.weixin.appsecret = obj.appsecret;
                    $scope.weixin.qrcodeurl = obj.qrcodeurl;
                }
                catch (e) {
                    console.log(e);
                    alert("读取微信配置文件失败");
                }
            }
    
            //写入配置文件
            $scope.writeConfig = function () {
                try {
                    var configStr = JSON.stringify($scope.weixin);
                    $scope.fs.writeFileSync(config.weixin.path, configStr, {encoding: 'utf8'});
                    return true;
                }
                catch (e) {
                    console.log(e);
                    alert("写入微信配置文件失败");
                    return false;
                }
            }

    复制代码

    5.引用第三方模块wechat-api

    复制代码

    //调用NodeJs第三方模块
            $scope.wechatApi = require('wechat-api');
    
    
      $scope.query = function () {
    
                var api = new $scope.wechatApi($scope.weixin.appid, $scope.weixin.appsecret);
                api.getMenu(function (err, result) {
                    if (err) {
                        console.log(err);
                        alert("查询菜单异常");
                    } else {
                        load(result);
                        $scope.$apply();//需要手动刷新
                    }
                });
            };

    复制代码

     

     更多详细的可以参考 http://liuxp.me/nwjs/References/Window/ 中文文档

    感谢您的阅读,本文大部分转载于博客https://www.cnblogs.com/yswenli/archive/2018/01/31/8393787.html

     

    展开全文
  • NW.js 打包网页成exe桌面应用

    千次阅读 2019-04-24 17:37:06
    NW.js中文网https://nwjs.org.cn/doc/index.html 可以用来开发桌面应用的js框架有三种: 1.NW.js NW.js是Intel的工程师写的一个基于node.js和chromium的应用程序运行环境。项目地址是:...

    NW.js 中文网 https://nwjs.org.cn/doc/index.html

     

    可以用来开发桌面应用的js框架有三种:

    1.NW.js

    NW.js是Intel的工程师写的一个基于node.js和chromium的应用程序运行环境。项目地址是:https://github.com/rogerwang/node-webkit

    2.Electron

    Electron是一款利用Web技术开发跨平台桌面应用的框架。项目地址是:https://github.com/atom/electron

    3.Hex

    Hex是基于 CEF 并且融合了 Chromium 与 Node.js编写的,好像有道词典就是用这个写的。但是这个框架已经三年没更新了,所以直接弃用。。。。。。

    于是我的目光就指向了NW.js,毕竟是Intel大神的杰作,具体Hello,World!的步骤如下。

    一、NW.js的下载

    官网地址是:http://nwjs.io/

    进去之后,点击下载SDK的版本,并解压至本地目录即可。

    node-webkit

    二、应用编写

    1.在nw.exe目录中创建一个helloworld的文件夹。

    新建index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Hello World!</title>
    <script src="helloworld.js"></script>
    </head>
    <body>
    </body>
    </html>

    新建helloworld.js

    document.write('Hello, World!');

    新建package.json

    { //应用的入口页面(也可以设置成js文件) "main": "index.html", //应用的名称 "name": "HelloWorld" }

    2. 运行helloworld。

    a) 在nw.exe所在目录按下shift+鼠标右键,选择”在此处打开命令窗口”。然后输入nw helloworld即可看到运行效果。

    b) 可以直接将helloworld目录拖拽到nw.exe上同样也可以运行。

    三、应用打包

    一般windows的桌面应用都是exe可执行文件,是不依赖于其他文件和环境的。而我们创建的helloworld应用是依赖于nw.exe和相关文件的,那么如何将应用打包成一个可执行文件呢?

    经过google,果然是有解决方案的,那就是Enigma Virtual Box

    1. 下载Enigma Virtual Box

    地址是:http://enigmaprotector.com/en/downloads.html

    选择最后一个下载就可以了,然后安装。

    2. 将应用打包成helloworld.nw文件。

    进入到helloworld目录中,全选三个文件打包成zip,然后改名成helloworld.nw。

    (遇到的坑,我本机安装的压缩工具为winRAR,所以打出来的格式一致有问题,所以导致无法成功执行,后来换成7-zip就好了。)

    node-webkit

    3. 合并helloworld.nw和nw.exe

    将helloworld.nw文件移动到和nw.exe同级目录下,然后执行命令

    copy /b nw.exe+helloworld.nw app.exe

    发现多了一个hello.exe文件,双击发现是可以运行的。不过这还不是最终的结果,因为将hello.exe移动到其他文件夹之后,就不能正常执行了。

    4. 使用Enigma Virtual Box打包成exe

    node-webkit

    Input File Name选择刚才生成的hello,Output File Name就是输出文件。

    重点来了,下面的Files需要将locales和pnacl两个文件夹拖入,然后add选择nw.exe目录中所有不包含我们创建的helloworld应用的文件

    node-webkit

    然后点击右下角的”Process”按钮,

    node-webkit

    看到上图结果,就说明执行成功了。

    找到打包后的文件,然后执行。

    nw.js

    大功告成!!!

     

    原文  https://www.toolmao.com/nwjs-helloworld

    展开全文
  • NW.js的简单使用

    万次阅读 2015-10-02 01:01:04
    在Mac下,运行应用程序:$ /Users/xx/Desktop/nwjs/nwjs.app/Contents/MacOS/nwjs . 其中,文件目录nwjs里包含了我们下载的node-webkit的文件,内容如下:当前文件目录是我们写的应用程序中的文件:以

    一.如何运行应用程序?

    在我们的应用程序目录中,必须要有一个package.son文件,当node-webkit启动的时候,这个文件就会被解析。

    在Mac下,运行应用程序:

    $ /Users/xx/Desktop/nwjs/nwjs.app/Contents/MacOS/nwjs .
    

    其中,文件目录nwjs里包含了我们下载的node-webkit的文件,内容如下:

    当前文件目录是我们写的应用程序中的文件:

    以上运行我们编写的应用程序是通过我们下载的node-webkit中的文件,这样多少有点繁琐。

    当然,我们使用nmp来安装nw,作为Node.js的模块:

    1.全局安装:

    $ sudo npm install -g nw

    安装成功后,进入我们应用程序的目录,直接运行命令即可:

    $ nw .

    2.本地安装:

    $ npm install nw

    安装成功后,进入我们应用程序的目录,运行命令:

    $node_modules/.bin/nw  .

    二.如何打包和分布你的应用(Mac)

    以下的子目录可以放在应用的根目录下:

    • node_modules:部署应用时的任何Node模块;
    • pluginsNPAPI插件文件。

    1.第一步:制作一个包(package)

    NW应用的包是以.nw为扩展名的zip压缩包,要注意三点:

    • 必须要有一个描述这个包的package.json文件,看一下声明格式
    • package.json文件必须要在压缩包的根目录下;
    • .nw中,文件和目录路径名是区分大小写的。这对于Windows和Mac OS用户来说,可能会令人疑惑,因为这两种平台上的文件系统是不区分大小写的,当解压的时候应用可能会工作,但是打包的时候会失效。

    下面介绍如何产生一个有效的.nw文件:

    在命令行中:

    1. 进入你的工程目录:$ cd /Users/xxx/Desktop/my_app
    2. 运行命令:zip -r ../${PWD##*/}.nw *
    3. 产生的.nw文件应该在你的工程目录的上一个目录中;

    产生的文件如图:

    2.第二步:从一个.nw文件中创建一个可执行文件

    如何将第一步中产生的.nw文件转化为可执行文件呢?如果 用户只收到一个单独的.nw文件,他们自然地需要安装nw模块来运行这个.nw文件,但是,利用nw,你可以将.nw文件与nw合并起来。

    一般,推荐提供.nw文件让用户下载,或者,提供合并后的版本会让事情变得更简单。

    将上一步中产生的.nw(即my_app.nw)文件放到Contents/Resources中,并重命名为:app.nw

    如果你需要制作一个真正的发布版本的应用的话,你需要修改以下的文件:

    • Contents/Resources/nw.icns:你的应用的图标
    • Contents/Info.plist:苹果的包描述文件

    关于Info.plist文件,你可以查看实现Cocoa关于应用面板的标准

    三.使用Node模块

    在Node.js中有三种类型的模块:

    • 内置的模块(作为Node API的一部分)
    • 使用JavaScript写的第三方模块
    • 使用C/C++插件写的第三方模块

    所有的这三种类型模块都可以被用在node-webkit中

    1.内置的模块:

    根据Node API文档,Node.js的内置模块可以在Node中直接被使用。

    例如,var fs = require('fs')便可开始使用文件系统模块。

    例如,你可以不用任何require (...)来使用process模块。

    但是,在Nodenode-webkit的API之间有一些小的变化,请看与node相关的变化来了解更多。

    2.第三方JavaScript模块

    如果一个第三方模块完全是用JavaScript编写的,不包含任何的C/C++插件,它在node-webkit中使用的方式在Node中使用的方式是一样的。形式:require('moduleName')

    但是,相关路径(如果这样的路径作为require()方法的参数时)的行为取决于在你的应用中是如何使用”父”文件的。(“父”文件指的是require()方法在哪个文件被调用的)

    • 如果Node也需要这个”父”文件的话(使用require()),那么”子”文件的 相对路径就是相对于”父”文件来说的。
    • 如果”父”文件被WebKit包含(通过任何的Web技术:如传统的DOM技术:window.open())的话,”子”文件的相对路径就是相对于应用的根目录来说的。

    但是,不使用显式的相对路径(以”.”或者”..”开头)是明智的,如果模块放在应用的子目录/node_modules中的话,只需要调用require('module name')即可。

    你可能在你的应用目录中通过命令npm install module name来安装模块,因为npm会自动将这些模块放在/node_modules子目录中。

    例子:async模块

    这里是安装async模块的例子:

    $ cd /xxxxx/app
    $ npm install async

    下面是应用中所包含文件的以树的形式展示的列表:

    $ find .
    .
    ./package.json
    ./index.html
    ./node_modules
    ./node_modules/async
    ./node_modules/async/.gitmodules
    ./node_modules/async/package.json
    ./node_modules/async/Makefile
    ./node_modules/async/LICENSE
    ./node_modules/async/README.md
    ./node_modules/async/.npmignore
    ./node_modules/async/lib
    ./node_modules/async/lib/async.js
    ./node_modules/async/index.js

    你应用的声明文件(./package.json)内容如下:

    {
      "name": "nw-demo",
      "main": "index.html"
    }

    下面是index.html的代码:

    <html>
    <head>
    <title>test</title>
    <script>
    var async=require('async');
    </script>
    </head>
    <body>
    test should be here.
    </body>
    </html>

    3.带有C/C++插件的第三方模块

    对于包含C/C++插件的模块,情况可能比上面复杂些,因为node-webkit的ABI(application binary interface应用二进制借口)与Node的ABI是不同的。

    当使用命令npm install来安装Node的这种类型的模块时,npm会使用它内部版本的node-gyp工具来为Node.js从源代码中构建模块中包含的插件。

    为了为node-webkit构建这样的模块,nw-gyp(node-gyp的一个特殊分叉)是必须的。你必须要手动运行nw-gyp,因为对于为node-webkit的构建和对nw-gyp的使用,npm这个Node工具毫不知晓。

    为了安装nw-gyp,运行npm install nw-gyp -g

    在使用nw-gyp之前,请确保满足它使用的要求(你需要一个Python引擎和C/C++编译器),这些要求与node-gyp所需要的要求是不同的。

    为了node-webkit构建一个模块,首先要获得该模块(npm install modulename),然后重新构建它:nw-gyp rebuild --target=0.5.0

    注意几点:

    • nw-gyp必须要在模块的目录(模块的binding.gyp所在的目录)下运行;
    • node-webkit的必要目标版本必须要显式地给出(例如nw-gyp rebuild --target=0.5.0中的0.5.0),因为nw-gyp不能检测出;
    • 在新的node-webkit版本中使用的话,必须要重新构建它,因为ABI是不稳定的。如果node-webkit 0.6.0版本发布的话,请使用nw-gyp rebuild --target=0.6.0

    ABI的差异意味着Node和node-webkit的C/C++插件(即”.node”文件)是互相不兼容的。如果插件是为node-webkit构建的话,在Node中是不能使用的,反之亦然。

    想了解更多的信息,请看使用nw-gyp来构建一个本地的模块

    展开全文
  • 使用Nwjs开发桌面应用体验

    千次阅读 2020-07-02 18:35:07
    之前一直用.net开发桌面应用,最近由于公司需要转为nodejs,但也是一直用nodejs开发后台应用,网站,接口等。近期,需要开发一个客户端,想着既然nodejs号称全栈,就试一下开发桌面应用到底行不行。...
  • 开始之前我们需要一些准备: 备注:我的是window10 64位 ... 2、npm等 【个人使用cnpm 淘宝镜像 主要是速度快】一般安装完成node 基本都会已经存在npm了,不会的请自行百度 3、NW.js 去官网下载:htt...
  • NWjs

    千次阅读 2018-07-05 13:17:40
    1.NW.jsNW.js是Intel的工程师写的一个基于...(建议使用)最近因公司项目需求,需要使用nw,就在网上找资料学习了下官网地址是:http://nwjs.io/,进去之后,点击下载SDK的版本,并解压至本地目录即可。(sdk是开...
  • 使用nwjs平台 借助chrome api读取串口数据. nwjs版本:0.13.0或以上版本(及其它环境),如果不继续开发,本文件压缩包里的文件可直接拖入nwjs运行. 调试借助软件:vpsd(串口虚拟软件) 注意,本程序打开的商品为com3端口,...
  • 该文件是在nwjs使用sqlite时需要编译生成的文件,由于编译的时候费了很长时间,所有放到这里给需要的人使用。 可以省去很多走弯路的时间。
  • nwjs编写的浏览器外壳

    2020-07-21 09:59:22
    nwjs编写浏览器外壳。nwjs支持最新的前端技术,css3,es6等。
  • mac nwjs入门

    2019-06-22 13:11:33
    NW.js由node-webkit项目发展而来其实很多东西官网上都有。...官网:https://nwjs.io/中文文档:http://nwjs-cn.readthedocs.io/zh_CN/latest/index.html1.nw.js是干嘛的?官网上的解释:NW.js基于Chromium和Node....
  • nodejs ffi 调用dll 方法&过程 背景 Java 调用dll过程中 JNI的方式,存在隐患,dll经常挂掉,为此采用nodejs 调用dll进行封装 开发环境 win7 sp1 + nodejs 0.12.3 + python2.7 + vs2013 ...
  • macos构建nwjs

    2020-06-21 08:53:13
    一、 构建 1.新建app.nw文件夹,将package.json、项目文件、文件夹拷贝进去; 2.准备logo图标,转换成icns图标;在线转换工具【go】,图片格式:...注:nwjs.app中的nwjs就是app的名字,可自行重命名;然后退回nwjs.app
  • nwjs客户端更新模块

    2020-07-19 23:33:02
    nw.js 客户端更新模块
  • 1.使用到的nodejs模块 ① fs模块,对要进行热更新的文件进行处理 ② request模块 进行网络请求,获取热更新包 ...备注:ini和adm-zip-iconv,request模块需要自己npm inistall ,其他两个模块nwjs都会自带 2....
  • NWJS(NodeJS)调用打印机 - 打印小票

    千次阅读 2020-06-27 22:01:25
    使用NWJS包装VueJS前端代码实现exe安装包和可执行文件 2 调查 经过调查,主要有如下几种思路。 2.1 思路1:使用IP+Port方式调用网络打印机 代码如下,只需要调用node的net模块即可。详情请看参考1。 var ...
  • 20170913 nwjs的bg-script的坑

    千次阅读 2017-09-13 20:25:36
    最近在用nwjs来做爬虫,去爬某分类信息平台的帖子,看看什么人发了什么贴。 而nwjs的定位来说,是用来做桌面APP的,作为一名前端,nwjs是非常好用的。 但是当我要通过nwjs控制网页进行模拟点击的时候,发现了不少...
  • nwjs的运行与打包

    千次阅读 2019-01-09 15:53:43
    nwjs的运行与打包 创建nwjs项目 创建工程文件目录nwjsDemo 创建文件index.html和package.json 完整目录结构如下 nwjsDemo -index.html -package.json index.html &amp;amp;lt;!DOCTYPE html&...
1 2 3 4 5 ... 20
收藏数 1,202
精华内容 480
关键字:

nwjs