zoukankan      html  css  js  c++  java
  • NW.js桌面应用开发(一)

    NWjs中文网

    Electron中文网

    一些需要了解的历史与特性,其实就是 NW.js 和 Electron 的争议,建议还是亲自阅读一下各自的官网说明

    1、下载SDK版工具

    淘宝NPM镜像下载,速度飞快,我选择最新的 https://npm.taobao.org/mirrors/nwjs/v0.41.2/nwjs-sdk-v0.41.2-win-x64.zip 版本,对应 Chromium 77 + Node 12.9.1

    然后就可以按照官网快速入门例子,就像构建一个Node项目一样从package.json起手,首先构建一个静态页面的应用。

    2、编辑源文件

    准备好package.json和index.html两个文件

    {
        "name": "helloworld",
        "main": "index.html"
    }

    注意:Windows系统的默认编码是GBK,而我们经常写代码用的是UTF-8(VS除外),这里index,html的编码格式就得改一改了,否则就像CMD黑窗口一样,UTF-8中文显示乱码

    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello World-这是标题!</title>
      </head>
      <body>
        <h1>Hello World-这是正文!</h1>
      </body>
    </html>

    3、运行应用

    在这之前,我先配置一下环境变量,当然你也可以直接把应用拖到解压后的 nwjs-sdk-v0.41.2-win-x64 目录下去运行,不过作为一个balabalabala...,我还是要配个SDK的环境变量,就可以在别的目录下写应用代码了

    注意:准备好静态文件,配好环境变量后要开始运行应用了,这里用的是你的应用的整个目录,而不是package.json或index.html某个文件,效果如下

     4、打包应用

    参考 https://www.jianshu.com/p/3337701f9b80,或者手动打包 https://www.cnblogs.com/sener/p/8366164.html

    这个比较坑,方式有好几种,这里选择推荐的 nwjs-builder-phoenix 工具打包,试了几次才成功

    首先需要把package.json文件补全

    {
      "name": "helloworld",
      "version": "0.1.0",
      "description": "this is first nw app",
      "main": "index.html",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "dist": "build --tasks win-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
        "start": "run --x64 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
      },
      "author": "jxh",
      "license": "ISC",
      "build": {
        "nwVersion": "0.41.2"
      },
      "dependencies": {},
      "devDependencies": {
        "nwjs-builder-phoenix": "^1.15.0"
      },
      "window": {
        "title": "hello nw",
        "width": 840,
        "height": 600,
        "toolbar": true,
        "resizable": false,
        "icon": "./hello.png"
      }
    }

    前面的名称,版本,描述不用多说,mian是应用入口,参照官网说明

    scripts是打包脚本,参照 https://github.com/evshiron/nwjs-builder-phoenix 说明,里面有个配置例子 https://github.com/evshiron/nwjs-builder-phoenix/blob/master/assets/project/package.json

    --tasks win-x64 是需要打包生成的的平台文件,可以一次性打包其他平台的,用 , 隔开,比如win-x86

    --mirror https://npm.taobao.org/mirrors/nwjs/ . 是下载nwjs的镜像地址

    window是应用窗口的一些配置

    打包的时候直接运行 npm run dist 开始打包,就会生成所有文件了,运行结果如下,其实就是自动下载NWjs,然后把源文件copy到dist下

    PS E:CodeNW_Learn1_HelloWorld> npm run dist                                                                         
    > helloworld@0.1.0 dist E:CodeNW_Learn1_HelloWorld
    > build --tasks win-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .
    
    Starting building tasks... { tasks: [ [ 'win', 'x64' ] ], concurrent: false }
    Building for win, x64 starts...
    Fetching NW.js binary... { platform: 'win',
      arch: 'x64',
      version: '0.41.2',
      flavor: 'normal' }
    
    [==================================================] 6002.55KB/s 0.0s
    
    Building targets...
    Building directory target starts...
    Building directory target ends within 11.59s.
    Building for win, x64 ends within 28.89s.
    PS E:CodeNW_Learn1_HelloWorld> 

    然后在当前目录下生成 dist/helloworld-0.1.0-win-x64目录

     点击helloworld.exe就可以执行了,查看其详细信息,就是配置的那些

    5、遇见的坑

    5.1 不要使用 cnpm 安装nwjs-builder-phoenix,我的好像莫名的多下了一些依赖文件,然后打包的时候发生了莫名的化学反应,导致node_modules变成了1.3G,还自动把 node_modules 复制到 dist 下去了,然后打包出来的是个巨大的废包,还是手动  npm config set registry https://registry.npm.taobao.org 设一下镜像吧

    5.2 千万不要把这句话抄过来,否则生成好几个平台的目录可慢了

    "dist": "build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",

    5.3 这个生成压缩文件的也还是不要选了

    "targets": [
          "zip",
          "nsis7z"
     ]

    5.4 可能是由于 5.1 的原因,我打包一直生成一对废品,后来删了 node_modules重新用npm安装,再打包就好了

    6、一些说明

    就一个helloworld,打包后的文件夹有211M,压缩后63M,是因为这东西就是个Chrome浏览器

    不推荐将整个应用打包为一个exe文件,虽然看起来逼格高一点,但是不好更新

    7、Electron

    又试了试electron,文档确实比NWjs齐全很多,起手也非常简单

    7.1、开始构建

    GitHub提供了简单的 QUICK-START 项目,首先从 https://github.com/electron/electron-quick-start 把代码下下来

    然后在目录下 npm install 安装依赖

    然后 npm start 启动就可以了

     这个不会中文乱码,不需要改GBK

    7.2、打包

    参照  Electron桌面应用打包流程 和 官网打包教程

    7.3、补充说明

    GitHub上Electron主要有三个部分

    electron: 项目源码

    electron-quick-start: 快速构建示例

    electron-api-demos:api演示程序,配合上quick-start用来试验非常友好,要注意的一点是这个项目下下来后 npm install 可能会卡在下载依赖的地方不动了,因为他自己依赖了 electron-download 模块,该模块会自己从GitHub上去下载electron的源码,而不是用npm,所以要是卡住了可以直接ctrl+c终止,然后手动 npm install electron就可以了,或者直接用cnpm install也可以一次性通过,不过不建议这么做(打包可能出问题)。

  • 相关阅读:
    POJ 2236 Wireless Network(并查集)
    POJ 2010 Moo University
    POJ 3614 Sunscreen(贪心,区间单点匹配)
    POJ 2184 Cow Exhibition(背包)
    POJ 1631 Bridging signals(LIS的等价表述)
    POJ 3181 Dollar Dayz(递推,两个long long)
    POJ 3046 Ant Counting(递推,和号优化)
    POJ 3280 Cheapest Palindrome(区间dp)
    POJ 3616 Milking Time(dp)
    POJ 2385 Apple Catching(01背包)
  • 原文地址:https://www.cnblogs.com/jixiaohua/p/11668305.html
Copyright © 2011-2022 走看看