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

前言

相对于偏向应用的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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ZFYDFQ7-1578221350736)(https://github.com/universezy/NW.js-Demo/blob/master/image/wechat.png?raw=true)]


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>Wechattitle>
 	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

  1. 钉钉:DingTalk
  2. 微信:Wechat

7. 参考文献

  1. 为什么微信没有for linux?
  2. Ubuntu环境下的nwjs安装使用
  3. NW.js打包Axure原型(HTML)文件常见问题
  4. nwjs安装演示

8. 源码

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

你可能感兴趣的:(NW.js)