乐趣区

使用nwvue开发一个桌面应用程序Mac

jiezi

环境准备

  • nodejs
  • nwjs
  • vue-cli3
  • vue

我在开发 nw app 时，将它看作一个前后端分离的 web 项目，后端服务没有一一实现，通过自己搭建的 mock 服务器模拟接口数据，所以这边对后端的环境依赖不做介绍，如果需要使用的话，可以根据个人的情况来实现后台 API，如 java、nodejs 原生、express、koa 等都可以。

安装 nw

nodejs 的安装就不介绍了，这里介绍一下 nw，nw 就是 node-webkit 的缩写，意味着他是一个基于 nodejs 开发的一个 webkit 内核的浏览器壳，可以嵌套我们的 web 页面，让我们不需要兼容不同版本的浏览器，也可以通过内置的 api 调用一些底层方法。官网在这：https://nwjs.io/

下载 sdk 版本：

添加别名

下载完成后解压将文件下的 nwjs.app 复制到应用程序目录下，然后添加别名，让我们调试程序更加方便

vim ~/.bash_profile

新增一句：

alias nw="/Applications/nwjs.app/Contents/MacOS/nwjs"

然后命令行输入：

nw

如果启动了 nw 窗口如下，表示成功了：

效果展示

本次简单的模拟一个微信页面

工程目录如下：

可以看出就是一个简单的 vue 工程，我们需要在 package.json 中修改一些配置：

{
  "main": "localhost:8080/",
  "node-remote": "http://localhost:8080/",
  "chromium-args": "--load-extension='./node_modules/nw-vue-devtools/extension'","window": {"width": 830,    // 窗口的初始宽度"height": 580,  // 窗口的初始高度"frame": false  // 不显示默认边框},
}

其他的页面就根普通的 vue 工程一样的开发就可以了。如果需要使用 nwjs 的 api，则需要将 node-remote 开启：

{"node-remote": "http://localhost:8080/",}

使用时如下，如应用的最大化最小化组件：

<script>
  import img from '@/assets/avatar.png'
  const win = nw.Window.get()
  export default {data () {
      return {now: 1}
    },
    computed: {avatar () {return img}
    },
    methods: {close () {nw.App.quit()
      }, 
      min () {win.minimize()
      },
      max () {win.toggleFullscreen()
      },
      to (num) {this.now = num}
    }
  }
</script>

代码编写完成后，在项目的根目录执行：

yarn serve

然后另外打开一个窗口执行：

nw .

就可以看到程序已经可以本地运行了。

app 打包

步骤如下：

  1. vue 项目打包：yarn build
  2. dist 目录下的新增 package.json，将依赖删除，如下：
{
  "name": "nwapp",
  "version": "0.1.0",
  "main": "index.html",
  "window": {
    "width": 830,
    "height": 580,
    "debug": true,
    "frame": false
  }
}
  1. 然后将 dist 目录打包并改名为 app.nw

  1. 拷贝 nwjs.app 并改名为 mywechat
  2. 将 app.nw 复制到 ’/Applications/mywechat.app/Contents/resources’ 下


整个程序便打包成功，可以点击运行了。

总结

网上有很多比较 electron 和 nw 的文章，但是很少有用 electron 和 nw 从零开始到打包发布的整个过程的文章。于是自己实践试了一下 electron 和 nw，发现 nw 的整个开发过程是很舒服的，可能宣传得不如 electron 吧。electron 的开发后面会进行介绍，有兴趣的同学可以关注一下。如果觉得这文章对你有用，欢迎点赞。谢谢大家～

退出移动版