Electron 填坑之旅

关于 <WebView>

<WebView>的 height、width

需要外面包裹一层<div>：

handleResize(e) {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
}

componentDidMount() {
    window.addEventListener('resize', this.handleResize);
}

render() {
    // x、y 为其他框架外元素所占宽高
    const styleDiv = {
        width: this.state.width - x,
        height: this.state.height - y,
    };
    const styleWeb = {
        width: '100%',
        height: '100%',
    };
    const src = "./sub.html";
    return (
        <div style ={styleDiv }>
            <webview src={src} style ={styleWeb }>
            </webview>
        </div>
    )
 

React 与 nodeintegration 属性

render(

    let src = "./sub.html"
    ... ...   
    
    <webview src={src} style ={style}
        allowpopups
        nodeintegration
        preload = './models/db.js'
        >
    </webview>
    
    ... ...
)

如上，React 自定义属性必须增加 data-、aria- 前缀，否则 React不会渲染的。因此经过 React 渲染后的 <webview> DOM，不包含 nodeintegration、allowpopups等这类属性，因此在其中就不能运行 require 等命令。
而 <webview> 标签的 nodeintegration 属性必须在 DOM 渲染前设置，因此只能通过 render() 渲染完成后直接操作 DOM 整个添加 <webview> 解决：

componentDidUpdate(props, state) {
    if(condition){ // 合适的时机
        let src = "./sub.html";
        let webview = this.refs.webview;
        webview.innerHTML = `<webview src='${src}' style ='height:100%' allowpopups nodeintegration autosize></webview>`;
    }
}

render(){
    return(
        <div style ={style} ref = "webview"></div>
    )
}

React 支持的 HTML 标准属性

accept acceptCharset accessKey action allowFullScreen allowTransparency alt
async autoComplete autoPlay cellPadding cellSpacing charSet checked classID
className cols colSpan content contentEditable contextMenu controls coords
crossOrigin data dateTime defer dir disabled download draggable encType form
formAction formEncType formMethod formNoValidate formTarget frameBorder height
hidden href hrefLang htmlFor httpEquiv icon id label lang list loop manifest
marginHeight marginWidth max maxLength media mediaGroup method min multiple
muted name noValidate open pattern placeholder poster preload radioGroup
readOnly rel required role rows rowSpan sandbox scope scrolling seamless
selected shape size sizes span spellCheck src srcDoc srcSet start step style
tabIndex target title type useMap value width wmode

包括：src、preload 。

参考：

• React 组件的详细说明和生命周期
• React 标签和属性支持
• https://github.com/electron/e...
• <webview> 标签

DevTools 扩展的配置

方法一：

npm install --save-dev electron-devtools-installer

在 main.js 中加入：

import installExtension, { REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer';

installExtension(REACT_DEVELOPER_TOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log('An error occurred: ', err));

方法二：

EMBER_INSPECTOR = 'bmdblncegkenkacieihfhpjfppoconhi';
REACT_DEVELOPER_TOOLS = 'fmkadmapgofadopljbjfkapdkoienihi';
BACKBONE_DEBUGGER = 'bhljhndlimiafopmmhjlgfpnnchjjbhd';
JQUERY_DEBUGGER = 'dbhhnnnpaeobfddmlalhnehgclcmjimi';
ANGULARJS_BATARANG = 'ighdmehidhipcmcojjgiloacoafjmpfk';
VUEJS_DEVTOOLS = 'nhdogjmejiglipccpnnnanhbledajbpd';
REDUX_DEVTOOLS = 'lmhkpmbekcpmknklioeibfkpmmfibljd';

从 Chrome 应用商店下载安装 React DevTools，根据其标识符，找到其安装目录（用 Everything 搜索比较快），复制 manifest.json 同目录下文件到应用目录 ./react-devtools，目录结构如下：

└─react-devtools
    │  main.html
    │  manifest.json
    │  panel.html
    │
    ├─build
    └─icons

在 main.js 中写入：

const BrowserWindow = electron.BrowserWindow;

function createWindow() {

  // 创建浏览器窗口
  mainWindow = new BrowserWindow({ width: 800, height: 600 });

  // 配置 React DevTools
  let reactdevtools = "./dev-settings/react-devtools";
  BrowserWindow.addDevToolsExtension(reactdevtools);
    .... ...
}

若这样写，会报错，原因不明。。。

const BrowserWindow = electron.BrowserWindow;
let reactdevtools = "./dev-settings/react-devtools";
BrowserWindow.addDevToolsExtension(reactdevtools);

其他 DevTools 工具安装类似。

electron-packager 打包

初次打包会下载 Electron 文件到如下目录：C:\Users\<user_name>\AppData\Local\electron\Cache，因为文件比较大（每种平台50M左右），所以打包回比较慢。
注：老版本 Electron 会缓存到 C:\Users\<user_name>\.electron 路径下。

npm view electron-prebuilt version
// 1.3.2

提前下载对应版本的 Electron 文件（如：electron-v1.3.2-win32-x64.zip）放于上述目录下，能加快打包速度。