## [**webview**](https://electronjs.org/docs/api/webview-tag)
在一个独立的 frame 和进程里显示外部 web 内容。
>[danger]当Electron >= 5。 在构造`BrowserWindow`时,需要通过设置`webviewTag`webPreferences选项来启用标签
用于非本地的远程网页,可以追加远程网页的css获取事件、属性等
渲染页index.html
main.js
//在主入口文件main.js编写代码(main.js是主进程)
//1 引入electron模块
var electron=require('electron');
//2 创建electron引用
var app=electron.app;
//3 创建 electron BrowserWindow的引用
var BrowserWindow = electron.BrowserWindow;
//4 变量保存对应用窗口的引用
var mianWindow=null;
app.on('ready',function(){
//创建BrowserWindow的实例 赋值给win打开窗口
//软件打开的的宽度和高度
mainWindow = new BrowserWindow({
width:800,
height:600,
webpreferences:{
webviewTag:true//必须为true才能启用vebview
//mainWindow.loadFile('index.html');//把index.html加载到窗口里面,另一种方法如下:
mainWindow.loadURL(require("path").join('file:',__dirname,'index.html'));
//打开窗口时开启调试模式
mainWindow.webContents.openDevTools();
//用户关闭窗口时销毁mianWindow
mainWindow.on('closed',function(){
mainWindow=null;
然后命令行输入(electron空格点) electron .
渲染页index.html
渲染页index.js
const wb=document.querySelect("#wb");
const loading=document.querySelect("#loading");
wb.addEventListener("did-stop-loading",function(){
loading.innerHTML="loading...";
wb.addEventListener("did-start-loading",function(){
loading.innerHTML="ok.";
**preload属性可以嵌入脚本操作vebview的远程页面**
渲染页index.html
![](https://img.kancloud.cn/c2/3d/c23dc33c0b71e7364c91fd363a5c0e59_358x187.png)
渲染页test.js
setTimeout(()=>{
var img_src=document.querySelect(".index-logo-src").src;
alert(img_src);
},5000)
node_modules本地安装与全局安装
Inspector
hello world
使用nodejs开发桌面客户端应用
Electron
使用 Node.js 的 API
读取本地文件
调用Html5的拖放api
官方示例下载
WebView内嵌窗口
window.open弹出子窗口及其操作
BrowserWindow渲染主窗口
主进程与渲染进程的通信
与react结合
electron-forge
打包工具一:electron-packager
打包工具二:electron-builder
Boilerplates样板工程
通用配置文档
NW.js
阿斯达岁的
npm install、npm install --save与npm install --save-dev区别