nw.js简单教程

2021-06-02 09:01:21 阅读：208 来源： 互联网

标签：nwjs npm 教程 resource x86 -- x64 js nw

nwjs简单教程 ,大神 or 0基础请绕道。本文主要介绍在vscode中调试、运行、打包nwjs程序，本人是做后端开发的，如有不足请见谅。

创建项目页面

vscode 打开项目文件夹，在此文件夹新建文件夹命名为resource，在resource内新建index.html页面，页面内容随意，比如：Hello World!

初始化配置文件

Ctrl+~打开终端，输入npm init初始化package.json。注意：entry point: (index.js) resource/index.html程序入口这一项要配置正确，就是第一步中创建的index.html页面路径。正确的配置是这样的：

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "nwjs使用",
  "main": "resource/index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
  "author": "Q:915944185",
  "license": "ISC"
}

安装打包工具

比官方的打包步骤要简单一些

终端命令 npm install nwjs-builder-phoenix --save-dev

pcakage.json配置

新增以下配置：

"build": {
    "nwVersion": "0.27.5"//这个是nwjs版本，请选择适合您的版本，27.5体积小
  }

修改script配置

"scripts": {
    "dist": "build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
    "start": "run --x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
  }

--tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64要打包的平台，按需配置

新增nwjs窗体配置，具体属性，请参考nwjs官方文档

  "window": {
    "title": "hello world",//左上角名称
    "icon": "resource/logo.png",//左上角图标、任务栏图标
    "width": 600,
    "height": 450,    
    "toolbar": false,
    "frame": true,//是否有边框，为false时，顶部按钮就隐藏，关闭窗口等操作需自己实现
    "resizable": false,
    "position": "center",
    "transparent": false,
    "show": true//控制窗体默认是否显示
  },
  "node-remote": "*://*",

package.json最终配置：

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "nwjs使用",
  "main": "resource/index.html",
  "window": {
    "title": "hello world",
    "icon": "resource/logo.png",
    "width": 600,
    "height": 450,    
    "toolbar": false,
    "frame": true,
    "resizable": false,
    "position": "center",
    "transparent": false,
    "show": true
  },
  "node-remote": "*://*",
  "scripts": {
    "dist": "build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
    "start": "run --x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
  },
  "build": {
    "nwVersion": "0.27.5"
  },
  "author": "Q:915944185",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "nwjs-builder-phoenix": "^1.15.0"
  }
}

运行项目

终端命令：npm run start

此命令运行的是sdk版本的即开发版，主要方便调试，可以F12或者右键打开开发者工具
在这里插入图片描述

打包项目

项目调试好了，最后打包发布，此过程就是把nwjs由开发版转换发布版的过程，二者区别，发布版默认不带开发者工具，体积小点。

终端命令：npm run dist

该命令会根据script配置的打包平台，进行打包，打包完最终文件会在项目目录下dist文件夹内

在这里插入图片描述

有帮助请点个赞~

标签：nwjs,npm,教程,resource,x86,--,x64,js,nw
来源： https://blog.csdn.net/u012981972/article/details/117459213

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。