uniapp + electron 打包项目

参考文献

1、控制台安装electron和electron打包工具electron-packager

npm install electron -g
npm install electron-packager -g

2、manifest.json修改

在这里插入图片描述运行的基础路径修改为:./ 不然打包出来会出现白屏,读取不到,因为打包出来的h5默认加载地址为/static/
去掉启用https协议: 不然会出现网络无法加载,去掉https不影响你请求后端的https协议。(这个可加可不加,主要是看后台有没有配置白名单这种的,影响不大)

3.h5正常打包,打包后再h5文件夹下新建 package.json和main.js文件

main.js也可以改成其他的js名称,但是package.json里面的 {main:其他.js}记得改
在这里插入图片描述
注意: build 文件 的根目录要注意,如果项目没打包过app端,则会再最外层App.vue同级生成/dist/build/h5 文件,如果之前有打包过app端的,则是多一层 unpackage/dist/build/h5

package.json 内容

我的应用—》对应之前设置的web配置的页面标题,我的是 judarhr_content_distribution

{
	"name":"我的应用",
	"version":"2.0",
	"main":"main.js",
	"scripts":{
		"test":"echo \"Error: no test specified\" && exit 1",
		"electron":"electron .",
		"start":"electron .",
		"build":"electron-packager ./ 我的应用 --plantform=win32 --arch=x64 --out 我的应用 --overwrite --icon=xdt.ico"
	},
	"author":"",
	"license":"ISC",
	"devDependencies":{
		"electron":"^23.3.13",
		"electron-packager":"^12.2.0"
	}
}

main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

let win
 
function createWindow () {
  win = new BrowserWindow({
	  width: 700, 
	  height: 400,
	  icon:'./static/logo.png', //
	  autoHideMenuBar:true,//隐藏菜单栏
	})
 //加载本地文件 index.html
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
 //打开控制器
 win.webContents.openDevTools();

  //点击关闭的时候, win 一定要释放掉
  win.on('closed', () => {
    win = null
  })
}
//加载窗体
app.on('ready', createWindow)
 
 //IOS 关闭页面(ios比较特殊win.on('closed')只是关闭显示窗口,但是后台还是会存在,更像是隐藏窗体,所以需要这种判断方式推出)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', () => {
  
  if (win === null) {
    createWindow()
  }
})

如果你的网页首页的文件名不是 “index.html”,那么请在 main.js 中将其中的 ‘index.html’ 修改为你的网页首页名。

4、打包

\dist\build\h5文件夹处执行打包命令

npm run build

5、运行

npm run start

关闭窗口则整个electron 关闭,得重新运行

6、进入调试模式

第一种:ctrl+shift+i
第二种:main.js配置 win.webContents.openDevTools();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/204253.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何使用Python的Open3D开源库进行三维数据处理

简介 在本文中,我提供了一个关于如何使用Python的Open3D库(一个用于3D数据处理的开源库)来探索、处理和可视化3D模型的快速演练。 使用Open3D可视化的3D模型(链接https://sketchfab.com/3d-models/tesla-model-s-plaid-9de8855fa…

HarmonyOS入门开发(三) 持久化存储Preferences

接入鸿蒙几天以来,发现各种和Android不一样的地方,今天来看一下Preferences存储 在Android中比如有ShardPreferences、Mmkv这些持久化存储方式,开发起来很方便,读取速度也很快,在鸿蒙里面也提供了对应的持久化存储方案…

为什么修改IP和隐藏IP地址?修改IP地址带来哪些好处?

随着互联网的普及,越来越多的人开始依赖网络进行日常生活和工作。然而,在上网过程中,我们的IP地址是暴露无遗的,这就有可能导致一些安全问题。因此,修改IP和隐藏IP地址的需求应运而生。那么,为什么要修改IP…

Vue.js 组件生命周期

Vue.js 组件生命周期 生命周期函数(钩子)就是给我们提供了一些特定的时刻,让我们可以在这个周期段内加入自己的代码,做一些需要的事情; 生命周期钩子中的this指向是VM 或 组件实例对象 在JS 中,函数的执行上下文&#…

主播岗位面试

一、自我介绍 在面试的开始阶段,你需要准备一个简洁而有力的自我介绍。这个自我介绍应该包括你的姓名、教育背景、工作经验以及你为何对这个主播职位感兴趣。这个自我介绍应该控制在1-2分钟之内,避免冗长的表述。 二、主播经历和特点 在这个环节&…

Docker的基本概念和优势,以及实际应用场景

目录 概要 基本概念 容器 (Container) 什么是容器 容器与虚拟机的区别 镜像 (Image) Dockerfile 仓库 (Repository) 容器编排 (Orchestration) Docker Compose Docker Daemon 和 Docker Client 网络 (Network) 数据卷 (Volume) 主要优势 提高移植性和可移植性 提…

elementui中添加开关控制

<template><!-- 图层管理 --><div class"home-wrapper"><div class"table-list"><div class"list"><el-table :data"tableData" height"100%" style"width: 100%;" border>&…

nginx 改变您的HTTP服务器的缺省banner

可通过HTTP获取远端WWW服务信息【原理扫描】 低风险 建议您采取以下措施以降低威胁&#xff1a;* 改变您的HTTP服务器的缺省banner。 80 系统扫描漏洞修复 已nginx-1.22.1为例 1、修改源码文件 #进入之前安装nginx的源码目录 cd /usr/local/src/nginx-1.22.1/#需要修改的…

性能优化之FPS

如果每秒钟有60帧&#xff0c;那么每一帧的时间就是总时间&#xff08;1秒&#xff09;除以总帧数&#xff08;60帧&#xff09;&#xff1a; 所以&#xff1a;每帧时间1000 毫秒/60 帧≈16.67 毫秒 因此&#xff0c;如果每秒有60帧&#xff0c;那么每一帧大约需要16.67毫秒来…

Trie字典树

文章目录 什么是 T r i e Trie Trie 树一般条件 AcWing 835. Trie字符串统计CODE解释一下 i n s e r t ( ) insert() insert() 函数 i d x idx idx 的意义 什么是 T r i e Trie Trie 树 一种树结构&#xff0c;用来存储字符串&#xff0c;能够查询某字符串是否存在 由一个统…

国内如何访问github

1 购买一台美国硅谷的服务器 https://account.aliyun.com/login/login.htm?oauth_callbackhttps%3A%2F%2Fecs-buy.aliyun.com%2Fecs%3Fspm%3D5176.8789780.J_4267641240.2.721e45b559Ww1z%26accounttraceid%3Def6b6cc734bc49f896017a234071bfd9bctf 记得配置公网的ip&#xf…

MySQL进阶知识:SQL性能优化

目录 SQL性能分析 SQL执行频率 慢查询日志 profile详情 explain执行计划 索引的使用 最左前缀法则 范围查询 索引列运算 字符串加引号 模糊查询 or连接的条件 数据分布影响 SQL提示 覆盖索引 前缀索引 索引设计原则 SQL优化 insert优化 主键优化 页分裂 …

Agent举例与应用

什么是Agent OpenAI 应用研究主管 Lilian Weng 在一篇长文中提出了 Agent LLM&#xff08;大型语言模型&#xff09;记忆规划技能工具使用这一概念&#xff0c;并详细解释了Agent的每个模块的功能。她对Agent未来的应用前景充满信心&#xff0c;但也表明到挑战无处不在。 现…

yolov5利用yaml文件生成模型

一、yolov5的yaml文件构成 yaml文件如下图 不论是backbone还是head&#xff0c;每一行都由一个列表组成&#xff0c;列表里面有四个元素&#xff0c;另外&#xff0c;还有两个参数depth和width。在搭建模型的时候&#xff0c;会利用每一行的信息生成一个模块&#xff0c;并按照…

QT QGraphicsItem 图元覆盖导致鼠标点击事件不能传递到被覆盖图元

一、概述 在日常开发中&#xff0c;遇到这样一个问题&#xff0c;线图元和引脚图元重叠&#xff0c;导致点击引脚图元&#xff0c;没有进入引脚图元的鼠标点击事件中。 二、产生原因 如果您的 QGraphicsItem 上有一个图元覆盖了它&#xff0c;可能会导致鼠标事件无法正常触发…

跟国外客户沟通用词不同,效果可能也不同

每次和客户商量好所需要的商品的细节后&#xff0c;到了开支付链接的阶段&#xff0c;我都会习惯的说&#xff1a;shall we open the payment link for you now? 其实这句话是站在我们销售的立场上来说的&#xff0c;或者说是直接从汉语翻译成英语的句式。 但是最近我却突然想…

内存占用高排查

一、定位内存占用高的进程 top指令是最常见的检测系统运行状态的指令&#xff0c;但是因为展示界面和实时刷新的限制&#xff0c;则通过top指令不一定能够发现占用的内存很高的进程。因此&#xff0c;我们使用ps aux指令检索当前系统下的所有运行的进程。 • 下述指令查看系统…

样品实验Celloxide2021P环脂肪族环氧树脂TDS说明书

样品实验Celloxide2021P环脂肪族环氧树脂TDS说明书 200克 500克 1KG/瓶

c#把bitmap格式转换为其他格式图片

增加引用命名空间 using System.Drawing.Imaging; 打开对话框的方式读入bmp格式图片&#xff0c;转换为其他格式。 也可以直接传入图片名称。 OpenFileDialog ofd new OpenFileDialog();ofd.Title "打开对话框";ofd.InitialDirectory "D:/";ofd.Filt…

强化学习-DQN

网上看来很多&#xff0c;但是还是觉得这篇文章将得最好&#xff1a; 可视化强化学习解释 - Deep Q Networks&#xff0c;循序渐进 |Ketan Doshi 博客 (ketanhdoshi.github.io)