Ubuntu環(huán)境下的nwjs安裝及使用教程

更新時間：2017年10月09日 14:24:23 作者：running_meng

最近做項目遇到這樣的需求通過nwjs實現(xiàn)一個可以全屏顯示功能，下面小編給大家?guī)砹薝buntu環(huán)境下的nwjs安裝及使用教程，需要的朋友參考下吧

需求：通過nwjs實現(xiàn)一個可以全屏顯示，防止用戶退出瀏覽器的演示用app

一、安裝Node.js

sudo apt-get install nodejs 
sudo apt-get install npm

這種方法安裝的版本可能不是最新的，可以嘗試直接從官網(wǎng)(https://nodejs.org/en/download/)下載。

解壓下載的node-v6.11.4-linux-x64.tar.gz文件之后建立軟鏈接即可：

sudo ln -s ~/node-v6.11.4-linux-x64/bin/node /usr/local/bin/node
sudo ln -s ~/node-v6.11.4-linux-x64/bin/npm /usr/local/bin/npm
sudo ldconfig

如果下載的是Source Code(node-v6.11.4.tar.gz)，那么需要在解壓后的目錄自行編譯：

./configure 
make 
make install

如果遇到所需環(huán)境版本問題，在sudo apt-get update && apt-get upgrade后用apt-get remove舊版本后install就好

二、安裝nwjs

在官網(wǎng)(http://nwjs.io/)上下載nwjs-sdk-v0.25.4-linux-x64.tar.gz，解壓后建立軟鏈接：

sudo ln -s ~/nwjs-v0.18.8-linux-x64/nw /usr/local/bin/nw
sudo ldconfig

進入目錄后可以看到nw文件，運行./nw命令查看是否可以正常運行。

三、nwjs使用示例

1.創(chuàng)建html文件

首先創(chuàng)建一個簡單的Demo.html文件：

<html>
 <head>
  <meta charset="utf-8" />
  <title>Demo</title>
 </head>
 <body>
  <a  rel="external nofollow" >Visit Baidu</a>
 </body>
</html>

2.創(chuàng)建package.json文件

用來進行初始化配置：

{
 "name": "Demo",
 "main": "Demo.html",
 "window": {
  "title": "Demo",
  "toolbar": false,
  "frame": true,
  "position": "center",
  "always-on-top": true,
  "fullscreen": true,
  "width": 1920,
  "heigth": 1080
 }
}

這里實現(xiàn)了一個去掉了工具欄的全屏效果

3.打包文件運行

創(chuàng)建好兩個文件之后將其打包：

cat package.json Demo.html > Demo.nw

這時新打包出來的nw文件就可以運行了：

sudo ./nw Demo.nw

創(chuàng)建桌面圖標

這里想要實現(xiàn)一個雙擊啟動的效果，類似.exe文件的運行效果。根據(jù)官方教程使用cat `which nw` app.nw > app && chmod +x app創(chuàng)建的app一直無法使用，所以想出了一個取巧的辦法：

1. 創(chuàng)建一個bash腳本start.sh啟動Demo.nw：

#!/bin/bash
cd /home/ubuntu/Desktop/nwjs-v0.18.8-linux-x64
./nw demo.nw

找一個app圖標，命名為icon.jpg

在桌面創(chuàng)建一個Demo.desktop圖標，使用sudo nano Demo.desktop命令打開后寫入：

[Desktop Entry]
Encoding=UTF-8
Name=Demo
Exec=sh /home/ubuntu/Desktop/nwjs-v0.18.8-linux-x64/start.sh
Icon=/home/ubuntu/Desktop/nwjs-v0.18.8-linux-x64/icon.jpg
Info="Spark"
Categories=GTK;Network;message;
Comment="demo_nwjs"
Terminal=false
Type=Application
StartupNotify=true
Name[zh_CN]=Demo

這時雙擊就能看到運行結果了

屏蔽按鍵

package.json中配置了全屏并且去掉工具欄，就是為了防止用戶退出瀏覽器，具體操作步驟如下：

1. 在設置中可以關閉快捷鍵，并自定義一個快捷鍵呼出teminal用來退出瀏覽器，例如Shift_R + Ctrl_R + Q。

2. 將鍵盤左側的Shift、Ctrl、Super(win)鍵改到CapsLock鍵上，這可以通過xmodmap實現(xiàn)：

#super_l -> capslock
xmodmap -e "remove mod4 = Super_L"
xmodmap -e "keycore 133 = Caps_Lock NoSymbol Caps_Lock"
xmodmap -e "add lock = Caps_Lock"
#super_r -> capslock
xmodmap -e "remove mod4 = Super_R"
xmodmap -e "keycore 134 = Caps_Lock NoSymbol Caps_Lock"
xmodmap -e "add lock = Caps_Lock"
#alt_l -> capslock
xmodmap -e "remove mod1 = Alt_L"
xmodmap -e "keycore 64 = Caps_Lock NoSymbol Caps_Lock"
xmodmap -e "add lock = Caps_Lock"
#ctrl_l -> capslock
xmodmap -e "remove control = Control_L"
xmodmap -e "keycore 37 = Caps_Lock NoSymbol Caps_Lock"
xmodmap -e "add lock = Caps_Lock"
#shift_l -> capslock
xmodmap -e "remove shift = Shift_L"
xmodmap -e "keycore 50 = Caps_Lock NoSymbol Caps_Lock"
xmodmap -e "add lock = Caps_Lock"
#alt_r -> capslock
xmodmap -e "remove mod1 = Alt_R"
xmodmap -e "keycore 108 = Caps_Lock NoSymbol Caps_Lock"
xmodmap -e "add lock = Caps_Lock"

將上述代碼添加到start.sh的啟動命令之前，這樣在雙擊啟動的時候就可以修改掉按鍵了。

總結

以上所述是小編給大家介紹的Ubuntu環(huán)境下的nwjs安裝及使用教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！