首页 > 其他分享 >打包网页的一次尝试

打包网页的一次尝试

时间:2024-10-02 22:12:20浏览次数:8  
标签:尝试 网页 cnpm win electron https 窗口 com 打包

1. 下载Node.js

更换cnpm:npm install -g cnpm --registry=https://registry.npmmirror.com
C:\Users\Administrator\.npmrc中添加源

registry=https://registry.npmmirror.com
disturl=https://registry.npmmirror.com/-/binary/node
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

2. 下载electron

cnpm install electron -g

3. 下载electron-builder

cnpm install electron-builder -g

4. 编辑文件

创建文件夹并进入,然后别编写以下文件package.json,main.js

package.json
{
  "name": "envProtection",
  "version": "1.0.0",
  "description": "环保智慧化管理系统",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "pack": "electron-builder"
  },
  "author": "jmld",
  "license": "ISC",
  "devDependencies": {
    "electron": "^32.1.2",
    "electron-builder": "^23.3.3"
  },
  "build": {
    "appId": "com.example.envProtection",
    "productName": "环保智慧化管理系统",
    "directories": {
      "output": "dist"
    },
    "files": [
      "!node_modules",
      "!dist",
      "!build"
    ],
    "win": {
      "target": "nsis",
      "icon": "envprotection.ico"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    },
    "electronDownload": {
      "mirror": "https://npm.taobao.org/mirrors/electron/"
    }
  }
}



main.js
const electron = require('electron');
const Menu = electron.Menu
// 控制应用生命周期的模块
const {app} = electron;
// 创建本地浏览器窗口的模块
const {BrowserWindow} = electron;
 
// 指向窗口对象的一个全局引用,如果没有这个引用,那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win;
 
function createWindow() {
  // 隐藏菜单栏
  //Menu.setApplicationMenu(null);
  
  // 创建一个新的浏览器窗口
  win = new BrowserWindow({width: 1366, height: 768, show: false});

  win.setAutoHideMenuBar(true);
  // 并且装载应用的index.html页面
  win.loadURL(`http://www.kmhzhxt.com/`);
  // 打开开发工具页面
  //win.webContents.openDevTools();
 
  // 当窗口关闭时调用的方法
  win.on('closed', () => {
    // 解除窗口对象的引用,通常而言如果应用支持多个窗口的话,你会在一个数组里
    // 存放窗口对象,在窗口关闭的时候应当删除相应的元素。
    win = null;
  });
  // 加载完成后弹出登录框
  win.once('ready-to-show', () => {
    win.setTitle("环保智慧化管理系统");
    win.show();
  });
}
 
// 当Electron完成初始化并且已经创建了浏览器窗口,则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);
/* var mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
}); */
// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', () => {
  // 对于OS X系统,应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
 
app.on('activate', () => {
  // 对于OS X系统,当dock图标被点击后会重新创建一个app窗口,并且不会有其他
  // 窗口打开
  if (win === null) {
    createWindow();
  }
});
 
// 在这个文件后面你可以直接包含你应用特定的由主进程运行的代码。
// 也可以把这些代码放在另一个文件中然后在这里导入。



5. 打包

在上一步自建目录下配置依赖:cnpm install electron -D
全局安装打包工具:cnpm install electron-builder --save-dev -g
打包:cnpm run pack

最后在自建目录下dist下就可以看见打包好的.exe文件了




参考链接:
记一次使用 Electron 打包在线网页











下载链接:
Node.js官方
Electron主页
electron官方镜像
electron官方Demo

参考链接:
npmmirror 镜像站
https://blog.csdn.net/h__913246828/article/details/136362415
electron和node.js的版本兼容情况:https://www.npmjs.com/package/electron-releases

标签:尝试,网页,cnpm,win,electron,https,窗口,com,打包
From: https://www.cnblogs.com/used-conduit-onion/p/18445068

相关文章

  • 打包压缩三剑客
    打包压缩三剑客1.tartar命令选项完全简写创建压缩包tarzcvf/tmp/etc.tar.gz/etc/tarzcf/tmp/etc.tar.gz/etc/查看压缩包内容tarztvf/tmp/etc.tar.gztartf/tmp/etc.tar.gz解压tarzxvf/tmp/etc.tar.gztarxf/tmp/etc.tar.gz解压到指定......
  • JavaScript 网页设计案例 简单的电商案例 页面切换 数据搜索 动态网页
    JavaScript网页设计案例简单的电商案例页面切换数据搜索动态网页1.案例描述以下是一个简单的产品展示网页,用户可以通过点击不同的产品类别按钮来查看相应的产品,且在鼠标悬停时显示产品详情。页面还将包含一个搜索框,用户可以输入关键词来筛选产品。2.文件结构-......
  • 【已解决】打开知乎网页出现乱码问题
    之前一直使用MicrosoftEdge浏览器,访问知乎网一直没问题,今天突然出现了乱码,不管怎样刷新都没有用,而且刷新后还不一样:英文没有问题,中文出现了乱码。网上搜了一下,好像是关于cookie的问题,为了防止各种搜索引擎的爬虫。我寻思着我也没用爬虫啊,然后打开另一个浏览器试了一下发......
  • JS网页设计案例
            下面是一个简单的JavaScript网页设计案例,展示了如何使用HTML、CSS和JavaScript创建一个动态的网页。案例:简单的待办事项列表1.HTML部分<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"conte......
  • 【JavaScript】搭建一个具有记忆的简洁个人待办网页
    1.HTML结构文档类型声明:<!DOCTYPEhtml>这告诉浏览器这是一个HTML5文档。HTML标签:<htmllang="zh-CN">表示整个页面的内容,lang="zh-CN"表示内容使用简体中文。头部信息:<head><!--...--></head>包含页面的元数据,如字符集、视图窗口设置、标题和样式。样......
  • “无需代码,一句需求,立刻看到你的创意变成网页!“
    想象一下,一个能帮你跳过所有烦人的代码编写过程,直接根据你的需求生成页面的AI!没错,这就是v0!你只需要用自然语言描述你想要的界面,v0就会挥一挥它的“魔法鼠标”,立刻生成漂亮的UI代码。没有繁琐的手写CSS,也不需要来回切换浏览器和编辑器,一秒钟的工夫,你的网页就已经成型。v0......
  • 【Web APIs day 03 事件流、事件委托、其他事件:优化多个事件绑定和实现常见网页交互】
    WebAPIs-第3天目标:学习事件流,事件委托,其他事件等知识,优化多个事件绑定和实现常见网页交互事件流移除事件监听其他事件元素尺寸与位置综合案例事件流为什么要学习事件流?可以帮我们解决一些疑惑,比如点击子盒子会会弹出2次的问题事件流指的是事件完整执行过程中的......
  • 修改vue打包后的结构
    当一个项目需要在调用另一个项目作为子项目时,即两个vue项目,在nginx中配置两处前端,可能就需要区分两个vue项目打包后的地址1.在dist后再加一层子文件夹如childrenmodule.exports={publicPath:"children"outputDir:"dist/children",//用于放置生成的静态资源(js、cs......
  • 听我的!开展Python副业接单,你一定要去尝试的方向!
    前言上班打工不给力,打工人需要PlanB,敢问当代年轻人谁没动过搞副业的念头呢?ChatGPT的横空出世,更是让担心饭碗不保的年轻人把搞副业提上了日程。在哪个城市搞副业最卷?副业在网上炒的火热,实际上能不能挣到钱?哪个副业才是能月入过万的“财富密码”?每两个年轻人中,就有一人做过......
  • 尝试让查询更简单Rf
    为什么要写为什么要写,大概就是沉没成本吧只是从SourceGenerators出来开始,就打算以其研究是否能做aop(现在已经有内置功能了),本来当年就想尝试能否在orm做一些尝试,可惜种种原因,自己都忘了这个打算了直到今年7月份,才又想起了这个打算,现在精力不行了,本来研究一下原理和功能限制......