需求:通過nwjs實現一個可以全屏顯示,防止用戶退出瀏覽器的演示用app
一、安裝Node.js
sudo apt-get install nodejs sudo apt-get install npm
這種方法安裝的版本可能不是最新的,可以嘗試直接從官網(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
如果遇到所需環境版本問題,在sudo apt-get update && apt-get upgrade后用apt-get remove舊版本后install就好
二、安裝nwjs
在官網(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
進入目錄后可以看到nw文件,運行./nw命令查看是否可以正常運行。
三、nwjs使用示例
1.創建html文件
首先創建一個簡單的Demo.html文件:
<html> <head> <meta charset="utf-8" /> <title>Demo</title> </head> <body> <a rel="external nofollow" >Visit Baidu</a> </body></html>
2.創建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 }}
這里實現了一個去掉了工具欄的全屏效果
3.打包文件運行
創建好兩個文件之后將其打包:
cat package.json Demo.html > Demo.nw
這時新打包出來的nw文件就可以運行了:
sudo ./nw Demo.nw
創建桌面圖標
這里想要實現一個雙擊啟動的效果,類似.exe文件的運行效果。根據官方教程使用cat `which nw` app.nw > app && chmod +x app創建的app一直無法使用,所以想出了一個取巧的辦法:
1. 創建一個bash腳本start.sh啟動Demo.nw:
#!/bin/bashcd /home/ubuntu/Desktop/nwjs-v0.18.8-linux-x64./nw demo.nw
找一個app圖標,命名為icon.jpg
在桌面創建一個Demo.desktop圖標,使用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
這時雙擊就能看到運行結果了
屏蔽按鍵
package.json中配置了全屏并且去掉工具欄,就是為了防止用戶退出瀏覽器,具體操作步驟如下:
1. 在設置中可以關閉快捷鍵,并自定義一個快捷鍵呼出teminal用來退出瀏覽器,例如Shift_R + Ctrl_R + Q。
2. 將鍵盤左側的Shift、Ctrl、Super(win)鍵改到CapsLock鍵上,這可以通過xmodmap實現:
#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的啟動命令之前,這樣在雙擊啟動的時候就可以修改掉按鍵了。
總結
以上所述是小編給大家介紹的Ubuntu環境下的nwjs安裝及使用教程,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答
圖片精選