1、配置镜像

因为下载慢,所以。(网速快的可以跳过这步)

右键我的电脑-属性-高级系统设置-高级-环境变量-新建

变量名:

ELECTRON_MIRROR

变量值:

https://cdn.npm.taobao.org/dist/electron/

完成下面步骤后,可以删除该变量

2、安装nodejs

百度一下(已安装的跳过)

检查系统变量path里有没有

C:\Users\你的用户名\AppData\Roaming\npm

3、安装electron(主程序)

这里代码是全局安装,个人推荐,局部安装的查阅本文档第一行的官方文档里

npm install electron -g

4、安装electron-packager(打包用)

npm install electron-packager -g

这里也是全局安装,因为全局只需安装一次,以后不需要重复安装

安装的程序目录地址:

C:\Users\你的用户名\AppData\Roaming\npm\node_modules

5、uniapp的manifest.json修改

根目录下的manifest.json-h5配置

运行的基础路径修改为:

./ 

不然打包出来会出现白屏,读取不到,因为打包出来的h5默认加载地址为/static/

去掉启用https协议

6、h5打包

HbuilderX顶部菜单栏-发布-h5手机版发行-发行

发现的默认目录为:unpackage\dist\build\h5

7、新建

你的项目目录/
├── static
└── index.html

新建package.json和main.js

新建后项目目录/
├── static
├── package.json
├── main.js
└── index.html

在 package.json 中添加如下内容

{
"name" : "app-name",
"version" : "0.1.0",
"main" : "main.js"
}

在 main.js 中添加下面的内容,这个 main.js 文件就是上面 package.json 中的 "main"键 的值,所以可根据需要修改

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url') // Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
})) // Open the DevTools.
// win.webContents.openDevTools() // Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
} // 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.on('ready', createWindow) // Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
}) app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
}) // In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

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

8、更新内容后再次使用HbuilderX生成h5前记得备份

package.json

main.js

!!!!!!

9、打包

建议使用cmd,本人使用powershell和git hash有踩坑

按shift+右键根目录,或者cd 你的目录

electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --electron-version版本号(不是你的h5版本号,是electron版本号) --overwrite --ignore=node_modules

示例(可直接复制下面代码):

nodejs版本 10.12.0以上

electron-packager . MyApp --win --out MyApp --arch=x64 --electron-version 1.4.14 --overwrite --ignore=node_modules

10、打包成功后,根目录会生成一个新的文件夹,点进去,找到 exe 文件,双击就可以看到网页变成了一个桌面应用啦!

11、以上是最简单的打包方式,至于怎么修改窗口大小、菜单栏怎么加、怎么调用系统API这些,就给你慢慢去研究Electron了。

12、最后,记得备份package.json和main.js

官方文档:https://www.electronjs.org/docs

来源:https://ext.dcloud.net.cn/plugin?id=2905

最新文章

  1. Hystrix框架5--请求缓存和collapser
  2. 【Apache大系】Apache服务器面面观
  3. 【转】数据库无关的GO语言ORM - hood
  4. linux上配置网络/安装vsftp服务器
  5. hashMap底层put和get方法逻辑
  6. linux笔记:linux常用命令-链接命令
  7. LevelDB系列之Log文件
  8. Hadoop Datanode节点无法启动(All directories in dfs.data.dir are invalid)
  9. 【POJ】2886 Who Gets the Most Candies?
  10. itext操作PDF文件添加水印
  11. iOS开发,UITableView相关问题
  12. Cesium解决按住滚轮旋转时进入地下的问题
  13. UWP 页面间传递参数(常见类型string、int以及自定义类型)
  14. 从Windows转向Linux(在Windows下建立Deepin、Windows10双系统)
  15. debian8下acme nginx 部署记录
  16. JMM中的重排序及内存屏障
  17. ADODB 手册
  18. 1--Python 入门--Python基础数据类型
  19. java-学习5
  20. 用docker搭建ss访问火星

热门文章

  1. Cesium渲染模块之概述
  2. java语言——跨平台原理,jre,jdk
  3. LeetCode-1405 最长最快乐字符串
  4. 银河麒麟服务器V10-SP2安装tomcat
  5. 8. fitBounds(用了这个你就不用在设置zoom, minZoom, maxZoom, center)
  6. CAN 接线参考
  7. random及循环
  8. [jQuery]判断页面是否滚动到底部
  9. 对象可能是类数组对象 不具备数组的原型内的方法 所以可以用call或者apply把this指向改成数组或对象原型
  10. vite 运行或打包出现内存溢出的解决方案