使用nw+vue开发一个桌面应用程序(Mac)

环境准备

• 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的开发后面会进行介绍，有兴趣的同窗能够关注一下。若是以为这文章对你有用，欢迎点赞。谢谢你们～