我的文档笔记

心有萌虎，嘻秀强威。

我的文档笔记

Home
Archives
Tags

Electron初体验

electron 2019-07-31 20:54:20 375 0 0

zhangzilong electron

按照[官方文档](https://electronjs.org/docs/tutorial/first-app)进行操作，执行 ```npm start``` 时提示不明白 ```start``` 是什么操作，在package.json内添加 ```start``` 定义：
```
  "scripts": {
    "start": "electron ."
  }
```
再次尝试，哒哒～成功

然后页面上各个版本信息显示不出来，比较[官方demo](https://github.com/electron/electron)，创建窗口时需要设置preload.js：

```
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });
```

```preload.js``` 文件内容:
```
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  } 
  
  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}`, process.versions[type])
  }
})
```

```index.html``` 文件增加标签id：
```
    We are using node <span id="node"></span>,
    Chrome <span id="chrome"></span>,
    and Electron <span id="electron"></span>.
```
再次执行，显示成功。

![title](/api/file/getImage?fileId=5d418f53ccfe284cc2000017)

Pre: 各种排序算法

Next: 二分查找算法

375

Tencent Weibo
QQ Zone
RenRen

Copyright © zhangzilong.net
Powered by Leanote 京ICP备16043271号-3

Table of content