Ubuntu环境下使用NW.js对web应用封装

最新推荐文章于 2024-05-29 14:15:52 发布

进击的小宇宙

最新推荐文章于 2024-05-29 14:15:52 发布

阅读量2.7k

点赞数 2

分类专栏： NW.js 文章标签： ubuntu nwjs NW.js hybrid app

本文链接：https://blog.csdn.net/zy13608089849/article/details/79081362

版权

NW.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

相对于偏向应用的windows系统，Linux系统更偏向于开发，因此对于依赖Windows应用的人来说，缺了很多常用软件会很不习惯，本文的目的便是通过两个Demo来引出后面的教程——通过NW.js来封装你想要的Web应用。以Ubuntu 16.04为例（14.04可能无法兼容部分依赖）。

关于NW.js

官网：https://nwjs.io/
github：https://github.com/nwjs/nw.js

1. Demo - Wechat

在这里插入图片描述

2. Demo - YoudaoDict

在这里插入图片描述

3. 准备工作

安装nodejs

sudo apt-get install nodejs

使用 ‘nodejs --version’ 可以查看安装成功的版本

安装npm

sudo apt-get install npm

使用 ‘npm --version’ 可以查看安装成功的版本

安装NW.js

sudo npm install nw -g

安装成功后会显示目录结构，使用 ‘nw --version’ 可以查看安装成功的版本

4. NW.js使用教程

(1) 创建一个html文件，里面嵌入你想定制的web应用链接

<html>
 	<head>
  		<meta charset="utf-8">
  		<title>Wechat</title>
 	</head>
 	<body>
 		 <iframe src="https://wx.qq.com/"/>
	 </body>
</html>

(2) 创建一个名为package的json文件，这是固定名称

{
	"name":"Wechat",
	"main":"Wechat.html",
	"window":{
        "title":"Wechat",
        "toolbar":false,
        "frame":true,
        "position":"center",
        "always-on-top":true,
        "width":1000,
        "height":800
    }
}

(3) 将二者打包成nw文件

sudo cat package.json Wechat.html > Wechat.nw

(4) 将所需文件放在nw程序同级目录中

(5) 创建一个sh启动脚本，路径请改为自己的nw程序路径和应用路径

#!/bin/bash
cd /usr/local/lib/nwjs-sdk-v0.27.5-linux-x64
./nw /home/zengyu/git/NWJS-Demo/Wechat/Wechat.nw

(6) 在/usr/share/applications/下创建一个后缀名为desktop的快捷方式文件，其中内容的路径请改为自己的启动脚本路径和图标路径

sudo gedit /usr/share/applications/Wechat.desktop

[Desktop Entry]
Encoding=UTF-8
Name=Wechat
Exec=sh /home/zengyu/git/NWJS-Demo/Wechat/Wechat.sh
Icon=/home/zengyu/git/NWJS-Demo/Wechat/Wechat.jpg
Categories=GTK;Network;message;
Comment=Wechat
Terminal=false
Type=Application

(7) 开始使用你定制的应用，双击快捷方式，启动后右键单击图标锁定到启动器

5. NW.js安装及运行过程中可能出现的问题及解决方案

(1) 缺少部分依赖

sudo apt-get install -f

可以自动安装缺少的依赖

(2) nw安装失败

从官网下载sdk：https://nwjs.io/

(3) 无法加载以下来源的扩展程序：xxxxxx\xxx.nw.清单文件缺失或不可读

可能原因1：检查所有相关文件编码，采用中文编码会导致该问题
可能原因2：html文件、json文件、nw文件是否都位于nwjs目录下的nw程序同级目录中

6. 推荐一些基于electron封装的应用以供使用和学习借鉴

关于electron

官网：https://electronjs.org/
github：https://github.com/electron/electron

7. 参考文献

8. 源码

Ubuntu环境下使用NW.js对web应用封装

进击的小宇宙

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Ubuntu环境下使用NW.js对web应用封装

前言相对于偏向应用的windows系统，Linux系统更偏向于开发，因此对于依赖Windows应用的人来说，缺了很多常用软件会很不习惯，本文的目的便是通过两个Demo来引出后面的教程——通过NW.js来封装你想要的Web应用。以Ubuntu 16.04为例（14.04可能无法兼容部分依赖）。关于NW.js官网：https://nwjs.io/github：https://git...
复制链接

扫一扫