NW.jsの基本的な使い方を詳しく紹介-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

NW.jsの基本的な使い方を詳しく紹介

亚连

Jun 08, 2018 pm 03:05 PM

使用導入

NW.js (以前はnode-webkitとして知られていました) は、Chromiumとnode.jsをベースにしたアプリケーションランタイムで、これを介してHTMLとJavaScriptでネイティブアプリケーションを作成できます。この記事では主にNW.jsの紹介と使い方について紹介します。が必要です。お友達は

はじめに

を参照してください。 NW.js (以前はnode-webkitとして知られていました) は、Chromiumとnode.jsに基づくアプリケーションランタイムであり、これを介してネイティブアプリケーションをHTMLとJavaScriptで作成できます。。また、DOM から Node.js モジュールを呼び出すこともできるため、あらゆる Web テクノロジーを使用してネイティブアプリケーションを作成するための新しい開発モデルが可能になります。

(1) インターネット上で最も人気のあるテクノロジーを使用してネイティブアプリケーションを作成する新しい方法

(2) HTML5、CSS3、JS、WebGL に基づいて記述されています

(3) すべての Nodejs API とサードパーティモジュールを完全にサポート

( 4) DOM を使用して、nodejs モジュールを直接呼び出すことができます

(5) パッケージ化と配布が簡単です

(6) 32 ビットおよび 64 ビットの Windows、Linux、Mac OS を含むオペレーティング環境をサポートします

利用方法は以下の通りです:

一、nw

をダウンロード 1. NW.jsをダウンロード(公式サイト:http://nwjs.io/)

ランタイム、SDK はいくつかのツールボックスです。すべてダウンロードすることをお勧めします~

https://nwjs.io/downloads/

2. Enigma Virtual Box をダウンロードします (公式 Web サイト: http://enigmaprotector) .com/)

2. パッケージの .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: 文字列、デフォルトのタイトルを設定します。
幅/高さ: メインウィンドウのサイズ。
ツールバー: ブール値。ナビゲーションバーを表示するかどうか。
アイコン: ウィンドウのアイコン。
位置 : 文字列。ウィンドウを開いたときの位置を「null」「center」「mouse」から設定できます。
min_width/min_height: ウィンドウの最小値。
max_width/max_height: ウィンドウに表示される最大値。
sizeable : ブール値。ウィンドウのサイズ変更を許可するかどうか。
always-on-top : ブール値。上部に窓。
全画面: ブール値。全画面表示するかどうか。
show_in_taskbar : タスクバーにアイコンを表示するかどうか。
frame : ブール値。 false に設定すると、プログラムは枠なしで表示されます。
"chromium-args" :"-allow-file-access-from-files" は、Google Chrome に起動パラメータを追加することと同等であり、angularjs がローカルの json ファイルに直接アクセスできるようになります。

3. exeを生成します

プロジェクトディレクトリは次のとおりです:

HTMLプロジェクトをzipに圧縮し、名前をnwに変更し、次のコマンドを入力します

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

ログイン後にコピー

4.パッケージ

Enigma Virtual Box プログラム (enigmavb.exe) を開きます。インターフェイスは次のようになります:

次に、「入力ファイル名の入力」、「出力の入力」で前のステップで生成された test.exe ファイルを選択します。名前はデフォルトで構いません。

その後、下の [追加] ボタンをクリックして、nw.exe と test.nw と test.exe を除くすべてのファイルを追加します。ファイルをロードし、[プロセス] をクリックして、実行が成功するまで待ちます。新しい .exe ファイルが対応するパスに生成されます (ここでは newtest.exe と呼びます)。この時点で、newtest.exe ファイルが Windows 環境で実行される場合は、それを友達にコピーして見せることができます。それ。

以下は、nw

1 の使用におけるいくつかの落とし穴です。ショートカットキーを実行する前に現在のアプリケーションにのみフォーカスを取得したい場合は、js を使用してショートカットキーを設定するこのライブラリを確認してください

// 加载本地ui库
 var gui = require(&#39;nw.gui&#39;);
 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 ファイルを再読み込みし、変数を再割り当てすることによって発生するバグです。解決策

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(&#39;#readFile&#39;);
 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(&#39;#writeFile&#39;);
 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(&#39;fs&#39;);
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, &#39;base64&#39;, function (err) {
 if (err) {
 console.log("err", err);
 } else {
 return res.json({ &#39;status&#39;: &#39;success&#39; });
 }
});

ログイン後にコピー

html2canvas を使用して HTML ページを画像に変換し、画像をローカルに保存します。コードを貼り付けます (html2canvas.js と jquery をインポートする必要があります):

//要保存图片的文件路径
  var filePath = templateDir + filename + &#39;.html&#39;;
  //要保存的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 + &#39;.png&#39;, base64Data, &#39;base64&#39;, function (err) {
   if (err) {
    alert("保存模板失败!");
   }
   $(&#39;#model_template_name&#39;).modal("hide");
   layer.msg("模板已保存为" + filename);
   });
  }
  });

ログイン後にコピー

4. app.js の Node 組み込みモジュールを参照します

//调用NodeJs内置模块
 $scope.fs = require(&#39;fs&#39;); 
 　　　　//读取配置文件
 $scope.readConfig = function () {
  try {
  var configStr = $scope.fs.readFileSync(config.weixin.path, &#39;utf8&#39;);
  console.log(configStr);
  var obj = eval(&#39;(&#39; + configStr + &#39;)&#39;);
  $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: &#39;utf8&#39;});
  return true;
  }
  catch (e) {
  console.log(e);
  alert("写入微信配置文件失败");
  return false;
  }
 }

ログイン後にコピー

5. サードパーティモジュール wechat-api を参照します

//调用NodeJs第三方模块
 $scope.wechatApi = require(&#39;wechat-api&#39;);
 $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();//需要手动刷新
  }
  });
 };

ログイン後にコピー

上記は皆さんのためにまとめたものです。将来皆さんのお役に立てれば幸いです。

vux がプルアップリフレッシュ関数を実装する方法

jQuery による画像カルーセルの実装方法

jQuery 同じイベントが迅速かつ繰り返しトリガーされるのを防ぐ方法

以上がNW.jsの基本的な使い方を詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7532

CakePHP チュートリアル

1379

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

CrystalDiskmarkとはどのようなソフトウェアですか? -crystaldiskmarkの使い方は？ Mar 18, 2024 pm 02:58 PM

CrystalDiskMark は、シーケンシャルおよびランダムの読み取り/書き込み速度を迅速に測定する、ハードドライブ用の小型 HDD ベンチマークツールです。次に、編集者が CrystalDiskMark と Crystaldiskmark の使用方法を紹介します。 1. CrystalDiskMark の概要 CrystalDiskMark は、機械式ハードドライブとソリッドステートドライブ (SSD) の読み取りおよび書き込み速度とパフォーマンスを評価するために広く使用されているディスクパフォーマンステストツールです。 ). ランダム I/O パフォーマンス。これは無料の Windows アプリケーションで、使いやすいインターフェイスとハードドライブのパフォーマンスのさまざまな側面を評価するためのさまざまなテストモードを提供し、ハードウェアのレビューで広く使用されています。

foobar2000のダウンロード方法は？ -foobar2000の使い方 Mar 18, 2024 am 10:58 AM

foobar2000 は、音楽リソースをいつでも聴くことができるソフトウェアです。あらゆる種類の音楽をロスレス音質で提供します。音楽プレーヤーの強化版により、より包括的で快適な音楽体験を得ることができます。その設計コンセプトは、高度なオーディオをコンピュータ上で再生可能デバイスを携帯電話に移植し、より便利で効率的な音楽再生体験を提供シンプルでわかりやすく、使いやすいインターフェースデザイン過度な装飾や煩雑な操作を排除したミニマルなデザインスタイルを採用また、さまざまなスキンとテーマをサポートし、自分の好みに合わせて設定をカスタマイズし、複数のオーディオ形式の再生をサポートする専用の音楽プレーヤーを作成します。過度の音量による聴覚障害を避けるために、自分の聴覚の状態に合わせて調整してください。次は私がお手伝いさせてください

NetEase メールボックスマスターの使用方法 Mar 27, 2024 pm 05:32 PM

NetEase Mailbox は、中国のネットユーザーに広く使用されている電子メールアドレスとして、その安定した効率的なサービスで常にユーザーの信頼を獲得してきました。 NetEase Mailbox Master は、携帯電話ユーザー向けに特別に作成された電子メールソフトウェアで、電子メールの送受信プロセスが大幅に簡素化され、電子メールの処理がより便利になります。 NetEase Mailbox Master の使い方と具体的な機能について、以下ではこのサイトの編集者が詳しく紹介しますので、お役に立てれば幸いです。まず、モバイルアプリストアで NetEase Mailbox Master アプリを検索してダウンロードします。 App Store または Baidu Mobile Assistant で「NetEase Mailbox Master」を検索し、画面の指示に従ってインストールします。ダウンロードとインストールが完了したら、NetEase の電子メールアカウントを開いてログインします。ログインインターフェイスは次のとおりです。

Baidu Netdisk アプリの使用方法 Mar 27, 2024 pm 06:46 PM

クラウドストレージは今日、私たちの日常生活や仕事に欠かせない部分になっています。中国有数のクラウドストレージサービスの 1 つである Baidu Netdisk は、強力なストレージ機能、効率的な伝送速度、便利な操作体験により多くのユーザーの支持を得ています。また、重要なファイルのバックアップ、情報の共有、オンラインでのビデオの視聴、または音楽の聴きたい場合でも、Baidu Cloud Disk はニーズを満たすことができます。しかし、Baidu Netdisk アプリの具体的な使用方法を理解していないユーザーも多いため、このチュートリアルでは Baidu Netdisk アプリの使用方法を詳しく紹介します。まだ混乱しているユーザーは、この記事に従って詳細を学ぶことができます。 Baidu Cloud Network Disk の使用方法: 1. インストールまず、Baidu Cloud ソフトウェアをダウンロードしてインストールするときに、カスタムインストールオプションを選択してください。

BTCC チュートリアル: BTCC 取引所で MetaMask ウォレットをバインドして使用する方法は? Apr 26, 2024 am 09:40 AM

MetaMask (中国語ではリトルフォックスウォレットとも呼ばれます) は、無料で評判の高い暗号化ウォレットソフトウェアです。現在、BTCC は MetaMask ウォレットへのバインドをサポートしており、バインド後は MetaMask ウォレットを使用してすぐにログイン、値の保存、コインの購入などが可能になり、初回バインドで 20 USDT のトライアルボーナスも獲得できます。 BTCCMetaMask ウォレットのチュートリアルでは、MetaMask の登録方法と使用方法、および BTCC で Little Fox ウォレットをバインドして使用する方法を詳しく紹介します。メタマスクウォレットとは何ですか? 3,000 万人を超えるユーザーを抱える MetaMask Little Fox ウォレットは、現在最も人気のある暗号通貨ウォレットの 1 つです。無料で使用でき、拡張機能としてネットワーク上にインストールできます。

iOS 17.4の新しい高度な機能「盗難デバイス保護」の使い方を教えます Mar 10, 2024 pm 04:34 PM

Appleは火曜日にiOS 17.4アップデートを公開し、iPhoneに多数の新機能と修正をもたらした。このアップデートには新しい絵文字が含まれており、EU ユーザーは他のアプリストアから絵文字をダウンロードすることもできます。さらに、このアップデートでは iPhone のセキュリティ制御も強化され、より多くの「盗難デバイス保護」設定オプションが導入され、ユーザーにより多くの選択肢と保護が提供されます。「iOS17.3では、「盗難デバイス保護」機能が初めて導入され、ユーザーの機密情報のセキュリティが強化されています。ユーザーが自宅やその他の身近な場所から離れている場合、この機能ではユーザーは最初に生体認証情報を入力する必要がありますApple ID パスワードの変更や盗難デバイス保護の無効化など、特定のデータにアクセスして変更するには、情報を再度入力する必要があります。

Xiaomi Autoアプリの使い方 Apr 01, 2024 pm 09:19 PM

Xiaomi 車用ソフトウェアは、車のリモート制御機能を提供し、ユーザーが携帯電話やコンピュータを介して車両のドアや窓の開閉、エンジンの始動、車両のエアコンやオーディオの制御など、車両を遠隔制御できるようにします。このソフトウェアの使い方や内容について、一緒に学びましょう。 Xiaomi Auto アプリの機能と使用方法の包括的なリスト 1. Xiaomi Auto アプリは 3 月 25 日に Apple AppStore で公開され、Android スマートフォンのアプリストアからダウンロードできるようになりました; 車の購入: 主要なハイライトと技術パラメータについて学びますXiaomi Auto のサービスを利用して、試乗の予約をし、Xiaomi 車の設定と注文を行い、車の受け取りの To-Do 項目のオンライン処理をサポートします。 3. コミュニティ: Xiaomi Auto ブランド情報を理解し、車の経験を交換し、素晴らしいカーライフを共有します; 4. 車の制御: 携帯電話はリモコン、遠隔制御、リアルタイムセキュリティ、簡単です。

リトルブラックボックス CDKey の使用方法 Mar 12, 2024 pm 07:34 PM

Little Black Box cdkey の使用方法簡単に言うと、Steam プラットフォーム上のゲームを Little Black Box から直接購入でき、購入が成功すると CDK 引き換えコードを受け取ります。次に、Steam モールでこの引き換えコードを使用して、対応するゲームを購入します。小さな黒いボックスの CD キーの使い方を知らない友人も多いと思いますが、以下に引き換え手順を詳しく説明しますので、お役に立てれば幸いです。 Little Black Box cdkey の使用方法 1. まず、Little Black Box ゲームの購入後に取得した CDK 引き換えコードをコピーします。 2. 次に、Steam プラットフォームを起動します。 3. 左上隅のメニューで「ゲーム」オプションをクリックします。 4. 新しいメニューで「Steam で製品をアクティベートする」を見つけてクリックします。 5. ポップアップインターフェイスで直接 [次へ] をクリックします。 6. 小さなブラックボックスを購入する

See all articles

NW.jsの基本的な使い方を詳しく紹介

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック