Electron+小程序

Electron是使用JavaScript，HTML和CSS构建跨平台的桌面应用程序框架。 Electron兼容[Mac]、[Windows]和[Linux]，可以构建出三个平台的[应用程序]。

安装electron插件的命令

npm install @dcloudio/uni-electron-builder

安装脚手架

D:\VsCodeProject>
npm install -g @vue/cli

安装vue/cli-init

D:\VsCodeProject>
npm install -g @vue/cli-init

用脚手架创建uniapp的项目

D:\VsCodeProject>
vue create -p dcloudio/uni-preset-vue my-uni-project
或者
vue init dcloudio/uni-preset-vue my-uni-app-project
或者
vue init dcloudio/uni-preset-vue my-uni-app-project

启动项目

D:\VsCodeProject\my-uni-project>

npm run serve

打包项目

D:\VsCodeProject\my-uni-project>

npm run build

创建electron文件夹

在dist目录下

移动文件

dist/build/web 文件下有 assets、static、index.html 三个文件拷贝到 electron 文件夹下

在electron下新建main.js

// main.js
 
// 引入electron
const { BrowserWindow, app } = require("electron");
 
// // 实例化窗口
// const createWindow = () => {
//     // 创建浏览器窗口
//     const win = new BrowserWindow({
//         width: 800,
//         height: 600,
//         webPreferences: {
//             nodeIntegration: true,
//             contextIsolation: false,
//         },
 
//     });
 
//     // 加载index.html文件
//     win.loadFile("./index.html");
// };
// 实例化窗口
const createWindow = () => {
	// 创建浏览器窗口
	const mainWindow = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			contextIsolation: false,
		},
	});
 
	// 加载index.html文件
	// win.loadFile("./index.html");//打包时用这个
	mainWindow.loadURL("http://localhost:8080"); //开发调试用这个
	// 窗口加载完成后，最大化窗口并显示控制台
	mainWindow.maximize();
	mainWindow.webContents.openDevTools();
};
 
// 创建应用
app.whenReady().then(() => {
    createWindow();
 
    // 监听所有窗口关闭事件
    app.on("window-all-closed", () => {
        // 在 macOS 上，除非用户通过 Cmd + Q 明确退出，否则应用程序不会关闭
        if (process.platform !== "darwin") {
            app.quit();
        }
    });
 
    // 当用户点击 dock 图标时，显示应用程序窗口
    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
 
    });
 
});

安装electron

D:\VsCodeProject\my-uni-project\dist\build\h5\electron>

npm i electron electron-packager --save

创建package.json

D:\VsCodeProject\my-uni-project\dist\build\h5\electron>

npm init

配置打包方式

{
  "name": "electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "build": "electron-packager ./  my_uniapp --plantform=win32 --arch=x64 --out my_uniapp --overwrite --icon=./static/favicon.ico"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^33.2.0",
    "electron-packager": "^17.1.2"
  }
}

启动electron

D:\VsCodeProject\my-uni-project\dist\build\h5\electron>

npm start

打包electron应用

D:\VsCodeProject\my-uni-project\dist\build\h5\electron>

npm run build