内容简介:我在开发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版本:
添加别名
下载完成后解压将文件下的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
- 拷贝nwjs.app并改名为mywechat
- 将app.nw复制到'/Applications/mywechat.app/Contents/resources'下
整个程序便打包成功,可以点击运行了。
总结
网上有很多比较electron和nw的文章,但是很少有用electron和nw从零开始到打包发布的整个过程的文章。于是自己实践试了一下electron和nw,发现nw的整个开发过程是很舒服的,可能宣传得不如electron吧。electron的开发后面会进行介绍,有兴趣的同学可以关注一下。如果觉得这文章对你有用,欢迎点赞。谢谢大家~
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Vue+Electron桌面应用程序
- Canonical通过Flutter启用Linux桌面应用程序支持
- 【Electron】使用 electron-vue 高效构建桌面应用程序
- 通过XAML Islands使Windows桌面应用程序现代化
- 舍弃Electron,使用HTML5 + Golang创建桌面应用程序
- 用户界面 – 用于GUI桌面应用程序的Haskell或D?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
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》 这本书的介绍吧!