¿Qué es NW.js y cómo usarlo?

(1) Una nueva forma de escribir aplicaciones locales utilizando las tecnologías más populares de Internet

(2) Basado en HTML5, CSS3, JS y WebGL

(3) Totalmente compatible con todas las API de nodejs y módulos de terceros

(4) Llame a los módulos de nodejs directamente desde DOM

(5) Fácil de usar.

(5) Fácil de empaquetar y distribuir

(6) Admite entornos de ejecución, incluidos Windows de 32 y 64 bits, Linux y Mac OS

Cómo utilizarlo de la siguiente manera:

1. Descargue nw

1. Descargue NW.js (sitio web oficial: /)

2. archivo

{

"nombre": "nw-demo",

"versión": "0.0.1",

"main": " index.html"

} Más información es la siguiente:

{

"main": "app/ index.html",

"name": "WeixinMenuEditor",

"description": "Aplicación de edición de menú de la cuenta oficial de WeChat encapsulada por nw.js",

"versión" : "0.0.1",

"palabras clave": [ "weixin", "editor de menú" ],

"ventana": {

"título ": "Editor de menús de Weixin",

"icon": "app/static/img/weixin_logo.jpg",

"barra de herramientas": verdadero,

"marco" : verdadero,

"ancho": 1008,

"alto": 750,

"posición": "centro",

"min_width": 400,

"min_ height": 200

},

"webkit": {

"plugin ": verdadero,

"java": falso,

"page-cache": falso

},

"chromium- args": "-allow-file-access-from-files"

}título: Cadena, establece el título predeterminado.

ancho/alto: El tamaño de la ventana principal.

barra de herramientas: valor booleano. Ya sea para mostrar la barra de navegación.

icono: El icono de la ventana. La posición de la ventana cuando se abre se puede establecer en "nula", "centro" o "mouse".

min_width/min_height: El valor mínimo de la ventana.

max_width/max_height: El valor máximo mostrado por la ventana.

resimensionable: valor bool. Ya sea para permitir el cambio de tamaño de la ventana.

siempre visible: valor bool. La ventana siempre está arriba.

pantalla completa: valor bool. Ya sea para mostrar en pantalla completa.

show_in_taskbar: Si se muestra el icono en la barra de tareas.

frame: Valor booleano. Si se establece en falso, el programa se mostrará sin bordes.

"chromium-args": "-allow-file-access-from-files" Esta línea de código equivale a agregar parámetros de inicio al navegador Google Chrome, lo que permite que angularjs acceda directamente a los archivos json locales.

Tres: Generar exe

El directorio del proyecto es el siguiente:

Comprima el proyecto html en un archivo zip y cámbiele el nombre a nw, luego ingrese lo siguiente comando

copiar /b nw.exe app.nw firstApp.exe. Box (enigmavb.exe), la interfaz debería ser así:

Luego seleccione el archivo test.exe generado en el paso anterior en la sección Ingresar nombre de archivo de entrada (Ingresar nombre de archivo de entrada), Ingresar salida Nombre (Nombre de entrada y salida) nombre) puede ser el valor predeterminado;

Después de eso, haga clic en el botón Agregar a continuación para agregar la carpeta nwjs (el nombre no tiene que ser nwjs, es decir, el que está en el entorno NW.js se inició en la carpeta del primer paso). js), cargue nw.exe y test.nw y todos los archivos excepto test.exe, luego haga clic en Procesar y espere a que la ejecución se realice correctamente. En este momento, se generará un nuevo archivo en la ruta correspondiente. llamémoslo newtest.exe por ahora). En este momento, este archivo newtest.exe se puede ejecutar en cualquier entorno de Windows. Puede copiarlo para mostrárselo a sus amigos.

Los siguientes son algunos malentendidos sobre el uso de nw

1. Si solo desea ejecutar el acceso directo cuando la aplicación actual recibe el foco, verifique esta biblioteca y configure el acceso directo en js<. /p>

p>

//Cargar la biblioteca de interfaz de usuario local

var gui = require('nw. gui');

var opción = {{<

tecla: "Ctrl R",

activo: función () {

alerta(" Acceso directo global" this.key " Press");

},

falló: función (msg) {

//Error al crear el acceso directo

alerta(msg );

}

};

// Crear un acceso directo

var atajo = nueva interfaz gráfica de usuario .Shortcut(option);

// Registrar acceso directo global

gui.App.RegisterGlobalHotKey(shortcut);

// Cancelar registro, se ejecuta cuando finaliza la aplicación

gui.App.unregisterGlobalHotKey(shortcut); 2.js no puede actualizar la página varias veces, lo que provoca que varias operaciones no se ejecuten correctamente. Este es un error causado al actualizar la página para reasignar variables después de recargar el js. archivo.

Solución

nw.js lee y guarda archivos

lt;htmlgt;

lt;headgt;

lt;meta charset =" utf-8"/gt;

lt; titlegt; nw.js implementa lectura/escritura de archivos

lt; titlegt; nw.jsjs implementa lectura/escritura de archivoslt ;/titlegt;

lt;/headgt;

lt;bodygt;

lt; input id="readFile" type="file" gt;read Obtener el archivo lt; /inputgt;

lt;! -- El valor predeterminado es nombre de archivo.html --gt;

lt; input id="writeFile" nwsaveas="filename.html" type="file"gt;

lt;pgt.lt;/pgt;

lt;scriptgt;

// Módulo de lectura y escritura de archivos proporcionado por nw.js

var fs = require("fs");

// Leer el archivo

var selecter = document.querySelector('#readFile');

selector . addEventListener("cambiar", función (evt) {

//Archivo seleccionado por el usuario

var filePath = this.value. toString();

documento .querySelector("p").innerHTML = "Leer archivo desde " filePath;

fs.readFile(filePath, function (err, data) {

if (err) {

layer.msg("¡Error al leer el archivo! ：" err.message

return

} else {

console; .log(datos);

alerta(datos);

}

})

});

selector = document.querySelector('#writeFile'); addEventListener("change", function (evt) {

// El archivo seleccionado por el usuario

var filePath = this.value.toString();

document.querySelector("p").innerHTML = "Escribir archivo en:";

// El archivo seleccionado por el usuario

var filePath = this.valu

e.toString();

document.querySelector("p").innerHTML = "Escribir archivo en:" filePath;

//Escribir hola en el archivo

fs. writeFile(filePath, "¡Hola!\n", función (err) {

if (err) {

alerta("¡Error al guardar!") )

}

});

});

lt;/scriptgt;

lt;/bodygt;

lt;/htmlgt; 3. Utilice 'fs' en nwjs para guardar la cancelación directamente como una imagen local. Los métodos que encontré en Internet son abrir el cuadro de selección para guardar, pero lo necesito. para guardar la imagen directamente en Al especificar una ruta, no puede aparecer un cuadro de diálogo para que el usuario elija. trazo();

lt; lienzo id="myCanvas" width="200" height="100" style="borde: 1px sólido #000000;"gt; ;/canvasgt;

base64Data = c.toDataURL("image/png").replace(/^data:image\/png;base64,/, "")

fs .writeFile("c:/Dev/test.png", base64Data, 'base64', función (err) {

if (err) {

console.log("err ", err);

} else {

return res.json({ 'estado': 'éxito' });

}

}); utilice html2canvas para convertir la página html en una imagen y luego guarde la imagen localmente.

Código postal (debe importar html2canvas.js y jquery):

//La ruta del archivo para guardar la imagen

var filePath = templateDir filename '.html';

// página html para guardar

var editorDocument = window.edit.iframe.get.filePath = templateDir nombre de archivo '.html';

}

catch (e) {

console.log(e);

p>

alert("Error al leer el archivo de configuración de Weixin");

}

}

//escribir configuración archivo

$scope.writeConfig = function () {

prueba {

var configStr = JSON.stringify($scope.weixin);

$scope.fs.writeFileSync = function () {

prueba {

var configStr = JSON.stringify($scope.weixin);

$scope.fs.writeFileSync = function ()fs.writeFileSync(config.weixin.path, configStr, {codificación: 'utf8'});

devuelve verdadero

}

catch (e) {

console.log(e);

alert("Error al escribir en el archivo de configuración de Weixin");

return false;

}

}5. Haga referencia al módulo de terceros wechat-api

// Llame al módulo de terceros de NodeJs

$scope.wechatApi = require('wechat-api');

$scope.appsecret);

api.getMenu(función (err, resultado) {

if (err) {

console.log(err)

alert("Excepción del menú de consulta"); } else {

load(resultado);

$scope.$apply(); //debe actualizarse manualmente

}

});

};