手把手教你将H5项目打包桌面应用

最近在做的项目,因为素材敏感,要求前端安全防护防止素材被copy.选用的技术方案是利用NW将H5打包成桌面应用,这样资源请求是无法在控制台查看的,做了一些基本的限制;博客分为两篇,第一篇主要讲 NW基本用法和打包桌面应用的方法;第二篇主要是一些优化,包括自动全屏 更换exe封面 快捷方式图标以及生产遇到的坑等.

1. NW起步

NW官网介绍—NW是从DOM/WebWorker层,直接调用所有的Node模块，
使用现有的web技术，开启一个全新的编写应用的方式。
因为官网需要翻墙下载比较慢,链接: 0.44.1 SDK&PRODUCT 下载.官网下载对应系统的版本https://nwjs.io/

2.NW 调试

这里说明一下,只有SDK版本才可以进行调试,在网上看到也可以直接用npm安装,试了一下,太菜,打包后许多的样式乱了.没有排查到原因和调试的方法,我也是第一次接触没有深入研究.当然用npm自动构建还是比较方便的,敲一下命令就ok了.有了解的大佬希望可以指正或分享一下.本篇博客是以SDK的方式+Vue项目进行开发调试的,转入正题:

1. 下载安装包,解压到个人的项目目录;打开nwjs-sdk-v0.44.1-win-x64文件夹(app是新建的文件夹,存放Vue build后将static文件夹+index.html),目录如下:
   

2.1配置package.json

在app文件夹中创建package.json,应用的配置文件,这个必须声明；index.html作为应用的入口文件,命名自定义,但是一定要和配置中的“main”参数设置一致；如果要引用node模块，可以在目录结构中增加一个node_modules的目录，以存放APP所需的node模块.配置项官网很详细不再赘述

{
  "main": "index.html",
  "name": "nwtest",
  "version": "1.0.0",
  "keywords": [
    "nw测试",
    "nw教程"
  ],
  "window": {
    "title": "字符串，设置默认 title",
    "width": "100%",
    "height": "100%",
    "toolbar": true,
    "icon": "./favicon.ico",
    "position": "center",
    "min_width": 1366,
    "min_height": 768,
    "resizable": true,
    "always-on-top": true,
    "fullscreen": true,
    "show_in_taskbar": true
  }
}

然后直接拖拽app文件件到nw.exe上,用nw打开,此时可以在新打开的应用中,右键打开控制台进行一些查看和调试;现在来说初步成功,流程已经走通

2.2 打包

(1)进入app文件夹,全选其中所有的文件,添加到压缩文件(注意并不是app文件夹),并更改后缀为nw. 将app.nw放在nw.exe同级目录下，打开CMD执行以下命令,跟nw一起打包成一个可执行文件

copy /b nw.exe+app.nw app.exe

此时在目录中会生成一个app.exe 双击即可打开,需要注意的是这个exe还是依赖于文件夹中的NW环境及文件;所以还是不能脱离此文件夹的,当然这个交付用户体验不太好,而且exe图标未自定义等等.下一篇博客会主要讲一下这方面的处理方法

注意

1. 注意添加到压缩文件的是app文件夹中的所有内容,而不是直接压缩app这个文件夹;
2. SDK 建议还是选用最新的稳定版本,个人因为翻墙下载老失败,从网上找了一个比较老的版本,测试全是坑啊,浪费了很多时间;

NW基本用法和打包桌面应用,这篇博客基本就是这样;写的比较直白,对NW研究也仅限于是这次项目开发,有错误或者优化的地方,欢迎指正交流;