Electron学习，从零到一

2019-06-30 本文已影响0人柴柴777

2018年12月下旬，开始，着手开发一项Electron应用。
目标：将公司现有的一项Android POS收银系统用electron完成，写一款桌面应用，为了解决一些客户不想购买收银POS机，直接可以通过PC完成操作
功能基本上和Android系统保持一致，API接口通用，因为我本身熟悉这套android项目，所以，改写成前端项目，只要会了electron框架和前端技术基本就OK了

VUE部分

由于我本身之前只会一些简单的html语言，css略知一二，项目要用vue，于是我刷了不少vue的课程，现在80%的掌握了吧，我选择b站和慕课搜vue教程，刷视频课【web前端】vue2.0+node.js项目实战
 慕课-3小时速成 Vue2.x 核心技术
补基础，加练习，再跟着官网文档细细看。
但是视频这种东西看多了容易产生假象，由如感觉看会了，实操一写又写不出来，容易卡住，这其实可能看视频带来的害处，自我动手解决问题的能力没有得到培养。而且学新东西靠视频教程是慢的，适合学生党在学校刷，但是我的话还是觉的直接靠文档上手会略显生疏，所以这个还是看个人吧，但是重点都是要自己实际动手去敲才能学会，靠实战学习是最快的
补文档：
1.细看es6入门教程，大概3天到一周时间。
ECMAScript 6 入门
2.熟悉脚手架构建工具，0.5天。
3.上手官方VUE原汁原味，大约2天~5天。
vue教程

Electron部分

Electron 文档文档还是很详细的，大致过一遍知道都有什么，然后需要用到什么再去查就好了，electron项目大致搭建好了，页面还都是vue的，然后菜单啊窗口啊等等才需要查文档

electron系统的教程不多，我还在csdn买了一套实战专题，刷了一些吧，感觉就是在过文档，就那样吧，不太建议买，Electron实战专题
最近慕课又推出一个 Electron开发仿网易云音乐播放器不知道如何，最近不做前端项目了也没怎么看，有兴趣的可以看看反正至少比csdn那套值得多
写了半年这个electron积累的书签，放在chrome下账号同步再也不会找不到了呢

书签.png

About Projrct

This project was generated with electron-vue@8fae476 using vue-cli. Documentation about the original structure can be found here.

项目中数据存储用localstorage/electron-store；
数据库用lowdb

关于vuex和storage的区别
1.最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地
2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。
3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。
注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到，原因就是区别1。

electron-store 用electron-store替代localStorage
https://github.com/sindresorhus/electron-store/issues/17
Many reasons:

localStorage only works in the browser process.
localStorage is not very fault tolerant, so if your app encounters an error and quits unexpectedly, you could lose the data.
localStorage only supports persisting strings. This module supports any JSON supported type.
The API of this module is much nicer. You can set and get nested properties. You can set default initial config.

经测试 electron-store窗口关闭依然能存储，lowdb不行,localstorage不行，electron-store 数据存储卸载应用之后依然存在、

因为个人代码问题,想要不改代码解决问题,然后....想在这里删除本地存储的数据, 于是开启找文件之路......
https://github.com/sindresorhus/electron-store

electron-store readme 如图

https://electronjs.org/docs/api/app#appgetpathname

于是就到了这

Electron-vue开发实战2——引入基于Lodash的JSON数据库lowdb

创建

this.$db 
.defaults({ posts: this.hungUpOrderList, user: {}, count: 0 })
.write(); // 一定要显式调用write方法将数据存入JSON

通过set方法来对对象操作

this.$db
.set("user", { name: "chai" }) // 通过set方法来对对象操作
.write();

移除

this.$db
   .get("posts")
   .remove({})
   .write();
<!-- 还可以通过 lodash-id 提供的 removeById() 来删除指定id的项： -->
this.$db
   .get("posts")
   .removeById(id)
   .write();

删除

this.$db.unset("user.name").write();
this.$db.unset("user").write();

打包用electron-build；

执行"npm run build " 就可以打出正式环境的包，wins下只能打出exe，dmg需要macOS环境编译

项目图标，MAC的logo："build/icons/icon.icns"

       wins的logo："build/icons/icon.ico"

关于安装包的配置信息在package.json

 关于升级：版本号配置好，编译出正式包 ，上传OSS，上传build文件夹下的yml文件，和.exe安装包       
（升级是electron根据配置文件，自动判断，版本号配置好，无需修改配置文件，上传即可）
更新electron-update全量更新

electron 部分常用功能的实现

PS:这是项目过程中别人总结的哈哈哈哈哈

==electron-updater 4.0以上升级不好用==

1、在主程序中main=》index.js
引入 import { autoUpdater } from 'electron-updater'
在 import {app,BrowserWindow,ipcMain} from 'electron' 引入设置一个ipcMain
2、// 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写
在mianjs主线程里附加以下代码：

function updateHandle() {
    let message = {
        error: '检查更新出错',
        checking: '正在检查更新……',
        updateAva: '检测到新版本，正在下载……',
        updateNotAva: '现在使用的就是最新版本，不用更新'
    }
    //let uploadUrl = 'https://xuexuedian.cn/download/'
    let uploadUrl = 'http://guang-1251835114.file.myqcloud.com/dowload/'
    
    autoUpdater.setFeedURL(uploadUrl)
    autoUpdater.on('error', function(error) {
        console.log(error)
        sendUpdateMessage(message.error)
        sendUpdateMessage(error)
    })
    autoUpdater.on('checking-for-update', function() {
        sendUpdateMessage(message.checking)
    })
    autoUpdater.on('update-available', function(info) {
        sendUpdateMessage(message.updateAva)
    })
    autoUpdater.on('update-not-available', function(info) {
            sendUpdateMessage(message.updateNotAva)
        })
        // 更新下载进度事件
    autoUpdater.on('download-progress', function(progressObj) {
        mainWindow.webContents.send('downloadProgress', progressObj)
    })
    autoUpdater.on('update-downloaded', function(event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
        ipcMain.on('isUpdateNow', (e, arg) => {
            console.log(arguments)
            console.log('开始更新')
            autoUpdater.quitAndInstall()
        })
        mainWindow.webContents.send('isUpdateNow')
    })
    ipcMain.on('checkForUpdate', () => {
        console.log('检查更新------》')
        autoUpdater.checkForUpdates()
    })
}

3、// 通过main进程发送事件给renderer进程，提示更新信息，紧接着是在mianjs里创建以下方法：

function sendUpdateMessage(text) {
mainWindow.webContents.send('message', text)
}

4、主程序中的调用

在 function createWindow() 中添加 updateHandle() //触发更新需求的

5、在页面上APP.vue 或者其他页面设置触发更新按钮

   if (window.require) {//检查更新的
        console.error('------开始检查更新------')
        var ipcRenderer = window.require('electron').ipcRenderer
        ipcRenderer.send('checkForUpdate')
        ipcRenderer.on('message', (event, text) => {
          //console.log('---->', event)
          console.log('返回消息', text)
          this.tips = text
        })
        ipcRenderer.on('downloadProgress', (event, progressObj) => {
          console.log('下载', progressObj)
          this.progress = progressObj.percent
          this.downloadPercent = progressObj.percent || 0
        })
        ipcRenderer.on('isUpdateNow', () => {
          console.log('是否现在更新')
          this.$confirm('有新版本啦。。是否现在更新?', '提示', {
            confirmButtonText: '马上更新',
            cancelButtonText: '稍后更新',
            type: 'warning'
          }).then(() => {
            ipcRenderer.send('isUpdateNow')
          })
        })
      }

6、配置文件修改（package.json）
"build": {}中尾端添加
"publish": [ { "provider": "generic", "url": "http://guang-1251835114.file.myqcloud.com/dowload/" } ]

7、祝你好运，第五点可根据自己的方式来触发，自动触发都阔以，谢谢！

关于打印
搜索静默打印，我就是用他们博客的Demo写的，就是新建一个不显示窗口，ipc传输数据，调用打印
目前打印只能在wins上安装驱动，打印机要在连接成功状态下可用，所以应用内打印如果有问题先去打印机处排查是否连接，如果换打印机，安装对应的驱动，连接成功，在应用内选择你连接成功的打印机即可

开发过程中遇到的比较不好解决的问题
打包过程中，1.显示空白，npm run build就好了，改了package.json 配置
2.图片资源文件显示不出来 ==> /static改为./static

以下还有我在写项目过程中记录在有道云笔记里的内容

项目使用SCSS 导入
定义一个deviceId常量---https://github.com/feng-fu/electron-ipc-demo/blob/master/src/renderer/plugins/ipcService.js
vue-lazyload不好用

———— 我还会记录一些网址 ————

快速上手Element UI 库

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现

使用 electron 实现类似新版 QQ 的登录界面效果（阴影、背景动画、窗体3D翻转）

用 Electron 打造跨平台前端 App

Electron系列教程——第一篇：入门

Vue学习看这篇就够

苏南大叔关于electron的相关文章，基本上遇到的80%都可以在这找到答案

———————— 以上差不多是我这半年来接触electron所记录的大部分了，关于项目代码毕竟属于在公司的东西，就不粘贴任何代码了，也没有单独记录过，现在已经重新写安卓项目了，这些东西整理记录出来，方便以后查找，感觉网上相关的并不系统，至少对曾经前端小白来说是这样————————

————整理的来自各位大佬的输出
over

Electron学习，从零到一

VUE部分

Electron部分

About Projrct

猜你喜欢

热点阅读