electron-searchMovies
之前学了electron,前段时间又学了一下vue,为了增加熟练度决定将两者结合做个有趣的东西.想来想去最后决定将原来用 PyQt 写的MovieHeavens重新写一遍,使用electron-vue构建的项目地址electron-searchMovies,最后用electron-packager打包了成exe,在项目主页的releases可以找到打包后的安装程序.总结一下整个问题中遇见的几点问题以及解决办法.
无法下载打包所需的工具
由于一些神奇的力量导致打包过程中下载必需的工具包失败
解决办法
确定你需要工具包的名称,然后先手动将这些工具包下载下来,然后解压到对应的缓存目录中.各个系统对应的路径如下
macOS: ~/Library/Caches/electron-builder
Linux: ~/.cache/electron-builder
windows: %LOCALAPPDATA%\electron-builder\cache
我的最终目录树如下:
.
├── appimage-packages
│ └── appimage-packages-28-08-17
├── nsis
│ └── nsis-3.0.1.13
├── nsis-resources
│ └── nsis-resources-3.3.0
└── winCodeSign
└── winCodeSign-1.9.0
用 yarn 而不是 npm
当解决了工具包的问题,仍然打包成功,但是应用没有任何内容只是一个空白页,后来在githubNo contents only a blank page after build看见建议用 yarn 而不是 npm.这里有一篇Yarn vs npm: Everything You Need to Know的详细文章,正如官方文档说道的:yarn是为了弥补npm的一些缺陷而出现的.
短暂的空白页
一切问题都解决了,再次将软件打包成 exe,似乎接下来就是体验胜利的果实了,但是事实上并不是这样,打包的第一个版本Pre-release,在打开软件最开始会出现短暂的空白页,显然这对用户不是一个很棒的体验,最后决定加了一个简单的加载动画,核心代码如下:
mainWindow.webContents.on('did-finish-load', () => {
mainWindow.show()
if (loadingScreen) {
let loadingScreenBounds = loadingScreen.getBounds()
mainWindow.setBounds(loadingScreenBounds)
loadingScreen.close()
}
})
完整代码自然就需要去electron-searchMovies上查看了.这里遇见了一个新的问题.
Cannot Get Route
在解决上个问题的同时遇见了一个新的问题,加载动画页是通过路由映射的,我在 src/routes.js 中添加了如下的路由:
{
path: '/loading',
name: 'loading-page',
component: require('@/components/LoadingPage')
}
然后让 loadingScreen 加载 http://localhost:9080/loading 但是却使用获得 cannot get /loading 的错误,后来最后查找资料下找到了解决方案,对于新的路由访问地址应该是http://localhost:9080/#/new_route,打包后的访问地址应该是:file://${__dirname}/index.html#new_route,到此所有问题圆满解决.最后上一下软件的使用截图.
使用
最后欢迎大家star Or fork~
electron-searchMovies的更多相关文章
- Electron使用与学习--(页面间的通信)
目录结构: index.js是主进程js. const electron = require('electron') const app = electron.app const BrowserWin ...
- Electron使用与学习--(基本使用与菜单操作)
对于electron是个新手,下面纯属个人理解.如有错误,欢迎指出. 一.安装 如果你本地按照github上的 # Install the `electron` command globally ...
- Electron 不完全快速手册
Electron能干嘛 Vscode 基于Electron开发的,他是用来开发桌面软件的,可以轻易的跨平台 他的前身是atomshell,图标很丑,不用在意,一点也不像vscode也不用在意. L ...
- Electron中Jquery的引入方式
原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标 ...
- Electron的环境配置
原文地址http://huisky.com/blog/161218121551123 本文介绍了Electron的环境配置,包括Electron下载.nodejs下载安装.NPM+Bower安装配置. ...
- Electron安装
1.安装nodejs和npm 官网下载地址:https://nodejs.org/en/download/ 安装包:下载.msi 安装完成后: nodejs.npm都会安装好,path环境变量也自动设 ...
- electron之Windows下使用 html js css 开发桌面应用程序
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- electron 入门小白贴
electron 入门小白贴 electron demo 跑起来! 毕设准备是做个 跨平台的做题的客户端,打算用 electron 来弄. 然而今天折腾了半天才终于吧demo给跑起来了.经历了许多的问 ...
- Linux下Electron的Helloworld
什么是Electron Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromi ...
- Electron Angular 开发小记
一介绍 electron分为主进程和渲染进程,主进程负责和原生交互,控制窗口等. 渲染进程就是普通网页.主进程和渲染进程可以通过ipcMain(主进程使用)及ipcRenderer(渲染进程用)通信 ...
随机推荐
- 对JAVASCRIPT匿名函数的理解
网上很多解释,我无法理解,我想知道原理...这篇文章应该可以透彻一点 Query片段: (function(){ //这里忽略jQuery所有实现 })(); 要说匿名函数,我们首先要由函数本身说起. ...
- 【HBase】Rowkey设计【转】
本章将深入介绍由HBase的存储架构在设计上带来的影响.如何设计表.row key.column等等,尽可能地使用到HBase存储上的优势. Key设计 HBase有两个基础的主键结构:row key ...
- jQuery实现的手风琴效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Dubbo服务降级设置
dubbo降级服务 dubbo开发中,通常是微服务架构,那么在使用过程中可能会遇到多种问题: 1)多个服务之间可能由于服务没有启动或者网络不通,调用中会出现远程调用失败; 2) 服务请求过大, ...
- mysql从文件中导入数据
linux: load data infile '/tmp/dnslog.txt' into table dnslog_cnnic_cn fields terminated by ' ' lines ...
- 一款基于jquery的侧边栏导航
之前为大家介绍了好多导航菜单,今天给大家分享一款基于jquery的侧边栏导航.这款导航侧边滑出,适合放在手机网页或webapp.一看下实现的效果图: 在线预览 源码下载 实现的代码. html代码 ...
- 谈谈 老罗和"锤子"
老罗就不用多说了,搞科技公司的相声演员(笑).当时锤子公布会我看了直播.就是想看看在微博上吹翻了的手机究竟有多厉害.或者仅仅是一个笑话,事实上也希望国产手机可以有所突破,而不是一致的拼配置和简单的搞点 ...
- 【Unity笔记】碰撞器(Collision)与触发器(Trigger)的区别
当碰撞器Collision组件身上的属性IsTrigger勾选为True时,该碰撞器就成了触发器. 区别:1.能够产生的回调和函数不同.碰撞器:MonoBehaviour.OnCollisionEnt ...
- platform_driver_probe 函数解析
结构体列举 // 几个结构体 // include/linux/device.h struct bus_type { const char *name; // "platform" ...
- 有关一道printf 的面试题
今天有个学生面试,面试题目里面有一道有关 printf 的输出问题 源代码如下: #include <stdio.h> int main(void) { int a = 10, b = 2 ...