推荐几个手机能看的网站,惠州网站模板建站,东四网站建设,南通开发区：高质量发展electron与cesium组件入门应用功能
运行应用效果图#xff1a;
electron应用目录#xff0c;需要包括三个文件: index.html main.js package.json
(一)、创建一个新项目 目录名称#xff1a;project_helloWolrd
(二)、生成package.json文件
npm init --yes(三#x…electron与cesium组件入门应用功能
运行应用效果图
electron应用目录需要包括三个文件: index.html main.js package.json
(一)、创建一个新项目 目录名称project_helloWolrd
(二)、生成package.json文件
npm init --yes(三、运行该项目方法一 在终端cmd输入如下命令
electron .(四)、运行该项目方法二 # #start cli cammand 全局安装
cnpm install -g electron electron-forge/cli#build cli electron-builder 打exe安装包我们使用electron-builder工具包安装命令如下。 全局安装
cnpm install -g electron-builder开始/打包生成exe文件
npm run start
npm run build# 注意json文件不能带注释复制上面的文本后记得注释去掉。 修改package.json添加一条scripts命令和build配置。 scripts: {start: electron-forge start,build: electron-builder --win // 打包命令},devDependencies: {electron-forge/cli: ^6.2.1,electron: ^25.4.0,electron-builder: ^24.6.3},dependencies: {cesium: ^1.112.0,electron-forge/cli: ^6.2.1},// electron-builder配置build: {productName: 我的应用, // 安装应用后桌面名称directories: {output: out // 输出的文件目录},win: {icon: ./ico/logo.ico, // 安装的图标target: [{target: nsis,arch: [x64,ia32]}]},nsis: {oneClick: false,allowElevation: true,allowToChangeInstallationDirectory: true,installerIcon: ./ico/logo.ico,uninstallerIcon: ./ico/logo.ico,installerHeaderIcon: ./ico/logo.ico,createDesktopShortcut: true,createStartMenuShortcut: true,shortcutName: 我的应用}}# #如果报错可以采用node_modules目录删除重新下载依赖包
cnpm install#cesium安装cmd命令 //OK
cnpm install cesium --save五)、源代码 main.js主程序文件内容
const { app,BrowserWindow}require(electron);
const pathrequire(path);const createWindow(){const mainWindownew BrowserWindow({width:600,height:400,});mainWindow.loadFile(path.join(__dirname,indexCesium.html)); //index.html indexCesium.html////mainWindow.loadURL(https://gitee.com);//mainWindow.loadURL(https://blog.csdn.net/hsg77);
}//监听应用启动事件
app.on(ready,createWindow);indexCesium.html
!DOCTYPE html
html langenheadmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, minimum-scale1, user-scalablenotitleMy Cesium App/titlescript src./node_modules/cesium/Build/Cesium/Cesium.js/scriptstyleimport url(./node_modules/cesium/Build/Cesium/Widgets/widgets.css);html,body,#cesiumContainer {height: 100%;margin: 0;padding: 0;overflow: hidden;}/style
/headbodydiv idcesiumContainer/divscriptvar viewer new Cesium.Viewer(cesiumContainer, {imageryProvider: new Cesium.TileMapServiceImageryProvider({url: Cesium.buildModuleUrl(Assets/Textures/NaturalEarthII),})});/script
/body/htmlindex.html
htmlheadmeta charsetUTF-8titleelectron Helloworld/titlelink refstylesheet hrefcss/base.css//headbodyh1这是一个electron项目/h1h2这是一个electron项目/h2h3这是一个electron项目/h3h4这是一个electron项目/h4h5这是一个electron项目/h5/body
/htmlcss/base.css
h1 {color:blue;}h2 {color:red;}package.json文件内容
{name: project_helloworld,version: 1.0.0,description: 生成package.json文件\r npm init --yes,main: main.js,scripts: {test: echo \Error: no test specified\ exit 1,dev: electron-forge start,start: electron-forge start,build: electron-builder --win},keywords: [],author: ,license: ISC,devDependencies: {electron-forge/cli: ^6.2.1,electron: ^25.4.0,electron-builder: ^24.6.3},dependencies: {cesium: ^1.112.0,electron-forge/cli: ^6.2.1},build: {productName: 我的应用,directories: {output: out},win: {icon: ./ico/logo.ico,target: [{target: nsis,arch: [x64,ia32]}]},nsis: {oneClick: false,allowElevation: true,allowToChangeInstallationDirectory: true,installerIcon: ./ico/logo.ico,uninstallerIcon: ./ico/logo.ico,installerHeaderIcon: ./ico/logo.ico,createDesktopShortcut: true,createStartMenuShortcut: true,shortcutName: 我的应用}}
}
本blog地址https://blog.csdn.net/hsg77
