① 在linux下怎么打包直接运行的node-webkit桌面应用
node-webkit 是一个很神奇的桌面客户端项目,正如这个项目的名字,这个项目是由node 和 webkit 构成,简单来说,就是你可以用HTML 5和 node 进行桌面客户端开发,而且客户端还是同时支持在 WIN,MAC,LINUX运行. 下面,就用一个简单的例子来展示一下node-webkit的魅力.
创建项目
本例子基于Grunt构建
如果,你用过grunt,要创建一个node-webkit 非常简单,我已经写好了一个node-webkit的grunt-init的项目模板. 至于怎么安装这个模板,跟官方的教程一样. 如果你是windows 用户
md %USERPROFILE%.grunt-init\node-webkit
git clone git@github:youxiachai/grunt-init-node-webkit.git %USERPROFILE%.grunt-init\node-webkit
linux or mac
git clone [email protected]:youxiachai/grunt-init-node-webkit.git ~/.grunt-init/node-webkit
你只需要用
grunt-init node-webkit
就可以创建完毕.
app.nw 这个目录就是我们准备要开始写的pc 客户端的项目文件夹,运行node-webkit项目很简单,只需要把node-webkit 的运行环境配置到环境变量,然后运行
nw app.nw 就可以运行起来了. nodewebkit1
PS: 如果你不想接触grunt,不过我建议还是学一下grunt,你可以到github/rogerwang/node-webkit#quick-start 学习如何启动一个node-webkit应用.
效果图
oscdesk1
oscdesk2
这个就是所谓的 win 8 风格的客户端了吧....界面用的框架是这货:aozora.github.io/bootmetro/ 90% 的时间都是调整界面...蛋疼死了......连个 win8 风格的progress 都没..让我非常伤心..也可能是alpha 的原因吧. 不过最后的效果,还是很难看,就凑合着过去吧....
开发
基于node-webkit 开发pc 客户端语言支持 c/c++,html5,css3, js,node api.好了,现在我们开始用html 5 + css3 写一个pc 客户端吧. node-webkit本质就是一个可以跑node 的浏览器,所以,我们用web 开发的技巧来开发pc 客户端毫无问题.
首先,打开toolbar,在package.json文件里面有个toolbar的参数,设置为true即可,就会见到如下图所示:
toolbar
点击那个三横线的按钮,一个chrome 风的调试窗口就出来了.
console
开发的时候,我们修改完文件,并不需要重新运行程序来看结果,我们,可以直接点击左边的刷新按钮即可看到我们修改的运行结果.用node-webkit开发客户端是不是很方便了!
那么接下来,要开发一个oschina pc 客户端,我们只需要知道,相关api 就行了,从android 客户端源码里面可以得到相关api...具体代码在app/model/oschinaApi.js 文件里面.
node-webkit,已经吧相关的安全限制已经去掉,所以说,用node-webkit开发pc客户端,用webkit 发的请求不受同源限制. 用node-webkit 开发一些restful 应用是非常舒服的事情,只要有个不错的界面.关于node-webkit的东西也就这么些了,剩下的就是web 开发,不在本文node-webkit范围内,所以就不再啰嗦..
② 如何将electron框架开发的软件包打包成单一exe文件
前言：研究electron自动更新的时候，在electron的官方文档auto-updater 中，提到了在几个平台mac，linux，windows下electron 的自动更新方法，其中windsow平台上面，文章中建议先用grunt-electron-installer 模块来创建windows安装包，grunt这个工具是由Squirrel集成的。进而了解下Squirrel这个工具，
一个可以用来给electron应用的安装更新卸载添加快捷方式的工具。本文主要提及如何在windows平台下，用Squirrel创建electron的.exe安装包。
创建nuget包
我们的方法是使用nuget工具创建Nuget包，再使用Squirrel工具创建.exe。
1.下载squirrel.exe和nuget.exe，也可以选择直接安装Squirrel.Windows （需要有vitual
studio环境）。
2.新建文件夹如my-build，把下载好的squirrel.exe，nuget.exe和setup.exe
放进去，在文件夹放入我们未打包的electron应用，如下图：
4.在my-build根目录中，打开命令行执行nuget spec
如下图：
生成 spec包初始文件
5.编辑器打开 Package.nuspec，按照自己项目的需要编辑这个文件，如下图：
这里需要注意：根据Squirrel文档说明，target folder 属性需要设置为lib/net45，否则并没有用；<iconUrl>标签用来制定未来的exe的icon。
5.用下面的命令创建一个nuget包，
nuget pack Package.nuspec
如下图：
之后在目录中会出现这个包
命名规则就是<my_app_name>.<version>.nupkg
创建安装程序
把应用程序打包成nuget包之后，就可以用squirrel创建一个安装程序了。在根目录打开命令行，执行以下命令：
squirrel --releasify <my_app_name>.<version>.nupkg
这个时候命令行中没有任何提示。但是别慌，编译一段时间后程序会创建一个release文件夹，里面有三个文件，nuget包，RELEASES 文件和安装文件Setup.exe。如下图：
如果没有出现这三个文件，可以查看目录中的SquirrelSetup.log，根据里面的报错，来进行调试。
注意上面这条squirrel 命令，可以用来设置setup.exe在安装过程中用传统icon还是用自定义的图片文件。使用Squirrel --help可以查看更多帮助
发布应用和安装应用
把上一步生成的setup.exe发送给想要安装这个应用的用户，就可以了。
最终应用会被安装在C:\Users\Administrator\AppData\Local\[appname] 文件夹中，注意Squirrel 的日志文件也存在目录中，调试安装问题的时候非常有用。
双击我们的setup.exe进行安装app的测试，如果中途有任何出错，在
C:\Users\Administrator\AppData\Local\SquirrelTemp 里面可以看到安装日志。如下图：
安装之后打开C:\Users\Administrator\AppData\Local 目录，可以看到app安装在这里，如下图：
自动创建快捷方式
进入我们安装之后的文件夹，命令行进入C:\Users\Administrator\AppData\Local\[your appname]，执行 Update.exe --help ，可以看到
不知道从上图你有没有得到什么提示，反正我发现了，在命令行手动创建快捷方式的命令是Update.exe --createshortcut electron\electron.exe -i [your ico toute]\app.ico
所以，如果我们想让应用在安装过程中静默地创建好快捷方式，那就需要在app的安装之后相反设法执行这句代码。
因为我们的.exe会在安装之后自动打开程序，所以我在程序的入口main.js，添加sqruieel事件的监听就好了。如下图：
我顺便把程序卸载时，删除快捷方式的监听事件也写了进去。还有程序的更新和删除事件监听，但是这两个事件，我还没有进行测试。
更新应用
其实我一直很想做增量更新，在这里我的更新方法有两个，第一是在程序的入口添加js，发送请求到服务器，拉取更改文件进行本地替换，但是如果是node_mole依赖包的更改，这个方法并不可行。第二个方法比较安全而且快捷通过发布一个版本号不同的exe，如下：1.在这个创建安装程序的步骤2中，我们把程序代码都复制到了这个文件夹里面，如下图：
如果后续我们的程序要进行更新，首先我们需要把更改的文件直接复制替换到这个文件夹。
2.打开Package.nuspec，编辑version标签
3.参考本文种中创建安装程序部分的步骤2-4，重新生成setup.exe，发布应用。
通过执行setip.exe安装，程序会自动删除之前的应用，但是我并不清楚，sqruieel 是进行了增量替换，还是将之前的整个应用进行删除，再重新安装。
创建自定义安装包
在上一步，我们已经把自己的exe发布出来了，但是如果没有自定义名字跟icon，好像还不够酷，所以我们需要创建自定义的安装文件。
1.下载安装 Resource
Hacker
2.打开这个项目目录，在electron.exe上面右键
出现菜单，点击 Open using Rescource Hacker。
3.Resource Hacker应用运行之后中，在以下界面中选择Icon，然后在工具栏里面选择Action，Replace
Icon，如下图：
然后选择自己想要替换的.ico文件就好
4.这其实并不够，我们还需要更换exe里面的版本信息，打开Version
Info，把FileDescription和ProctName改成我们自己的项目名称，最好把SquirrelAwareVersion也更改一下，毕竟是版本号。
5.做完这些之后，我们需要按照之前的步骤，在命令行中输入
nuget pack Package.nuspec
重新生成nuget包，然后再使用
squirrel --releasify <my_app_name>.<version>.nupkg 命令创建安装文件。
6.打开之后生成的releases文件夹，参考本文种中创建安装程序部分的步骤2-4，对setup.exe进行自定义。
最后，一个可以自动更新又安装便捷，还有我们自己的酷酷的图标跟名字的应用就生成拉！
③ grunt打包的electron桌面应用，怎么实现自动更新
1、系统：windows7 64位操作系统
2、使用electron-boilerplate-vue脚手架，其中electron为v1.2.1，vue为v1.0.25
3、使用electron-packager和grunt-electron-installer打包成安装文件，以及 Squirrel.Windows
4、请先安装vs2015,并配置系统变量，保证Squirrel.Windows的安装环境