使用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的開發後面會進行介紹，有興趣的同學可以關注一下。如果覺得這文章對你有用，歡迎點贊。謝謝大家～