需求：通過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/nodesudo ln -s ~/node-v6.11.4-linux-x64/bin/npm /usr/local/bin/npmsudo 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/nwsudo ldconfig
進(jìn)入目錄后可以看到nw文件，運(yùn)行./nw命令查看是否可以正常運(yùn)行。
三、nwjs使用示例
1.創(chuàng)建html文件
首先創(chuàng)建一個(gè)簡單的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/bashcd /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-8Name=DemoExec=sh /home/ubuntu/Desktop/nwjs-v0.18.8-linux-x64/start.shIcon=/home/ubuntu/Desktop/nwjs-v0.18.8-linux-x64/icon.jpgInfo="Spark"Categories=GTK;Network;message;Comment="demo_nwjs"Terminal=falseType=ApplicationStartupNotify=trueName[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 -> capslockxmodmap -e "remove mod4 = Super_L"xmodmap -e "keycore 133 = Caps_Lock NoSymbol Caps_Lock"xmodmap -e "add lock = Caps_Lock"#super_r -> capslockxmodmap -e "remove mod4 = Super_R"xmodmap -e "keycore 134 = Caps_Lock NoSymbol Caps_Lock"xmodmap -e "add lock = Caps_Lock"#alt_l -> capslockxmodmap -e "remove mod1 = Alt_L"xmodmap -e "keycore 64 = Caps_Lock NoSymbol Caps_Lock"xmodmap -e "add lock = Caps_Lock"#ctrl_l -> capslockxmodmap -e "remove control = Control_L"xmodmap -e "keycore 37 = Caps_Lock NoSymbol Caps_Lock"xmodmap -e "add lock = Caps_Lock"#shift_l -> capslockxmodmap -e "remove shift = Shift_L"xmodmap -e "keycore 50 = Caps_Lock NoSymbol Caps_Lock"xmodmap -e "add lock = Caps_Lock"#alt_r -> capslockxmodmap -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安裝及使用教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
