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

2024-11-26 14:10:49

需求：通过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安装及使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

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

需求:通过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/bi
win10环境下python3.5安装步骤图文教程

点我去Python官网下载往下翻几页就能看到各种版本的Python,当前最新的是Python3.6,也没多大区别,我选择的是3.5.2 64位的,点击download 根据自己的电脑配置,我选择的是64位的一路默认下去吧! 安装成功!下面打开命令提示符,输入python,回车如下图一样就安装成功啦! 以上所述是小编给大家介绍的win10环境下python3.5安装步骤图文教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!
图解Windows环境下Android Studio安装和使用教程

鉴于谷歌最新推出的Android Studio备受开发者的推崇,所以也跟着体验一下. 一.介绍Android Studio Android Studio 是一个Android开发环境,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于开发和调试. 最近,Google 已宣布,为了简化 Android 的开发力度,以重点建设 Android Studio 工具,到今年年底将停止支持Eclipse等其他集成开发环
Ubuntu环境下SSH的安装及使用详解

SSH是指Secure Shell,是一种安全的传输协议,Ubuntu客户端可以通过SSH访问远程服务器 . SSH的简介和工作机制 SSH简介传统的网络服务程序,如:ftp.POP和telnet在本质上都是不安全的,因为它们在网络上用明文传送口令和数据,别有用心的人非常容易就可以截获这些口令和数据.而且,这些服务程序的安全验证方式也是有其弱点的,就是很容易受到"中间人"(man-in-the-middle)这种方式的攻击.所谓"中间人"的攻击方式,就是"
ubuntu环境下python虚拟环境的安装过程

一. 虚拟环境搭建在开发中安装模块的方法: pip install 模块名称之前我们安装模块都是直接在物理环境下安装,这种安装方法,后面一次安装的会覆盖掉前面一次安装的.那如果一台机器上面开发多个项目使用到不同版本的模块呢?怎么样做才能不受版本影响!那么需要用到虚拟环境,每个虚拟环境互相隔离,在一个虚拟环境中安装卸载模块其他不受影响! 1. python虚拟环境安装 sudo apt-get install python-virtualenv sudo easy_install virtua
ubuntu环境下安装memcache及启动的方法

本文实例讲述了ubuntu环境下安装memcache及启动的方法.分享给大家供大家参考,具体如下: 在ubuntu上安装memcache服务端比较简单. sudo apt-get install memcached memcached -d -m 128 -p 22222 -u root -c 1024 -l 127.0.0.1 -P /tmp/memcached.pid -s /tmp/memcached.sock 参数解释: -d 设置为守护进程 -m 设置内存大小(M) -
Ubuntu环境下mongodb安装配置详细步骤

1. 安装mongodb 1.1 安装依赖包 sudo apt-get install libcurl4 openssl 1.2 关闭和卸载原有的mongodb service mongodb stop sudo apt-get remove mongodb 1.3 导入包管理系统使用的公钥 wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add - 如果命令执行结果没有显示OK,则执行此命
ubuntu+php环境下的Memcached 安装方法

目前被很多系统所使用,例如Flick.Twitter等.这是一套开放源代码软件,以BSD license授权发布.下面记录一下在lamp环境下的Memcached安装.关于Memcached的应用,这里有两篇不错的文章:<应用 memcached 提升站点性能>.<Discuz!的Memcache缓存实现> 使用apt安装memcached apt-get install memcached 启动memcached 1. 终端下使用命令 memcached就可以启动 .例如 mem
Ubuntu环境源码编译安装xdebug的方法

本文实例讲述了Ubuntu环境源码编译安装xdebug的方法.分享给大家供大家参考,具体如下: 前面介绍了Ubuntu环境编译安装PHP和Nginx的方法,这里再来讲解一下源码编译安装xdebug的方法. 下载并解压xdebug xdebug下载地址:https://xdebug.org/download.php 我下载的是2.3.3,其实我也不清楚这些版本的区别,就随便下载了一个. cd /usr/local/src wget https://xdebug.org/files/xdebug-2
详解Ubuntu环境下部署Django+uwsgi+nginx总结

前言这是我在搭建Django项目时候的过程,拿来总结记录,以备不时之需. 项目采用nginx+uwsgi的搭配方式. 项目依赖包采用 requirements.txt 文件管理的方式. 本地准备工作确认项目能够运行起来,没有 bug 将当前环境的包导出 pip freeze > requirements.txt 将项目上传到服务器上的 /srv 目录下.这里以 git 的形式为例, 打开终端, 依次输入如下命令: $ git init $ git remote add origin xxx.

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

相关推荐

随机推荐