初学Electron
commit
75d75761da
|
|
@ -1,3 +1,4 @@
|
|||
{
|
||||
"accentColor": ""
|
||||
"accentColor": "#5ccef5",
|
||||
"theme": "obsidian"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
[
|
||||
"obsidian-image-auto-upload-plugin"
|
||||
]
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"id": "obsidian-image-auto-upload-plugin",
|
||||
"name": "Image auto upload Plugin",
|
||||
"version": "3.7.0",
|
||||
"minAppVersion": "0.10.7",
|
||||
"description": "This plugin uploads images from your clipboard by PicGo",
|
||||
"author": "renmu",
|
||||
"authorUrl": "https://github.com/renmu123/obsidian-image-auto-upload-plugin",
|
||||
"isDesktopOnly": true
|
||||
}
|
||||
|
|
@ -31,25 +31,13 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "fcca90a4313bff23",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "markdown",
|
||||
"state": {
|
||||
"file": "极客时间学习/Java 实战训练营/Netty/Netty 实现IM系统.md",
|
||||
"mode": "source",
|
||||
"source": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "b0885c2694804173",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "markdown",
|
||||
"state": {
|
||||
"file": "开发中/本地版本的cos图床.md",
|
||||
"file": "web/electron/Electron 初学.md",
|
||||
"mode": "source",
|
||||
"source": false
|
||||
}
|
||||
|
|
@ -122,7 +110,7 @@
|
|||
"state": {
|
||||
"type": "backlink",
|
||||
"state": {
|
||||
"file": "极客时间学习/Java 实战训练营/Netty/Netty 实现IM系统.md",
|
||||
"file": "web/electron/Electron 初学.md",
|
||||
"collapseAll": false,
|
||||
"extraContext": false,
|
||||
"sortOrder": "alphabetical",
|
||||
|
|
@ -139,7 +127,7 @@
|
|||
"state": {
|
||||
"type": "outgoing-link",
|
||||
"state": {
|
||||
"file": "极客时间学习/Java 实战训练营/Netty/Netty 实现IM系统.md",
|
||||
"file": "web/electron/Electron 初学.md",
|
||||
"linksCollapsed": false,
|
||||
"unlinkedCollapsed": true
|
||||
}
|
||||
|
|
@ -162,7 +150,7 @@
|
|||
"state": {
|
||||
"type": "outline",
|
||||
"state": {
|
||||
"file": "极客时间学习/Java 实战训练营/Netty/Netty 实现IM系统.md"
|
||||
"file": "web/electron/Electron 初学.md"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -183,19 +171,25 @@
|
|||
"command-palette:打开命令面板": false
|
||||
}
|
||||
},
|
||||
"active": "30e0a2943950d852",
|
||||
"active": "b0885c2694804173",
|
||||
"lastOpenFiles": [
|
||||
"开发中/本地版本的cos图床.md",
|
||||
"日志检索.md",
|
||||
"().md",
|
||||
"web/electron/Electron 初学.md",
|
||||
"Obsidian + PicGo + 腾讯云COS 图床配置.md",
|
||||
"README.md",
|
||||
"每日日志/腾讯 COS + CDN实现图床.md",
|
||||
"极客时间学习/Java 实战训练营/Netty/Netty 实现IM系统.md",
|
||||
"Android Hilt.md",
|
||||
"web/electron",
|
||||
"工具相关文档/git/Git 笔记.md",
|
||||
"工具相关文档/VSCode/VSCode 相关.md",
|
||||
"工具相关文档/Android Studio",
|
||||
"README.md",
|
||||
"开发中/Vue3 + 腾讯COS文件上传.md",
|
||||
"工具相关文档/git",
|
||||
"工具相关文档/未命名.md",
|
||||
"开发愿望清单.md",
|
||||
"日志检索.md",
|
||||
"开发中/本地版本的cos图床.md",
|
||||
"工具相关文档/VSCode/VSCode 连接 云服务器.md",
|
||||
"工具相关文档/VSCode/VSCode 文件嵌套.md",
|
||||
"工具相关文档/VSCode",
|
||||
|
|
@ -211,15 +205,9 @@
|
|||
"Bug日志/后端 -- Bug记录.md",
|
||||
"极客时间学习/Nginx_geek/核心基础.md",
|
||||
"语言/Kotlin/2023-11-16.md",
|
||||
"语言/未命名.md",
|
||||
"语言/Kotlin",
|
||||
"语言",
|
||||
"极客时间学习/Java 实战训练营/分布式服务/分布式服务.md",
|
||||
"极客时间学习/Java 实战训练营/分布式服务/分布式服务容错.md",
|
||||
"文档编写/PRD",
|
||||
"文档编写/PRD.md",
|
||||
"文档编写",
|
||||
"工具相关文档",
|
||||
"UI学习/PS 学习/日志.md"
|
||||
"文档编写"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
暂时不写博客，看[官方教程](https://developer.android.google.cn/training/dependency-injection/hilt-android?hl=zh-cn#generated-components))
|
||||
|
||||
不纠结于底层细节，就看看在学了Android官方的教程之后的总结
|
||||
### 引入依赖
|
||||
- 项目根级 `build.gradle.kts`
|
||||
```
|
||||
plugins {
|
||||
// hilt
|
||||
id("com.google.dagger.hilt.android") version "2.48.1" apply false
|
||||
}
|
||||
```
|
||||
- app 级 `build.gradle.kts`
|
||||
```
|
||||
plugins {
|
||||
...
|
||||
kotlin("kapt")
|
||||
id("com.google.dagger.hilt.android")
|
||||
}
|
||||
|
||||
android {
|
||||
...
|
||||
}
|
||||
|
||||
dependencies {
|
||||
...
|
||||
// hilt
|
||||
implementation("com.google.dagger:hilt-android:2.48.1")
|
||||
kapt("com.google.dagger:hilt-android-compiler:2.48.1")
|
||||
}
|
||||
|
||||
kapt {
|
||||
correctErrorTypes = true
|
||||
}
|
||||
```
|
||||
### 为当前的App启用Hilt (必须)
|
||||
创建一个 Application 的继承类，在 `AndroidManifest.xml` 中的 `application` 中设置当前的Application，为这个 `Application` 添加 `@HiltAndroidApp`
|
||||
|
||||
### Android Hilt 使用时的容器及层次结构
|
||||
Hilt 的顶层容器是 `Application` 容器, 这些容器，存在层级关系
|
||||
- 层级关系如下
|
||||
- `SingletonComponent::class` -- `Hilt` 根容器, 就是 Application 容器
|
||||
- `ActivityComponent::class` -- ``
|
||||
- `FragmentComponent::class`
|
||||
- `ViewComponent::class`
|
||||
- `ServiceComponent::class`
|
||||
- `BroadcastReceiver::class`
|
||||
-
|
||||
上面的层级关系中，`SingletonComponent` 是最高层次，依次类推
|
||||
|
||||
### Android Hilt 中的作用
|
||||
|
||||
- 标注Hilt容器的注解
|
||||
- `@HiltAndroidApp`
|
||||
- `@AndroidEntryPoint`
|
||||
-
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
测试图片上传
|
||||
|
||||
- [腾讯云 COS 配置PicGo访问](https://cloud.tencent.com/document/product/436/74373)
|
||||
- Obsiandian 安装 **Image Auto Upload** 插件，然后再插件中配置未PicGo，先安装了PicGo后，会自动配置好相关的，实现如上图片的粘贴上传
|
||||
- 
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
## 安装Electron
|
||||
- 使用npm初始化一个项目 `npm init`
|
||||
- 项目内新增`.npmrc` 内容如下
|
||||
```
|
||||
# 添加
|
||||
registry=https://registry.npmmirror.com
|
||||
#
|
||||
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
|
||||
ELECTRON_CUSTOM_DIR={{ version }}
|
||||
```
|
||||
- 再使用 `npm install --save-dev electron`, 安装之前先把electron安装失败的cache删除掉
|
||||
## Electron 打包
|
||||
ubuntu 安装 `rpmbuild` [参考博客](https://juejin.cn/s/ubuntu%20%E5%AE%89%E8%A3%85rpmbuild)
|
||||
|
||||
## Vue3 + Electron
|
||||
- 使用vite初始化一个`vue-ts` 的项目
|
||||
- 安装`Electron` 相关的依赖
|
||||
- `electron`
|
||||
- `electron-builder`
|
||||
- `electron-devtools-installer`
|
||||
- `rimraf`
|
||||
- [`vite-plugin-electron`](https://github.com/electron-vite/vite-plugin-electron)
|
||||
- [`vite-plugin-electron-preload`](https://github.com/electron-vite/vite-plugin-electron-preload) 不配置加载preload会失败
|
||||
- [`vite-plugin-electron-renderer`](https://github.com/electron-vite/vite-plugin-electron-renderer) 目前没有配置相关内容
|
||||
- 注意：
|
||||
- 根据vite-plugin-electron 配置项目，并运行即可
|
||||
- 运行时可能会出现 `electron` 安装失败，把 `node_modules` 删除，删除掉 pnpm的lock yaml，和系统的electron的缓存，多安装几次，这个确实有点烦人
|
||||
- 使用 `vite-plugin-electron` 之后，还需要使用 `vite-plugin-electron-preload` 才能正确加载preload
|
||||
|
||||
## Vue3 + Electron
|
||||
- 使用`electron-builder` 打包
|
||||
- 在项目的根目录下创建一个 `electron-builder.json`
|
||||
```json
|
||||
{
|
||||
"productName": "ElectronViteVue3",
|
||||
"appId": "top.rayc.electrontest",
|
||||
"copyright": "Copyright © 2024-present Andy",
|
||||
"compression": "maximum",
|
||||
"asar": true,
|
||||
"directories": {
|
||||
"output": "release/${version}"
|
||||
},
|
||||
"nsis": {
|
||||
"oneClick": false,
|
||||
"allowToChangeInstallationDirectory": true,
|
||||
"perMachine": true,
|
||||
"deleteAppDataOnUninstall": true,
|
||||
"createDesktopShortcut": true,
|
||||
"createStartMenuShortcut": true,
|
||||
"shortcutName": "ElectronVite4Vue3"
|
||||
},
|
||||
"win": {
|
||||
"icon": "./resource/shortcut.ico",
|
||||
"artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}",
|
||||
"target": [
|
||||
{
|
||||
"target": "nsis",
|
||||
"arch": ["ia32"]
|
||||
}
|
||||
]
|
||||
},
|
||||
"mac": {
|
||||
"icon": "./resource/shortcut.icns",
|
||||
"artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
|
||||
},
|
||||
"linux": {
|
||||
"icon": "./resource",
|
||||
"artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
|
||||
}
|
||||
}
|
||||
```
|
||||
- 使用 `electron-builder` 命令安装就行
|
||||
- 注意：
|
||||
- 在使用 `electron-builder` 打包需要下载几个压缩包，但是下载会失败，可以手动下载这些压缩包，把这些压缩包，保存到 `electron` 的 `Cache` 目录中
|
||||
|
||||
## Electron 取消顶部菜单栏
|
||||
- 在 主进程程序中进行修改
|
||||
- 引入菜单 `Menu`
|
||||
```TypeScript
|
||||
import { Menu } from "electron"
|
||||
```
|
||||
- 在 `createWindow` 方法中进行设置
|
||||
```TypeScript
|
||||
const createWindow = () => {
|
||||
Menu.setApplicationMenu(null);
|
||||
const win = new BrowserWindow({
|
||||
title: "Electron + Vite",
|
||||
webPreferences: {
|
||||
contextIsolation: false, // 是否开启隔离上下文
|
||||
nodeIntegration: true, // 渲染进程使用 Node.js API
|
||||
// sandbox: false,
|
||||
preload: path.join(__dirname, "preload.js"), // 预加载脚本
|
||||
},
|
||||
});
|
||||
if (process.env.VITE_DEV_SERVER_URL) {
|
||||
win.loadURL(process.env.VITE_DEV_SERVER_URL);
|
||||
win.webContents.openDevTools();
|
||||
} else {
|
||||
// Load your file
|
||||
win.loadFile("dist/index.html");
|
||||
}
|
||||
// 开启调试工具
|
||||
};
|
||||
```
|
||||
|
||||
## Electron 错误
|
||||
`Uncaught TypeError: path.join is not a function at node_modules/electron/index.js`
|
||||
解决办法: [参考博客](https://blog.csdn.net/q1003675852/article/details/134774965)
|
||||
- 安装 `vite-plugin-optimizer`
|
||||
- 在 `vite.config.ts` 中配置
|
||||
```ts
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import electron from "vite-plugin-electron/simple";
|
||||
import optimizer from "vite-plugin-optimizer";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
electron({
|
||||
main: {
|
||||
entry: "electron/main.ts",
|
||||
},
|
||||
preload: {
|
||||
input: "electron/preload.ts",
|
||||
},
|
||||
}),
|
||||
// 加载ipcRenderer
|
||||
optimizer({
|
||||
electron: `const { ipcRenderer } = require("electron"); export { ipcRenderer};`,
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
Loading…
Reference in New Issue