1. Electron研发要求

需要Html&nodejs等前端知识
需要C++基础
需要了解Node-ffi插件，主要用户前端调用DLL，同时要属性相关参数转换、回调注册等处理
需要理解Electron架构、内部模块，主进行和各渲染进行相关架构，窗口消息机制等

2.环境搭建

参考Electron官方文档：https://www.electronjs.org/docs

参考：https://www.bilibili.com/video/BV177411s7Lt?p=2

1.首先需要安装node环境。官网下载地址：https://nodejs.org/zh-cn/；安装版本v12.19.0。安装会默认安装npm。安装完毕之后通过命令行查看是否安装成功；

2.安装npm管理包：npm install -g cnpm --registry=https://registry.npm.taobao.org

3.本地创建一个文件夹，添加main.js与html之后，执行nmp init -y 生成package.json

4.安装electron：

duso npm install --save-dev electron@10.1.4 -g

5.执行npm run或electorn -v

总结：

nodejs: v12.19.0

electron: v10.1.4

npm 6.14.8

4.Electron打包

https://www.jianshu.com/p/13bfc11bd461

1.安装打包工具 sudo npm install --save-dev electron-packager

2.package.json中添加

{
....   ...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"package": "electron-packager . 'vhallenjoyclient' --platform=darwin --arch=x64 --icon=app.icns --out=./dist --asar --app-version=1.0.0 --electron-version=10.1.4 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config*|node_modules)\"",
"packageDarwin": "electron-packager . 'vhallenjoyclient' --platform=darwin --arch=x64 --icon=app.icns --out=./dist --asar --app-version=1.0.0 --electron-version=10.1.4 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config*|node_modules)\"",
"packageDarwin2": "electron-packager . 'vhallenjoyclient' --platform=darwin --arch=x64 --icon=app.icns --out=./dist --asar --app-version=1.0.0 --electron-version=10.1.4",
"packageWin": "electron-packager . 'vhallenjoyclient' --platform=win32 --arch=x64 --icon=app.ico --out=./dist --asar --app-version=1.0.0 --electron-version=10.1.4 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\"",
"packageWin2": "electron-packager . 'vhallenjoyclient' --platform=win32 --arch=x64 --icon=app.ico --out=./dist --asar --app-version=1.0.0 --electron-version=10.1.4"
},....   ..."devDependencies": {
"electron-packager": "^13.1.1"
}
}

3.执行命令

npm run-script package

生成 /Users/vhall/vhallenjoyclient/dist

4.编辑/Users/vhall/vhallenjoyclient/dist/vhallenjoyclient-darwin-x64/vhallenjoyclient.app/Contents/Info.plist中添加

<key>CFBundleURLTypes</key>
<array><dict><key>CFBundleTypeRole</key><string>Editor</string><key>CFBundleURLName</key><string>vhallenjoyclient url</string><key>CFBundleURLSchemes</key><array><string>vhallenjoyclient</string></array></dict>
</array>

Info.plist

 <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0"><dict><key>BuildMachineOSBuild</key><string>18E226</string><key>CFBundleDisplayName</key><string>vhallenjoyclient</string><key>CFBundleExecutable</key><string>vhallenjoyclient</string><key>CFBundleIconFile</key><string>electron.icns</string><key>CFBundleIdentifier</key><string>com.electron.vhallenjoyclient</string><key>CFBundleInfoDictionaryVersion</key><string>6.0</string><key>CFBundleName</key><string>vhallenjoyclient</string><key>CFBundlePackageType</key><string>APPL</string><key>CFBundleShortVersionString</key><string>1.0.0</string><key>CFBundleVersion</key><string>1.0.0</string><key>DTCompiler</key><string>com.apple.compilers.llvm.clang.1_0</string><key>DTSDKBuild</key><string>10.15</string><key>DTSDKName</key><string>macosx10.15</string><key>DTXcode</key><string>1110</string><key>DTXcodeBuild</key><string>11A1027</string><key>LSApplicationCategoryType</key><string>public.app-category.developer-tools</string><key>LSMinimumSystemVersion</key><string>10.10.0</string><key>LSRequiresNativeExecution</key><true/><key>NSCameraUsageDescription</key><string>This app needs access to the camera</string><key>NSHighResolutionCapable</key><true/><key>NSMainNibFile</key><string>MainMenu</string><key>NSMicrophoneUsageDescription</key><string>This app needs access to the microphone</string><key>NSPrincipalClass</key><string>AtomApplication</string><key>NSQuitAlwaysKeepsWindows</key><false/><key>NSRequiresAquaSystemAppearance</key><false/><key>NSSupportsAutomaticGraphicsSwitching</key><true/><key>CFBundleURLTypes</key>
<array><dict><key>CFBundleTypeRole</key><string>Editor</string><key>CFBundleURLName</key><string>vhallenjoyclient url</string><key>CFBundleURLSchemes</key><array><string>vhallenjoyclient</string></array></dict>
</array></dict>
</plist>

5.打包pkg

执行命令

pkgbuild --install-location /Applications --component /Users/vhall/vhallenjoyclient/dist/vhallenjoyclient-darwin-x64/vhallenjoyclient.app  /Users/vhall/vhallenjoyclient/dist/vhallenjoyclient.pkg

生成安装包 vhallenjoyclient.pkg

https://www.jianshu.com/p/6e6950e6bde0

6.Mac os URL Schemes 执行

vhallenjoyclient://参数

就能够打开对应的本地应用（vhallenjoyclient）

Electron环境搭建-Mac以及URL Schemes启动相关推荐

flume-kafka环境搭建-mac单机模式
flume-kafka环境搭建-mac单机模式本文内容:(1)mac系统搭建单机模式flume.kafka (2)flume监听本机端口并实时输出数据至控制台 (3)flume监听端口,发送数据至k ...
vue开发环境搭建Mac版
一.前言因工作缘故,需要做一个移动端app,面对2016下半年至今webapp最流行的三个技术React,angular,vue,三选一,如何先,经过前期的技术选型,最后决定使用vue.具体查看本人 ...
Hetian lab day3 LAMP环境搭建(Mac环境)
LAMP环境搭建课后题 lamp:linux+apache+mysql+php 合天网安实验室使用的是centos,我这里使用的是macOS Mojave. [解析]如上. [解析]无 [解析]使用格 ...
cocos2d-x 4.0 学习之路（一）环境搭建 Mac版
我的Mac系统:MacOS Catalina 10.15.3,Xcode 11.3.1 (Windows上的环境搭建,请参考我的另一篇博客,环境搭建Windows版) 准备工作: 1.检查Python ...
mac 本地php环境搭建,mac下php环境搭建的方法
mac下php环境搭建的方法是:首先切换到root用户:然后查看80端口是否被占用:接着开启apache,并在"httpd.conf"中开启php模块:最后编写php代码进行测试即 ...
mac qt android开发环境搭建,Mac 下 PyQt5 的开发环境搭建
准备Qt的开发工具: 下载安装 py 的运行环境: 1.安装brew: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubuserconten ...
JMeter教程1 - 介绍环境搭建 (Mac)插件安装
目录一.JMeter 介绍 JMeter与LoadRunner比较 JMeter缺点二. JMeter 安装 1.官网下载JMeter 2.安装JMeter 3.配置环境变量 4.汉化 5.安装P ...
Python环境搭建(mac)
mac: 1.下载Python的安装包. 安装Python. 2.加入没有修改安装位置,您可以在 /Applications 目录下的 Python 目录中找到新安装的文件. 最重要的部分是图形化 P ...
win10下Vue环境搭建（脚手架初始化+项目启动）教程（详解多图）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.下载安装node.js 二.node.js环境配置三.下载安装vue脚手架前言初学Vue 搭环境快把我整死了 ...

Electron环境搭建-Mac以及URL Schemes启动

1. Electron研发要求

2.环境搭建

4.Electron打包

Electron环境搭建-Mac以及URL Schemes启动相关推荐

最新文章

热门文章