环境准备
- 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打包
步骤如下：
- vue项目打包： yarn build
- dist目录下的新增package.json，将依赖删除，如下：
{
"name": "nwapp",
"version": "0.1.0",
"main": "index.html",
"window": {
"width": 830,
"height": 580,
"debug": true,
"frame": false
}
}
-
然后将dist目录打包并改名为app.nw
image.png 拷贝nwjs.app并改名为mywechat
将app.nw复制到'/Applications/mywechat.app/Contents/resources'下
整个程序便打包成功，可以点击运行了。
总结
网上有很多比较electron和nw的文章，但是很少有用electron和nw从零开始到打包发布的整个过程的文章。于是自己实践试了一下electron和nw，发现nw的整个开发过程是很舒服的，可能宣传得不如electron吧。electron的开发后面会进行介绍，有兴趣的同学可以关注一下。如果觉得这文章对你有用，欢迎点赞。谢谢大家～
