超市的网站怎么建设,wordpress安装模板时出现500错误,不属于企业网站建设基本标准是,wordpress new2主题使用一、创建项目目录
创建NodeJs项目目录#xff0c;项目有关的文件、依赖包都将在本目录创建和安装。
mkdir hello_electron cd hello_electronCMD执行以上命令将在用户目录下创建hello_electron并进入该目录。当然也可以手动在任何地方创建目录#xff0c;cmd中cd 路径…一、创建项目目录
创建NodeJs项目目录项目有关的文件、依赖包都将在本目录创建和安装。
mkdir hello_electron cd hello_electronCMD执行以上命令将在用户目录下创建hello_electron并进入该目录。当然也可以手动在任何地方创建目录cmd中cd 路径进入目录。
二、项目初始化
npm init初始化时按提示输入必要配置内容程序名、版本、简介、入口、作者其他的内容不输入直接回车。
C:\Users\Admin\NodejsProjects\hellonpm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See npm help init for definitive documentation on these fields
and exactly what they do.Use npm install pkg afterwards to install a package and
save it as a dependency in the package.json file.Press ^C at any time to quit.
package name: (hello)
version: (1.0.0)
description: myapp
entry point: (index.js)
test command:
git repository:
keywords:
author: me
license: (ISC)
About to write to C:\Users\Admin\NodejsProjects\hello\package.json:{name: hello,version: 1.0.0,description: electron_app,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1},author: me,license: ISC
}Is this OK? (yes)如果初始化没有提示输入生成package.json那么请手动创建
{name: hello,version: 1.0.0,description: electron_app,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1},author: ,license: ISC
}三、安装Electron
1.执行安装
electron作为nodejs项目的依赖包安装执行命令安装
npm install electron --save
# 网络有问题请使用cnpm代替前提是使用npm安装了cnpm模块cnpm安装不再详述
cnpm add electron --save
# cnpm安装的包体积稍大网络存在问题推荐使用yarn添加包前提是使用npm安装了yarn模块
yarn add electron --save等待安装
C:\Users\Admin\NodejsProjects\hellocnpm install electron --save
√ Installed 1 packages
√ Linked 82 latest versions
[1/2] scripts.postinstall electron15.1.0 › electron/get1.13.0 › global-agent2.2.0 › core-js^3.6.5 run node -e \try{require(./postinstall)}catch(e){}\, root: C:\\Users\\Admin\\NodejsProjects\\hello\\node_modules\\_core-js3.18.1core-js
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!The project needs your help! Please consider supporting of core-js:https://opencollective.com/core-jshttps://patreon.com/zloirockhttps://paypal.me/zloirockbitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstczAlso, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)[1/2] scripts.postinstall electron15.1.0 › electron/get1.13.0 › global-agent2.2.0 › core-js^3.6.5 finished in 232ms
[2/2] scripts.postinstall electronlatest run node install.js, root: C:\\Users\\Admin\\NodejsProjects\\hello\\node_modules\\_electron15.1.0electron
[2/2] scripts.postinstall electronlatest finished in 5s
√ Run 2 scripts
Recently updated (since 2021-09-25): 3 packages (detail see file C:\Users\Admin\NodejsProjects\hello\node_modules\.recently_updates.txt)Today:→ electronlatest(15.1.0) (00:39:02)
√ All packages installed (87 packages installed from npm registry, used 35s(network 30s), speed 9.19KB/s, json 82(277.92KB), tarball 0B)C:\Users\Admin\NodejsProjects\hello安装完成后package.json自动添加electorn配置信息
devDependencies: {electron: ^19.0.3}使用–save参数安装则在package.json添加dependencies 使用–save-dev参数安装则在package.json添加devDependencies 区别在于dependencies是实际环境中使用devDependencies在开发环境下使用。 2.配置启动方式
安装好electron之后想要启动electron应用还需要在package.json文件中添加启动方式
scripts: {start: electron .}scripts项添加start为electron . 四、创建应用
创建应用前需要了解的是electron应用工作基本原理首先electron是由chromium浏览器内核nodejs前端技术通过nodejs调用系统层功能来达到桌面应用开发的目的因此创建应用基本是js和html文件为主这里需要创建index.js入口文件和html显示界面。
1.index.js
应用入口文件文件名对应package.json-main
// Modules to control application life and create native browser window
const {app, BrowserWindow} require(electron)
const path require(path)function createWindow () {// Create the browser window.const mainWindow new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, preload.js)}})// and load the index.html of the app.mainWindow.loadFile(index.html)// Open the DevTools.// mainWindow.webContents.openDevTools()
}// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() {createWindow()app.on(activate, function () {// On macOS its common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length 0) createWindow()})
})// Quit when all windows are closed, except on macOS. There, its common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd Q.
app.on(window-all-closed, function () {if (process.platform ! darwin) app.quit()
})// In this file you can include the rest of your apps specific main process
// code. You can also put them in separate files and require them here. 入口文件运行于主进程作为nodejs应用运行可直接使用nodejs功能。 2.index.html
显示页面文件名对应index.js加载html文件名
!DOCTYPE html
htmlheadmeta charsetUTF-8!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --meta http-equivContent-Security-Policy contentdefault-src self; script-src selftitleHello World!/title/headbodyh1Hello World!/h1We are using Node.js span idnode-version/span,Chromium span idchrome-version/span,and Electron span idelectron-version/span.!-- You can also require other files to run in this process --script src./renderer.js/script/body
/html显示界面运行于渲染进程html可以加载js文件与项目入口index.js文件不同的是页面加载的js运行于渲染进程。渲染进程不能直接通过nodejs调用系统功能但是可以通过ipc与主进程进行通信达到调用系统层目的具体这里不再详述。 3.启动项目
npm start执行后正常就可以看到electron窗口和界面了。 五、安装指定版本包
由于electron版本差异较大如果需要使用指定版本可以在安装electron前先创建package.json如果有package-lock.json文件先删除设置dependencies和devDependencies:
dependencies: {electron: ^15.1.0},devDependencies: {electron: ^15.1.0,electron-packager: ^15.4.0}执行安装命令
npm installdependencies和devDependencies中标明的包将会通过npm进行安装。 有于electron新版本在安全方面做了更多的优化因此官方建在没有特殊需求情况下请使用最新版本。 六、electron-packager项目打包
项目打包将开发好的项目打包为可发布的程序执行目录exe主程序自动加载相关文件并显示界面不需要通过命令行。且可以通过打包为不同系统对应的程序发布。
1.安装electron-package
npm install electron-packager --save-dev安装完成后,package.json将自动在devDependencies添加electron-packager表示electron-packager在开发环境运行
devDependencies: {electron-packager: ^15.4.0}2.打包参数
在package.json中指定打包参数指定打包目录、程序名称、运行平台、位数等
scripts: {start: electron .,build: electron-packager . hello_electron --platformwin32 --archx64 --ignorenode_modules/electron-*}build参数如下
electron-packager 项目目录 app名称 --platform平台 --arch架构 --ignore要忽略的目录或文件archia3232位 、x6464位、armv7lARM、all plateformlinux Linux平台 win32 Windows平台 darwin MacOSX mas all
OS X (also known as darwin) Mac App Store (also known as mas)
3.执行打包
npm run build执行命令进行打包 执行成功
C:\Users\Admin\NodejsProjects\hellonpm run build hello1.0.0 build C:\Users\Admin\NodejsProjects\helloelectron-packager . hello_electron --platformwin32 --archx64 --ignorenode_modules/electron-*Packaging app for platform win32 x64 using electron v15.1.0
WARNING: Found electron but not as a devDependency, pruning anyway
Wrote new app to C:\Users\Admin\NodejsProjects\hello\hello_electron-win32-x64C:\Users\Admin\NodejsProjects\hello其中WARNING警告electron没有作为开发环境使用虽然打包成功但为了避免出现未知错误建议在package.json中devDependencies添加electron之后再重新执行打包
devDependencies: {electron: ^15.1.0}4.相关问题
1打包为macos操作系统的软件包时失败提示如下信息
Cannot create symlinks (on Windows hosts, it requires admin privileges); skipping darwin platform原因是命令行没有权限执行解决方法是通过管理员权限启动cmd命令行重新执行打包。
七、electron-build项目打包
electron-build相比electron-package功能更丰富些electron-build打包的项目可以同时打包.zip绿色版和.exe安装版同时还会能配置是否asar打包打包结果中海油一个未做任何压缩的版本用于查看打包结果是否正确electron-build通过配置可以在打包时移动文件目录位置配置跨平台配置打包等等当然跨平台配置不是electron-build能够交叉打包而是在对应的平台进行构建打包。
1.package.json配置
electron-build在package.json文件中主要配置build项
{name: pinmashi,version: 1.0.0,description: ,main: index.min.js,scripts: {start: electron .,build: node-gyp configure build,rebuild: node-gyp rebuild,clean: node-gyp clean,electron-build: electron-builder},build: {productName: PinMaShi, //项目名appId: com-pinmashi-app, //appid一般是com-项目名-appdirectories: {output: dist //输出目录},asar: true, //是否asar打包asar打包吧app目录作为一个asar文件files: [ //配置打包的文件目录!开头表示忽略dist/electron/**/*,**/*,!.vscode,!block_modules,!src,!other, //忽略目录!*.gyp, //忽略gyp后缀的所有文件!*.zip,!*.rar,!*.7z,!*.txt,!README.md, //忽略README.md文件!release,!*.dev.js,!renderer.js,!index.js],extraResources: [{from: ./block_modules/, //移动block_modules目录to: block_modules //到app同级目录}],nsis: { //windows安装包oneClick: false,allowElevation: true,allowToChangeInstallationDirectory: true,installerIcon: build/icons/icon.ico,uninstallerIcon: build/icons/icon.ico,installerHeaderIcon: build/icons/icon.ico,createDesktopShortcut: true, //创建桌面图标createStartMenuShortcut: true, //创建开始菜单shortcutName: PinMaShi,include: build/script/installer.nsh //安装需要的脚本},dmg: { //macos安装包contents: [{x: 410,y: 150,type: link,path: /Applications},{x: 130,y: 150,type: file}]},mac: { //macos配置icon: build/icons/icon.icns},win: { //windows配置icon: build/icons/icon.ico,target: [{target: nsis,arch: [x64]},{target: zip,arch: [x64]}]},linux: { //linux配置icon: build/icons}},author: ,license: GPL3,dependencies: {cheerio: ^1.0.0-rc.12,compressing: ^1.6.2,ssh2: ^1.11.0},devDependencies: {electron: ^20.0.2,electron-builder: ^23.6.0,node-addon-api: ^5.0.0,node-gyp: ^9.3.0}
}2.图标
在项目目录下创建以下文件
#图片
build/icons/256x256.png
#图标
build/icons/icon.ico3.安装脚本
在项目目录下创建build\script\installer.nsh
; Script generated by the HM NIS Edit Script Wizard.; HM NIS Edit Wizard helper defines custom install default dir
!macro preInitSetRegView 64WriteRegExpandStr HKLM ${INSTALL_REGISTRY_KEY} InstallLocation C:\Program FilesWriteRegExpandStr HKCU ${INSTALL_REGISTRY_KEY} InstallLocation C:\Program FilesSetRegView 32WriteRegExpandStr HKLM ${INSTALL_REGISTRY_KEY} InstallLocation C:\Program FilesWriteRegExpandStr HKCU ${INSTALL_REGISTRY_KEY} InstallLocation C:\Program Files
!macroend4.执行打包
electron-builder
