electron-browser

通过electron封装的类浏览器工具

使用方法：

在你的main中

const { Browse,sittingMenu,ChildWinInterface,addresButton } = require('electron-browser');

const statics = require('koa-static');

function popupMenu(data,menu){
    menu.push({
        label: '自定义按钮',
        accelerator: (function () {
        })(),
        click: function (item, focusedWindow) {
             console.log("点击了自定义按钮")
        }
    });
    return menu;
}


sittingMenu.divider2 = { type: "Divider"}
sittingMenu.menu1 = { title: "自定义菜单", on: () => { } }



/**
 *  地址栏右侧的按钮 
 * */
class AddBut extends ChildWinInterface {

}
addresButton.zdy = {
    icon: "EyeInvisibleOutlined", // andt icon
    obj: new AddBut()
}



let conf = { 
    indexHost: "http://localhost:5800",//自定义主页路径 
    httpsPort: 5802, //不填默认5802
    httpPort: 5803, //不填默认5803
    port: 5800, //不填默认5800
    thousandsOfCallBackFolder:"/thousandsOfCallBackFolder", //千里传音的路径，无需求可不填
    newTabUrl:"http://localhost:5800/view/empty",//   默认 /empty
    popupMenu:popupMenu, //右击网页弹出的菜单
    sitting: sittingMenu,//  自定义菜单
    addresButton:addresButton,//浏览器右侧的按钮

}



let brose = new Browse(conf); //启动

const koa = brose.koa; //会运行一个koa 用来通信，我们也可以利用这个来部署一些请求的响应
const socketIO = brose.socketIO;
const httpsServer = brose.httpsServer;
const httpServer = brose.httpsServer;


koa.use(statics( './path')); //选定网页的静态文件

千里传音 thousandsOfCallBack

这是网页端给electron发送消息的工具
通过 http://localhost:5800 的socket实现

网页端代码

 import io from 'socket.io-client';

    const socket = io('ws://127.0.0.1:5800'); //指向本地 端口需要是httpsPort
    socket.on('connect', () => {
    console.log('socket 连接成功');

    webContentsId = ThousandsOfCall.getWebContentsId();

    socket.on('message', async (data: any) => {
        //收到来自服务器的消息，一般是进度消息
        let uid=data.uid;//uid 发布送消息的uid
              
     });


     //发送消息给服务器

      let value = {
                data, //提交的数据
                type, // 提交类型对应服务器处理js 服务器端需要对应的处理函数 （例：loginTB）
                uid, //UUID.v1();
      };

     socket.send(value, (res: { data: any }) => {
          //收到结果，最终结果
        let da = res.data;
        let uid=data.uid;//uid 发布送消息的uid
      });

服务器端代码

1、创建一个对应的文件夹（例 /thousandsOfCallBackFolder），在conf中制定路径

let conf = { 
    thousandsOfCallBackFolder : path.resolve("./thousandsOfCallBackFolder"),
    ...
}


let brose = new Browse(conf); //启动

2、在/thousandsOfCallBackFolder 下创建对应的处理类型需要和网页端对应（例：loginTB.js）

loginTB.js

module.exports = class LoginTB {

    static handle({ data, callback, event }) {
       //data 前端传入的数据
      // callback  最终返回的数据调用
      //event 进度数据调用


      for(let i=0;i<5;i++){
           event({progress:`${i*20}%`})
       } 

       callback({data:"我处理好了"})


    }}