electron安装包里封装浏览器直接访问URL配置

在下载的electron里直接访问某个url地址

简书地址

也是因为clojurescript编译后用electron打包成桌面应用安装程序这篇没有解决问题，所以考虑直接用electron打个chrome浏览器进去，然后制定访问的网页，代替本地资源。

话说前一篇之所以没有成功，也不是完全解决不了，而是因为不想折腾了，解决的话思路应该有两条：

1. figwheel不支持npm程序，换成shadow-cljs之类的编译器
2. 增加electron依赖，在应用层触发更新检查

这篇说明一下直接运行URL的配置和注意事项。

1. 下载electron的压缩包

https://electronjs.org/releases/stable

下载解压，内部目录大概如此

主要运行时文件就是resources/default_app.asar

2. 安装asar包解压缩命令

yum install -g asar

两个命令(asar –help)：

asar pack app default_app.asar    
asar extract|e     

其他命令自行百度。

3.核心文件

核心文件就是打包成resources/default_app.asar所需要的文件。在electron的项目目录下，创建一个文件夹app ，里面新建两个文件。

3.1 main.js

// app 模块是为了控制整个应用的生命周期设计的。
// BrowserWindow 类让你有创建一个浏览器窗口的权力。
const {app, BrowserWindow, Menu, ipcMain} = require('electron');
const nativeImage = require('electron').nativeImage;
var overlay = nativeImage.createFromPath('icon.png');

const mainWindowURL = 'https://www.baidu.com';

let mainWindow;

//api:https://wizardforcel.gitbooks.io/electron-doc/content/api/browser-window.html
function createWindow () {
    console.log("createWindow......"); 
      mainWindow = new BrowserWindow({
      // fullscreen: true,
      maximizable: true, //支持最大化
      show: false,   //为了让初始化窗口显示无闪烁，先关闭显示，等待加载完成后再显示。
      // icon: "https://medical.3vyd.com/alk/prod/pc/icon/icon.ico"
    })

    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
      console.log("closed......"); 
      mainWindow = null;
    })
    // mainWindow.once('ready-to-show', () => {    //开启这个以后点击了图片虽然没有白屏，但是会感觉不到点了没点
    mainWindow.maximize();    //打开时最大化打开，不是全屏，保留状态栏
    // })

  // mainWindow.setOverlayIcon(overlay, "医敏")
  mainWindow.setTitle("过敏性疾病高端用户平台");
  mainWindow.setAutoHideMenuBar(true);//自动隐藏菜单
  mainWindow.loadURL(mainWindowURL);
  // app.commandLine.appendSwitch("--disable-http-cache")   禁用缓存
  // mainWindow.webContents.openDevTools({mode:'bottom'});
  mainWindow.show();
}

app.on('ready', function() {
  console.log("ready......");
  createWindow();
});

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
})

3.2 package.json

{
  "name": "electron",
  "productName": "Electron",
  "main": "main.js"
}

注意：productName的值千万不需要改。

4. 打包

在electron/resources目录下执行：

rm -rf default_app.asar
asar pack app default_app.asar

也就是用自己心大的asar文件替换原来旧的。

5. 测试

在windows上访问该exe应用，一般应该没有问题打开百度的。

问题：

1. electron缓存问题
   浏览器访问的资源都会被缓存，几种方式避免缓存。

• 在css或者js等资源后面加版本号
• 打包时禁用缓存，参考：electron 如何禁用本地缓存？强制刷新缓存方案
• 清除本地cache

  windows上位置：
  The Electron stores it’s cache in these folders:
  Windows:
  C:\Users<user>\AppData\Roaming<yourAppName>\Cache
  Linux:
  /home//.config//Cache
  OS X:
  /Users//Library/Application Support//Cache

2. 升级问题
   因为直接访问url，所以不存在上一篇说的版本更新问题。