灌水 Electron 学习笔记

codeskyblue · December 06, 2019 · Last by codeskyblue replied at December 09, 2019 · 1098 hits

前言

好久没看Electron,重新拾起来,发现之前踩过的坑还是要重新踩一遍。Electron发布频率很高,一段时间不看,就发现他又更新了。

看文档

配置npm镜像

国内的网络环境没国内镜像根本不行。

npm set registry https://registry.npm.taobao.org # 注册模块镜像
npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node 源码镜像

export ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"

# 测试
npm info express

# 可能taobao的镜像会坏掉,切换回原来的
npm config set registry https://registry.npmjs.org/

学习

看官网的例子

https://github.com/electron/electron-quick-start

electron-api-demos 从这个项目 https://github.com/electron/electron-api-demos 主页,将这个App下载下来,安装到电脑上。
因为这个App是一个用Electron写的教学App,有很多使用的代码片段。

https://www.electronforge.io/ 这个项目感觉一般般,虽然可以帮助很快的生成项目代码,并提供自动打包功能,但是未免有点太简单了。搞大项目不太方便。

https://electronjs.org/apps 有很多开发者开发的App,大多可以找到源码。

从脚手架开始

从头开始一步步的写,固然可以学到很多知识,然后速度会很慢。能从脚手架直接开始的话,可以事半功倍。

在线练习网站: https://repl.it/languages/nodejs

常用NodeJS库

request

https://github.com/request/request

常见用法

const request = require("request")

# 普通请求
request.get("https://www.baidu.com", (err, response) => {
console.log(err)
console.log(response)
})

# 请求JSON数据
request.get({
url: "https://httpbin.org/get",
json: true,
}, (err, response)=>{
// response.body is json object
console.log(response.body.url)
})

使用await, async的方式调用request

const request = require("request")
const rp = require("request-promise")

async function httpGet(){
let response = await rp.get("https://httpbin.org/get")
console.log(response)
}

httpGet()

BrowserWindow间通信

默认是不支持通信的,如果非要通信,就需要ipcMain来转发。

比如

const {ipcMain} = require("electron")

ipcMain.on("message-forward", (event, arg) => {
mainWindow.webContents.send(arg.channel, arg.data)
})

# In another window, call
ipcRenderer.send("message-forward, {channel: "sync-download", data: "body part"})

参考: https://stackoverflow.com/questions/40251411/communication-between-2-browser-windows-in-electron

浏览器支持,但是Electron不支持的问题

prompt 这个命令,浏览器是OK的,但是electron却不支持,网上有人解释说。prompt会阻塞住渲染进程。 https://stackoverflow.com/questions/38858879/replace-prompt-in-on-electron

可以用smalltalk库代替。

ReactJS资料

感觉官方文档做的挺不错的
https://react.docschina.org/docs/react-component.html#props

ANY MORE

如果新学了什么东西,我会再补充的

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 3 条回复 时间 点赞

我之前也写过一个玩玩,这玩意就是打包出来的文件实在太大了。

@恒温 一般在60m,如果太大说明不太正常了

恒温 回复

现在也不小,mac上100m的样子

需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up