Iwp-electron-framework NPM

快速使用

初始化项目

创建packagej.json文件

{
    "name": "electron-demo"
}

安装框架

框架包已经发布到内部npm服务器上面，模块名字为iwp-electron-framework

yarn add -D iwp-electron-framework

需要配置内部npm服务，配置是方式

npm config set registry http://npm.kelexuexi.com:4873

配置脚手架

内部使用Webpack对模块的打包和调试进行了封装，配置方式如下：

const path = require('path')

require("iwp-electron-framework/webpack/runner")({

    path: path.join(__dirname, './'),

    main: {
        plugins: [
        ]
    },

    builder: {

        appName: "ElectronDemo",
        productName: "ElectronDemo",
        version: "1.0.0",
        build: 1,
        icon: "./src/icon.png",
        appId: "B309063A-F6C5-4DB1-ABB0-D74562E12E93",
        companyName: "北京鸿合爱学科技有限公司",
        
    }

});

Builder参数介绍 | 字段 | 介绍 | 示例 | | ---- | ---- | ---- | | appName | app显示名 | Electron实例 | | productName | app标识名，包括安装路径名 | ElectronDemo | version | 版本号，更新识别 | 1.0.0 | build | 构建号（暂时无用） | 1 | icon | App图标，本地路径 | ../src/icon.png | appId | 注册表App唯一ID | B309063A-F6C5-4DB1-ABB0-D74562E12E93 | companyName | 公司名称 | 北京鸿合爱学科技有限公司

快速生成App文件并启动

使用快捷命令创建应用所需的文件，当文件夹存在时则会创建失败

node electron-runner.js --createApp

启动项目

node electron-runner.js

将启动命令加入package.json中

配置启动文件并运行

package.json中加入执行命令

"scripts": {
    "start": "node electron-runner.js",
    "pkg": "node electron-runner.js --pkg",
    "pkg-setup": "node electron-runner.js --pkg-setup"
},

使用yarn命令运行 yarn start

start: 运行调试环境
pkg: 项目压缩打包，生成的文件再pkg/win-unpack和pkg-setup目录下
pkg-setup: 生成安装文件，生成的文件在pkg/win-output目录下

配置项目结构

由于项目构建会自动找目录下的文件，所以目录结构是固定的

electron-demo
│   
│
└───dist
└───install
│       └───bin
│       │       │   StartShell.exe
│       │   Icon.ico
│       │   Install.ico
└───pkg
│       └─── win-output
│       └─── win-setup
│       └─── win-unpack
└───src
│   │   main.ts
│   │   renderer.ts
│   │   preload.ts
│   electron-runner.js
│   package.json

dist: 编译目录, 运行脚本自动生成，无需创建
install: 安装包所需资源文件目录，需自行创建并按文件要求提供文件
pkg: 打包生成目录，运行脚本自动生成，无需创建
src: 代码文件目录，需自行创建
electron-runner.js: 调试及打包脚本运行文件，按配置要求配置
package.json: 标准node项目配置文件

创建主进程文件

import { Application } from 'iwp-electron-framework/main';

/**
 * 主进程启动
 */
new Application().bootstrap({
    openDevTool?: boolean, 
    requireAuth?: boolean,
    winConfigs: {
    
        'WIN_START' : {
            name: 'ElectronDemo',
            width: 500,
            height: 290,
            uri: '/start',
            transparent: true,
            properties: {
                startBg: "./assets/loading-bg.png"
            },
        },
    }

})

参数类型定义 | 字段 | 数据类型 | 介绍 | 示例 | | -- | -- | -- | -- | | openDevTool | Boolean | 是否开启调试工具 | true | | requireAuth | Boolean | 是否需要授权，开启则需要登录，会自动启动登录页面 | false | winConfigs | WinConfig | 窗口配置 | -- | onReady | void | ready方法 | () => {} | onSecondInstance | void | 第二个实例启动时触发 |

WinConfig窗口配置是将窗口提前配置好，业务中只需要操作相应的窗口，会自动创建，字段介绍如下 | 字段 | 数据类型 | 介绍 | 示例 | | -- | -- | -- | -- | | name | string | 窗口名称 | 启动 | width | number | 窗口宽度 | 500 | height | number | 窗口高度 | 290 | uri | string | 加载页面路由 | /start | transparent | boolean | 是否透明 | true | properties | object | 其他属性 | { backgroundImage: '../src/bg.png' }

创建渲染程文件

import { Renderer } from 'iwp-electron-framework/renderer'

const routes = [

]


new Renderer().bootstrap(routes, (app) => {
    console.log(app)
})

渲染页面使用vue3.0构建，通过routes参数配置新增页面路由，回调函数app为vue3.0构建的app，可以自行注入其他组件

Preload文件

import { preloadInit } from 'iwp-electron-framework/preload';

const invoke = {
    log: () => {
          console.log('Invoke')
    }
}

preloadInit(invoke)

invoke参数可以为空对象{}

框架默认提供注入内容

{
    app: {
        name: webpack.builder.name,
        version: webpack.builder.version,
        build: webpack.builder.build
    },
    openWin: (winKey: number) => {
        ipcRenderer.send(IPCEvent.OPEN ,{ key: winKey })
    },
    logout: () => {
        ipcRenderer.send(IPCEvent.LOGOUT)
    },
    main: {
        send: (msg) => {
            ipcRenderer.send('WebMsg', msg)
        },
        sendSync: (msg) => {
            return ipcRenderer.sendSync('WebMsgSync', msg)
        }
    },
    renderer: {
        send: (msg, ...args) => {
            ipcRenderer.sendToHost(msg, ...args)
        }
    },
    // 参数传入的invoke将会挂载到invoke对象上
    invoke: invoke
}

配置文件及加载

项目调试运行会自动根据electron-runner中配置的Builder信息在应用根目录下生成.config文件，主进程及渲染进程都可以直接获取到