Electron学习-打开一个子窗口（2021.1.29）

注意：

真的从0开始，只有一点C/C++基础，所以js这方面完全是真·零基础，完全亦步亦趋跟着老师走的。看的是b站上“技术胖”老师的视频，学成必谢555(老师的网站是jspang.com,视频、文章都是免费的，太良心了555)
之前的学习记录都在电脑里，之后有空慢慢传上来
学的是electron，用的是vs code
写这个的主要目的是怕自己之后忘了，方便捡起来
说句题外话，我26号出门的时候手机被偷了，搞的我这两天不得安宁。这事非常离谱，大家一定注意莫名其妙往你身上靠的人。
另外一句题外话，做什么都别着急。我丢了手机之后立马买了一部。上午买的，下午就打电话给我说找到了。不得不说这真离谱。

--学习内容：Remote模块，使渲染进程拥有主进程的方法

示例：使用Remote，使渲染进程拥有BrowserWindow方法，得以打开一个新窗口
0.在主窗口中设置WebPrefereces
electron10.1.2之前的版本可以跳过这一步，但是之后的版本必须在主窗口(index.js)中加一句
（这里一定注意是加一句不是把之前的integration删掉，我删掉之后一直不成功，搞了整整一个小时

webPreferences:{
nodeIntegration:true，
enableRemoteModule:true
}

1.重新写一个主页面渲染层
和之前新建渲染层一样，在body里写

<button id="btn2">子窗口</button>
    <script src="render/demo2.js"></script>//引用js中的方法

2.在render中写demo2.js文件：描述引用方法，这里引用的是BrowserWindow方法

const BrowserWindow=require('electron').remote.BrowserWindow
const btn1=this.document.querySelector('#btn1')

window.onload=function(){

    btn1.onclick=()=>{
        newWin=new BrowserWindow({width:500,height:500})
        newWin.loadFile('child.html')
        newWin.on('close',()=>{
            newWin=null
        })
    }
}

3.写一个子页面渲染层：改变了背景颜色，整了一点文字

<body style="background-color: darksalmon;">
    <h1>三文鱼！</h1>
</body>

最终效果长这样：

第二种打开子窗口的方法：window.open默认为打开一个子窗口，而Browserwindow就是打开了一个独立的窗口。
然而我window.open不成功，console也不报错，这啥？于是我快乐的在这个坑里面扑腾了好久，最后终于忍不住重新写了一遍整个程序，然后他，能出现了。

var btn2 =this.document.querySelector('#btn2')
btn2.onlick()=>{
    window.open('https://www.baidu.com')
}

小总结：
被引用的具体引用方法会写在js里放进render文件夹。
之前div模块用于存放文字部分，这次没有了
但是script还有，说明script模块是专门用于引用的
（但是他的属性里面只写了src，也没有写具体引用src到的文件里的啥东西呀？）

小总结2：
总而言之，用electron做一个桌面程序，需要：
1.package.json:写完其他内容之后直接 npm init --yes就行
只有 "main": "main.js"这里需要特别注意是否设置为你需要的主进程js

2.main.js:主进程，整个应用程序的入口。其中会写一些页面的背后逻辑，并且通常会loadfile一个渲染进程
通常的格式为：

var electron=require('electron')//先把electron包含进来，有点像include头文件
var app=electron.app//新建一个electron架构的app（也就是我们要创建的app）
var BrowserWindow=electron.BrowserWindow//为了方便，相当于typdef一个函数
var mainWin=null

//当监听到app开始运行
app.on('ready',()=>{
    
    //新建一个具有这些属性的窗口
    mainWin=new BrowserWindow({
        width:500,
        height:500,
        webPreferences:{nodeIntegration:true}
    })
    
    //引入定义ui的渲染层
    mainWin.loadFile('demo3.html')
    
    //当监听到窗口被关闭
    mainWin.on('close',()=>{
        //清空内存，避免溢出
        mainWin=null
    })
})

3.main.html:主页面的渲染进程，通常可以直接用h5快速生成，只要改动body和title部分就好。
body里可以有：

h1:用于文本
button:按钮
script:引用render文件夹中的内容
div:用于存放引用的文本

通常格式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">子窗口</button>
    <script src="render/demo3.js"></script>
</body>
</html>

4.子页面渲染进程：写就是了
5.需要被引用的txt文件
5.render文件夹:引用js（包括引用读取文件、子窗口js）
子窗口：

//用remote引用主进程中的BrowserWindow方法
const BrowserWindow=require('electron').remote.BrowserWindow

//typdef主页面渲染进程里的btn1
const btn1=this.document.querySelector('#btn1')

//这句话意思还不懂...
window.onload=function(){
    //当按键被按下，新建一个窗口（同main.js）
    btn1.onclick=()=>{
        newWin=new BrowserWindow({width:500,height:500})
        newWin.loadFile('child.html')
        newWin.on('close',()=>{
            newWin=null
        })
    }
}

读取文件：

var fs=require('fs')//WebPreferences的作用：允许引用
window.onload=function(){
    //获取html里的组件：按键和存放文本的div组件
    var btn =this.document.querySelector('#btn1')
    var breads=this.document.querySelector('#breads')
    //当按键被点击
    btn.onclick=function(){
        //读取文件，并且执行：
        fs.readFile('Bakery.txt',(err,data)=>{
            //将读取内容(data)赋值(innerHTML)给breads(div组件)
            breads.innerHTML=data
        })
    }
}

Electron学习-打开一个子窗口（2021.1.29）

Guess you like