Electron学习,从零到一

来源:简书 分类: 文章浏览史 发布时间:2020-06-02 22:36:22 最后更新:2020-06-02 浏览:138
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-06-02 22:36:22

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

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

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

快速上手Element UI 库

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

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

用 Electron 打造跨平台前端 App

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

Vue学习看这篇就够

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

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

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

php技术微信