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

栏目: 编程语言 · 发布时间: 5年前

内容简介:我在开发nw app时,将它看作一个前后端分离的web项目,后端服务没有一一实现,通过自己搭建的mock服务器模拟接口数据,所以这边对后端的环境依赖不做介绍,如果需要使用的话,可以根据个人的情况来实现后台API,如java、nodejs原生、express、koa等都可以。nodejs的安装就不介绍了,这里介绍一下nw,nw就是node-webkit的缩写,意味着他是一个基于nodejs开发的一个webkit内核的浏览器壳,可以嵌套我们的web页面,让我们不需要兼容不同版本的浏览器,也可以通过内置的api调

环境准备

  • 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版本:

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

添加别名

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

vim ~/.bash_profile

新增一句:

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

然后命令行输入:

nw

如果启动了nw窗口如下,表示成功了:

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

效果展示

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

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

工程目录如下:

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

可以看出就是一个简单的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

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

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

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

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

总结

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Two Scoops of Django

Two Scoops of Django

Daniel Greenfeld、Audrey M. Roy / CreateSpace Independent Publishing Platform / 2013-4-16 / USD 29.95

Two Scoops of Django: Best Practices For Django 1.5 is chock-full of material that will help you with your Django projects. We'll introduce you to various tips, tricks, patterns, code snippets, and......一起来看看 《Two Scoops of Django》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具