Ubuntu环境下的nwjs安装及使用教程

所属分类: 操作系统 / unix linux 阅读数: 65
收藏 0 赞 0 分享

需求:通过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/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 

如果遇到所需环境版本问题,在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/nw
sudo ldconfig

进入目录后可以看到nw文件,运行./nw命令查看是否可以正常运行。

三、nwjs使用示例

1.创建html文件

首先创建一个简单的Demo.html文件:

<html>
 <head>
  <meta charset="utf-8" />
  <title>Demo</title>
 </head>
 <body>
  <a href="http://www.baidu.com/" 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/bash
cd /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-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实现:

#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环境下的nwjs安装及使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

vm下centos7 mini版 NAT模式下配置静态IP的方法

这篇文章主要介绍了vm下centos7 mini版 NAT模式下配置静态IP 的方法,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

window10系统安装Ubuntu18.04系统的图文教程详解

这篇文章主要介绍了window10系统安装Ubuntu18.04系统,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
收藏 0 赞 0 分享

linux yum安装指定版本mysql的教程详解

这篇文章主要介绍了linux yum安装指定版本mysql的教程,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

ubuntu系统下Python虚拟环境的安装和使用教程

这篇文章主要介绍了ubuntu系统下Python虚拟环境的安装和使用教程,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

在 Ubuntu 上安装 pip的方法

这篇文章主要介绍了在 Ubuntu 上安装 pip的方法,非常不错,具有一定的参考借鉴价值,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

最全的VI命令与快捷键大全集合建议收藏

vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里为大家分享VI命令,需要的朋友可以参考下
收藏 0 赞 0 分享

详解Ubuntu18.04下配置Nginx+RTMP+HLS+HTTPFLV服务器实现点播/直播/录制功能

这篇文章主要介绍了Ubuntu18.04下配置Nginx+RTMP+HLS+HTTPFLV服务器实现点播/直播/录制功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Centos7重启apache、nginx、mysql、php-fpm命令方法

这篇文章主要介绍了Centos7重启apache、nginx、mysql、php-fpm命令方法,需要的朋友可以参考下
收藏 0 赞 0 分享

linux 部署apache服务的步骤

这篇文章主要介绍了linux部署apache服务的步骤,部署apache服务的步骤本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

统计Linux 中文件和文件夹/目录的数量(示例代码)

这篇文章主要介绍了统计Linux 中文件和文件夹/目录的数量(示例代码),需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多