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(渲染进程用)通信 ...
随机推荐
- Hg(Mercurial)版本管理学习
1.关闭分支,首先切到你要关闭的分支 hg commit --close-branch -m. 2.仓库ip地址改变之后,重设仓库ip 找到.hg文件夹 - hgrc文件 - 记事本打开重设 3.推分 ...
- (一)jQuery EasyUI 的EasyLoader载入原理
1.第一次看了官网的demo.引用的是EasyLoader.js文件,而不是引用jquery.easyui.min.js文件,我就有疑问了,百度一下. jQuery EasyUI是一款基于JQuery ...
- yum 报错 Error: rpmdb open failed
# yum list rpmdb: unable to join the environment error: db3 error() from dbenv->open: Resource te ...
- Rewrite MSIL Code on the Fly with the .NET Framework Profiling API
http://clrprofiler.codeplex.com/ http://blogs.msdn.com/b/davbr/archive/2012/11/19/clrprofiler-4-5-re ...
- ubuntu图形界面调出命令行
新安装的ubuntu12.04在左边的快捷方式里默认是没有终端图标的,可以使用如下方法打开终端: 使用ctrl+alt+t.这个组合键适合ubuntu的各种版本.但是,在使用KVM虚拟机时可能会出现问 ...
- 简单的图形学(二)——材质与反射
在上一篇[游戏框架系列]简单的图形学(一)文章中,我们讲述了光线追踪的一个最简单的操作--依每个像素延伸出一条追踪光线,光线打到球上(产生交点),就算出这条线的长度,作为最终的灰度,打不到球上,就显示 ...
- solr进阶九:solr对数字和单个字符的搜索
solr中配有分词器,但分词器里面有大写转换为小写的过滤器时,数字就会被过滤.比如123中国ABC.123就会被过滤掉了,所以才查1|12|123都会失败. <Solr 数字字符不能搜索的一个问 ...
- PLSQL Developer新手使用教程(图文教程)
PLSQL Developer是Oracle数据库开发工具,很牛也很好用,PLSQL Developer功能很强大,可以做为集成调试器,有SQL窗口,命令窗口,对象浏览器和性能优化等功能,下面简单的介 ...
- iOSGCD的使用以及死锁的问题
死锁一直都是在使用多线程时,需要注意的一个问题.以前对同步.异步,串行.并行只有一个模糊的概念,想想也是时候整理一下了.再看看之前的博客,已经很久没有干货了[说得好像之前有干货一样],所以,这篇博客, ...
- iOS状态栏详解(隐藏)
状态栏的隐藏 状态栏的隐藏主要有两种方法:方法一:通过代码控制 @interface UIApplication(UIApplicationDeprecated) // Setting statusB ...