快捷導(dǎo)航

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

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

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

需求：通過nwjs實(shí)現(xiàn)一個(gè)可以全屏顯示，防止用戶退出瀏覽器的演示用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

進(jìn)入目錄后可以看到nw文件，運(yùn)行./nw命令查看是否可以正常運(yùn)行。

三、nwjs使用示例

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

首先創(chuàng)建一個(gè)簡(jiǎn)單的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文件

用來進(jìn)行初始化配置：

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

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

3.打包文件運(yùn)行

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

cat package.json Demo.html > Demo.nw

這時(shí)新打包出來的nw文件就可以運(yùn)行了：

sudo ./nw Demo.nw

創(chuàng)建桌面圖標(biāo)

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

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

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

找一個(gè)app圖標(biāo)，命名為icon.jpg

在桌面創(chuàng)建一個(gè)Demo.desktop圖標(biāo)，使用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

這時(shí)雙擊就能看到運(yùn)行結(jié)果了

屏蔽按鍵

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

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

2. 將鍵盤左側(cè)的Shift、Ctrl、Super(win)鍵改到CapsLock鍵上，這可以通過xmodmap實(shí)現(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的啟動(dòng)命令之前，這樣在雙擊啟動(dòng)的時(shí)候就可以修改掉按鍵了。

總結(jié)

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