Electron 仿制WeGame(四）

今天这一节的内容有些多，在以前的程序上改动也比较多，具体如何描述问题解决和问题修改并不能清楚的说明，所以还是老方法，贴图贴代码。
想查看源码，请下载源代码传送门

先上效果图

在这里插入图片描述

想查看完整效果，请下载源代码传送门
不要问我主页面为什么要搞 腾讯游戏的主页前面其实是想照着weGame切页面的，最后下了一个抓包工具，奈何抓不到WeGame的请求头，也就作罢了。里边主要用了控制窗体，控制页面播放视频等方法。

重点代码

1.Electron 浏览器播放插件

主进程【在主进程的app.on("ready",fn)之前键入以下代码】

/**
 * 解决浏览器播放问题
 */
const libDirectory = __dirname+'/apps/lib/';
const path = require('path');
// 指定 flash 路径，假定它与 main.js 放在同一目录中。
let pluginName
switch (process.platform) {
  case 'win32':
    pluginName = 'pepflashplayer.dll'
    break
  case 'darwin':
    pluginName = 'PepperFlashPlayer.plugin'
    break
  case 'linux':
    pluginName = 'libpepflashplayer.so'
    break
}
app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname,"/apps/lib/"+ pluginName))
app.commandLine.appendSwitch('ppapi-flash-version', '22.0.0.192');

以上代码中用到了各个系统的播放插件的插件文件，需要单独下载，官网有详细的教程Electron使用Flash player插件

在页面中的 webview 标签中添加属性 plugins

<webview  class="frame"  id="player" src="http://fn.qq.com/video/" plugins></webview >

到这里浏览器插件就可以正常播放视频了

2.窗体的最大化，最小化，窗口化，关闭代码

推荐在渲染进程中操作（当窗体较多时，如果在主进程中进程监听，就会需要判断提交请求的窗口，会增加工作量）
- 1.在渲染进程中得到当前窗口对象 ,使用 require('electron').remote.getCurrentWindow()

var currwin = require('electron').remote.getCurrentWindow();

- 2.关闭，窗口化，最大化，最小化事件

switch(click){
            case "restoreForm":
                currwin.unmaximize();  //窗口化
            break;
            case "maxForm":
                currwin.maximize();  //最大化
            break;
            case "minForm":
                currwin.minimize(); //最小化
            break;
            case "closeForm":
                currwin.close();    //关闭
            break;
        }

3.静音设置

静音设置需要对单独的webview标签进行操作。官网【 webview标签】 <webview>.setAudioMuted(muted)
代码如下,

$("webview")[0].setAudioMuted(true);//将页面中的第一个webview设置成静音
$("webview")[2].setAudioMuted(false);//将页面中的第二个webview取消静音

4.webview标签中的外部链接用`指定窗口`打开

1.创建方法

/**
 * 接管浏览器器请求，使用系统浏览器打卡
 * @param {jqSelect} webSelector 
 * @param {回调函数} callback 
 */
function webOpenToForm(webSelector,callback){
    $(webSelector).on('new-window', (e) => {
        var url = e.url||e.originalEvent.url;
        if (url.indexOf('http:')>=0 || url.indexOf('https:')>=0) {
            //shell.openExternal(e.url)
            callback(url); 
            //window.open(url)
        }
    });
}

2.调用
- a.在窗口1中点击链接，在窗口1中打开

 	webOpenToForm("webview",function(url){
        $("webview:last").attr("src",url);  //将url赋值给webview 标签
   });

- b.在窗口1中点击链接，在窗口2中打开
  注意:就目前而言，我还没有找到好的窗体之间传递参数的方法，只能使用主页面和渲染页面之间通信来实现。如果大神知道，烦请指导。
- - 1.在窗口1中向主进程发送信息

 const ipc = require('electron').ipcRenderer;
 ipc.send("openForm",url);

- - 2.主进程接受信息，并发送给窗口2【前提窗口必须已经存在】

ipcMain.on("openForm",(event,url)=>{
    openFile.show();//显示窗口，该窗口已存在
    openFile.send("setUrl",url);//发送的窗口2的消息
});

- - 3.在窗口2中接受主进程发送过来的消息

ipcRenderer.on('setUrl', (event,url)=>{
     $("webview:last").attr("src",url);  //将url赋值给webview 标签
});

- - 4.窗口1到窗口2调用

const ipc = require('electron').ipcRenderer;
webOpenToForm("webview",function(url){      
 ipc.send("openForm",url);
});

注意窗口1到窗口2调用的过程是
窗口1监听webview的'new-window'方法->主进程->主进程发送url->窗口2接受url

以上就是用的到核心代码，码字不易，转载注明出处

====回主目录