最近使用vs code网上查询发现vs code是使用electron搭建的H5桌面应用。正好最近可能有需求要做一个window的UI应用，决定入坑。折腾了2天基本测试demo可以运行，并能调用native c++ dll，中间还是遇到了很多问题，总结一下，以备后用。
先做好准备工作，
nodejs.org 下载最新的node.js并安装，
因为npm的源问题（经常有包下载不下来），安装cnpm淘宝源在npm无法下载时使用cnpm代替npm，安装命令如下
npm install -g cnpm –registry=https://registry.npm.taobao.org
或者在npm安装时替换–registry=https://registry.npm.taobao.org来下载，如
npm install -g xxxx –registry=https://registry.npm.taobao.org
淘宝npm镜像 搜索地址：http://npm.taobao.org/ registry地址：http://registry.npm.taobao.org/，
cnpmjs镜像 搜索地址：http://cnpmjs.org/ registry地址：http://r.cnpmjs.org/
然后，到http://electron.atom.io/了解一下electron,并可以在https://github.com/electron-userland查找相关帮助代码和说明
下载测试demo到本地
git clone https://github.com/electron/electron-quick-start
命令行进入demo目录，
安装electron相关工具，运行工具electron-prebuilt，打包工具electron-packager，打包编译工具electron-builder
npm install -g electron-prebuilt
npm install -g electron-packager
npm install -g electron-builder
然后在目录中执行安装
npm install
运行就可以跑起来了
npm run start
工程中只要有几个文件，
index.html 网页文件
main.js electron运行的主文件
package.json electron工程描述文件
在工程描述文件package.json中，
“main”: “main.js” 定义了运行主文件
“scripts”: {“start”: “electron .”} 可以使用的脚本，如start 默认脚本可以在npm中运行， npm run start 或者 npm start
“devDependencies”: { “electron-prebuilt”: “^1.2.0” } 工程依赖的包，^表示最小需求版本
其他描述可以参考package.json 字段详解
可以运行后，就下来我们就可以打包程序了，这里有两个工具可以使用 electron-packager和electron-builder
先安装压缩工具asar
npm install –save-dev asar
–save-dev会把相应的依赖信息写入package.json的devDependencies字段中，如果使用–save则会写入dependencies字段
使用electron-pachager
npm install –save-dev electron-packager
写入electron-pachager依赖，
在package.json的中添加如下命令
scripts: {
“pack” : “electron-packager ./ hello_world –platform=win32 –arch=x64 –asar –overwrite –out ./pack –app-version=1.0.0”
}
其中，
hello_world 是程序名称
–platform=win32 是平台信息，darwin（mac os）、win32、linux，当前是windows所谓为win32
–arch=x64 系统位数，是ia32还是x64
–asar 使用压缩格式
–icon= 指定应用的图标(Mac 为 .icns 文件，Windows 为 .ico 或 .png)
–out ./pack 指定输出的目录
–version= 可以指定编译的 electron-prebuilt 版本
–app-version=1.0.0 定义打包好程序的版本号
–all 打包全平台版本
可以简单的使用
electron-packager ./ –all
不过需要全平台的支持文件下载会很慢。
运行打包命令，生成程序包
npm run pack
使用electron-builder
npm install –save-dev electron-builder
写入electron-pachager依赖，
在package.json的中添加如下命令
“build” : {
“asar” : true,
“appId” : “electron-app.isoyo.cn”,
“app-category-type” : “public.app-category.productivity”,
“win” : {
“iconUrl” : your icon url
}
}
具体信息可参考 Options，
还需要添加生成脚本
“scripts” : { “build” : “build –platform win32 –arch x64” }
参数和electron-packager类似就不在说明了，
运行打包命令，生成程序包
npm run build
会在dist文件夹下生成程序和安装程序。
最后生成的package.json文件如下
{
“name”: “hello_world”,
“version”: “1.0.0”,
“description”: “A minimal Electron application”,
“main”: “main.js”,
“scripts”: {
“start”: “electron .”,
“pack”: “electron-packager ./ hello_world –platform=win32 –arch=x64 –asar –overwrite –out ./pack –app-version=1.0.0”,
“build” : “build –platform win32 –arch x64”
},
“repository”: {
“type”: “git”,
“url”: “git+https://github.com/electron/electron-quick-start.git”
},
“keywords”: [
“Electron”,
“hellor”,
“world”
],
“author”: “wy182000”,
“license”: “CC0-1.0”,
“bugs”: {
“url”: “https://github.com/electron/electron-quick-start/issues”
},
“homepage”: “https://github.com/electron/electron-quick-start#readme”,
“devDependencies”: {
“asar”: “^0.12.0”,
“electron-builder”: “^5.14.2”,
“electron-packager”: “^7.3.0”,
“electron-prebuilt”: “^1.2.0”
},
“build” : {
“asar” : true,
“appId” : “hellor_world.isoyo.cn”,
“app-category-type” : “public.app-category.productivity”,
“win” : {
“iconUrl” : “https://github.com/${u}/${p}/blob/master/build/icon.ico?raw=true”
}
}
}
源代码在地址 https://github.com/wy182000/electron_hello_world
下载后，运行
npm install
就可以执行其他脚本程序
npm run start
npm run pack
npm run build
运行npm可能会遇到下载缓慢或无法下载的问题，使用cnpm替换即可。
- 本文固定链接: http://www.wy182000.com/2016/07/23/electron-搭建跨平台桌面应用/
- 转载请注明: wy182000 于 Studio 发表
