Electron之shoppinglist案例

2020-03-11

字数统计: 838字 | 阅读时长: 3分

总阅读量次

Electron项目结构的搭建

1. 直接搭建electron的项目

// 全局安装webpack了的话 生成package.json
 npm init 
// 1.本地开发环境安装electron库
 npm i -D electron 
//  在目录下书写  主进程 渲染进程入口文件 main.js为主进程入口  index.html 为  渲染进程入口页面

main.js文件

   // 这里就是主进程 

// 引入electron中的两个模块
// app 是应用对象 BrowserWindow是窗口对象 
//一个electron项目可以打开多个窗口但是应用对象是一个
const {app, BrowserWindow} = require('electron');


let mainWindow

function createWindow () {
 // 创建窗口 并配置窗口属性
 mainWindow = new BrowserWindow({
   width: 800,   
   height: 600,  
   webPreferences: {
     nodeIntegration: true // web页面是否可以使用node模块
   }
 })

   // 加载index.html文件 这是通过直接加载文件的形势也可以用loadURL
   //   mainWindow.loadFile('index.html')
 mainWindow.loadURL(`file://${__dirname}/index.html`)
   // 打开开发者工具
   win.webContents.openDevTools()

   // 当 window 被关闭，这个事件会被触发。
 mainWindow.on('closed', function () {
   // 取消引用 window 对象，如果你的应用支持多窗口的话，
   // 通常会把多个 window 对象存放在一个数组里面，
   // 与此同时，你应该删除相应的元素。
   mainWindow = null
 })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', function () {
   if (process.platform !== 'darwin') app.quit()
 })

配合vue或react单页面应用搭建项目

使用vue脚手架生成渲染进程部分

// 全局安装脚手架
npm install --global vue-cli
// 生成vue web项目目录
vue init webpack test

// 把webpack配置文件的config /index.js 下的build的assetsPublicPath绝对路径改成相对路径

// 更改完路径 还有可以通过electron运行起来就可以打包了
// 打包需要安装 electron-packager
npm i -D electron-packager
// 在package.json 设置打包路径跟打包环境图标等等 也可以使用electron-builder 
// 记着引入package.json main设置入口文件 还有文件打开路径根据环境不同设置加载的页面路径不一样

electron-packager ./dist --out ./www  --overwrite  --platform=win32 --arch=x64

下载源码shoppinglist,执行安利的命令（安排）

1
2
3

cd shoppinglist
npm install
npm start

案例现状，打包完成后

dist目录文件/

package_dir

打开程序，主界面

main_img

点击File控件–>>Add Item 后弹出的模态对话框界面

modal_img

在弹出的模态对话框上，输入Milk,Cookie等文本，点击确定按钮（ADD ITEM）后,主界面显示输入的数据列表

add_item_img

add_item_img2

点击File–>>Clear Items后，清除主界面输入的所有数据列表

clear_items_img

在主界面上，双击某个数据元素，实现对该数据的清除，模拟手机的点击消除功能

clear_item_img

不足之处，ShoppingList的项目，完成的不过完善，有界面个别处在并发的问题

例如，在点击出的模态框中，存在二级界面的菜单按钮对主界面非正常的控制，

模态框的点击Add Item后，输入相应的数据，直接导致程序出现错误，点击Quit按钮，整个程序都将关闭的问

题，本人的能力有限，望有能力的大佬能指点一二，在将来，继续的完善程序，解决出现的bug.