使用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的開發後面會進行介紹，有興趣的同窗能夠關注一下。若是以爲這文章對你有用，歡迎點贊。謝謝你們～