NW.js 소개 및 사용 방법
NW.js(본명 node-webkit)는 Chromium 과 node.js 를 기반 으로 한 프로그램 이 실 행 될 때 HTML 과 JavaScript 로 네 이 티 브 프로그램 을 만 들 수 있 습 니 다.또한 DOM 에서 Node.js 모듈 을 호출 하여 모든 웹 기술 로 네 이 티 브 응용 프로그램 을 쓰 는 새로운 개발 모델 을 실현 할 수 있 습 니 다.
(1)인터넷 에서 가장 유행 하 는 기술 로 네 이 티 브 프로그램 을 만 드 는 새로운 방법
(2)HTML 5,CSS 3,JS 및 WebGL 을 기반 으로 작성
(3)nodejs 모든 api 및 제3자 모듈 완전 지원
(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/)
2.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"
}프로젝트 디 렉 터 리 는 다음 과 같 습 니 다.
html 항목 을 zip 로 압축 하고 nw 로 이름 을 바 꾸 고 다음 명령 을 입력 하 십시오.
copy /b nw.exe+app.nw firstApp.exeEnigma Virtual Box 프로그램(enigmvb.exe)을 열 면 인터페이스 가 이렇게 되 어야 합 니 다.
그리고 Enter Input File Name 에서 이전 단계 에 생 성 된 test.exe 파일 을 선택 하 십시오.Enter Output Name 은 기본 값 으로 사용 할 수 있 습 니 다.
그 다음 에 아래 Add 단 추 를 누 르 면 nwjs 폴 더(이름 이 nwjs 가 아니 라 최초 로 NW.js 환경의 그 폴 더)에서 nw.exe 와 test.nw,test.exe 를 제외 한 모든 파일 을 불 러 오고 Process 를 누 르 면 실행 이 성공 할 때 까지 기다 리 면 됩 니 다.이 때 해당 경로 에서 새로운.exe 파일(우 리 는 잠시 new test.exe 라 고 부 릅 니 다)을 생 성 합 니 다.이때 new test.exe 파일 은 임의의 Windows 환경 에서 실 행 될 수 있 습 니 다.동료 에 게 복사 해서 표시 할 수 있 습 니 다.
다음은 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);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!
", function (err) {
if (err) {
alert(" !");
}
});
});
</script>
</body>
</html>
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' });
}
});
//
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);
});
}
});
// 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;
}
}
// 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();//
}
});
};총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 NW.js 소개 와 사용법 입 니 다.여러분 께 도움 이 되 셨 으 면 합 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
NW.js 소개 및 사용 방법그 다음 에 아래 Add 단 추 를 누 르 면 nwjs 폴 더(이름 이 nwjs 가 아니 라 최초 로 NW.js 환경의 그 폴 더)에서 nw.exe 와 test.nw,test.exe 를 제외 한 모든 파일 을 불 러...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
