zoukankan      html  css  js  c++  java
  • NW.js 入坑指南

    NW.js是什么?

    NW.js 是基于 Chromium 和 Node.js 运行的, 以前也叫nodeWebkit。这就给了你使用HTML和JavaScript来制作桌面应用的可能。在应用里你可以直接调用Node.js的各种api以及现有的第三方包。因为Chromium和 Node.js 的跨平台,那么你的应用也是可以跨平台的。现在已经有很多知名的应用是基于NW.js实现,这是官方统计的一些列表: https://github.com/nwjs/nw.js/wiki/List-of-apps-and-companies-using-nw.js

    Getting Started

    先下载好最新版的 NW.js,官方网站地址。 
    我就以 nwjs-v0.12.3-win-x64为例子,先看下有哪些文件吧。

    /app/ 目录是项目的具体代码; 
    /package.json 是我添加的,等下再讲它的作用; 
    项目根目录下的其他文件都是NW.js自带的;

    项目结构

    具体的代码可以到 github 围观; 
    我把项目的代码都放在app目录下,然后以版本号区别开,比如这里的v0.0.1;这么做的目的是为后面的版本更新,更新的办法后面会详细说;

    /app/v0.0.1/assest/ 放置一些资源文件,具体的就不介绍了,等下会介绍下/app/v0.0.1/assest/read.js

    /app/v0.0.1/node_modules/ 放置一些第三方包、通过npm管理;

    /app/v0.0.1/index.html 项目的入口页面,这里我演示了如何使用第三方包 node-read 来获取一个网页的正文,具体代码可以点这里

    /app/v0.0.1/node-main.js/ 在 package.json里指定;可以在客户端崩溃的情况下,也记录下错误 具体的介绍查看这里

    /app/v0.0.1/package.json/ 告诉NW.js各种信息的配置文件,具体介绍查看这里

    package.json解析

    每个配置项的说明查看这里

    {
      "name": "demo-app",
      "main": "./app/v0.0.1/index.html",//指定项目主页面
      "build": "1445048139741",//这是为了给更新时判断版本用的
      "version": "0.0.1",//当前版本
      "homepage": "http://nero-zou.com",
      "description": "Nw.js Demo",
      "window": {
        "title": "Nw.js Demo",//如果 index.html没有title,则会显示这里的值
        "icon": "assest/img/logo.png",
        "position": "center",
        "width": 1280,
        "height": 680,
        "toolbar": true,//是否隐藏窗口的工具条
        "frame": true,//是否显示最外层的框架,设为false之后 窗口的最小化、最大化、关闭 就没有了
        "resizable": true,
        "min_width": 1028
      },
      "node-main": "./app/v0.0.1/node-main.js",//node-main.js 位置
      "contributors": [
        {
          "name": "邹志强",
          "email": "Nero@nero-zou.com",
          "web": "http://nero-zou.com"
        }
      ],
      "dependencies": { //依赖的包
        "MD5": "1.2.1",
        "cheerio": "^0.19.0",
        "fetch": "^0.3.6",
        "node-read": "^0.1.6"
      }
    }

    代码加密保护

    有些情况下,代码还是不能直接暴露给用户的;我们可以使用V8 Snapshot 的方式来达到代码加密保护的目的;

    具体的方式是使用 /nwjs.exe 来运行 nwjc source.js core.bin命令,然后再index.html里使用require('nw.gui').Window.get().evalNWBin(null, './app/v0.0.1/core.bin');(注意这里的路径,是相对于nw.exe的位置)将代码引入到项目中; 
    可以查看 使用V8 shapshot 比不使用的变化 ;

    注意 使用V8 Snapshot 还是有一些限制的 ,比如官方提到的这些; 
    还有就是加密的代码里不要使用 let、const这些关键字,我曾经就因为这个始终编译不通过;

    自动更新

    更新分为两种情况:

    • 仅仅项目的代码需要更新

    • nw.js本身也需要更新;

    通常情况下,不会遇到需要更新nw.js 本身的情况,因为当选定一个版本的NW.js后,就认定它了,除非遇到了什么无法解决的BUG;

    那我们先实现仅更新项目的代码这种情况吧,这个比较简单;前面介绍项目接口就提到 /app/v0.0.1/ 就是放置V0.0.1的所有代码的位置; 
    那么如果要更新到V0.0.2,那我们新建一个文件夹 /app/V0.0.2,然后把V0.0.2的代码都放到这个文件下,然后把/package.json替换成新版本的package.json;这样重启客户端之后,然会读取v0.0.2的代码了。具体的更新代码就不写了,可以把新版本的代码打包成zip包,然后客户端下载好,解压就行。

    下面说说NW.js本身也需要更新的情况吧,这个目前我还没遇到,所以只能提供一个思路,由于nw.exe在运行时,我们是不能替换它的,那么肯定需要用别的可执行文件来替换它了,我猜钉钉的实现方式就是这种思路:

    项目打包发布

    一般都是使用NSIS来打包,但是别忘了在打包前,把需要保护的代码加密,然后删除源文件。干这些机械、无聊的事当然不能让自己来做,必须使用Gulp.js来啊。还能把顺便把代码压缩、文件合并什么的也干了。

    一些小坑

    里面带的调试工具是不能打断点的,webstorm可以配置,然后就可以断点调试了; 
    使用NSIS打包别忘了加上文件夹权限的控制,不然会遇到文件无法写入的情况;

  • 相关阅读:
    金融期货期权
    悲剧论——情感净化
    麻将
    后现代postmodern
    AlphaGo
    上帝已死——尼采
    牛顿迭代法
    浏览器访问homestead,由http自动转换为https
    Laravel框架原理(一)--Laravel中常用的PHP语法
    Android面试宝典(1)----android的基础知识
  • 原文地址:https://www.cnblogs.com/davygeek/p/7271303.html
Copyright © 2011-2022 走看看