代码拉取完成,页面将自动刷新
vue create electron-learn
vue add electron-builder
yarn add three@0.134 troisjs
yarn install
yarn serve
yarn build
yarn lint
yarn config set registry https://registry.npm.taobao.org
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/
yarn config set electron_builder_binaries_mirror https://npm.taobao.org/mirrors/electron-builder-binaries/
// src/preload.ts
import { contextBridge } from 'electron'
// import { remote } from 'electron'
import { createRightMenu } from '@/electron'
import { nativeImage, ipcRenderer } from 'electron'
const remote = require('@electron/remote')
const handler = createRightMenu()
contextBridge.exposeInMainWorld('electron', {
nativeImage,
remote,
ipcRenderer
})
// src/background.ts
const win = new BrowserWindow({
width: 1024,
height: 600,
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: (process.env
.ELECTRON_NODE_INTEGRATION as unknown) as boolean,
enableRemoteModule: true,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
preload: path.join(__dirname, 'preload.js')
}
})
// vue.config.js
{
"electronBuilder": {
preload: path.join(__dirname, 'src/preload.ts')
}
}
// src/global.d.ts
interface WinOpts {
payload?: Record<any, any>;
windows?: Record<any, any>;
route: string;
callback?: (data?: any) => void;
}
interface ElectronAPI {
remote: {
dialog: Electron.Dialog;
Menu: Electron.Menu;
shell: Electron.Shell;
MenuItem: Electron.MenuItem;
};
ipcRenderer: Electron.IpcRenderer;
nativeImage: Electron.nativeImage;
defineCreateMenu: (remote: any) => any[];
getGlobal: (key: string) => any;
getCurrentWindow: () => Electron.BrowserWindow;
updateOpts: (options?: any[]) => void;
createSmartWindow: (options: WinOpts) => void;
triggerNotification: (options?: any) => void;
transferChannel: (channel: string, fnCall: (data: any) => void) => void;
}
declare interface Window {
version: string;
electron: ElectronAPI;
}
// .eslintrc.js
{
globals: {
electron: 'readonly',
},
}
// shims-usage.d.ts
declare namespace fetchSetting {
interface fetchOptions {
method?: 'GET' | 'POST';
credentials?: string;
MeshPublicInterface?: import('troisjs').MeshPublicInterface
[params: string]: any;
}
type defineUpdate = (state: any) => void;
function fnCall(str: string): void;
type MeshPublicInterface = import('troisjs').MeshPublicInterface
}
type MeshPublicInterface = import('troisjs').MeshPublicInterface
// usage-import.ts
/* eslint-disable @typescript-eslint/no-unused-vars */
const options: fetchSetting.fetchOptions = {
method: 'GET',
credentials: 'include'
}
const fn: fetchSetting.defineUpdate = () => {
console.log('xxxx')
}
let mesh: MeshPublicInterface
let log: typeof Electron.NodeEventEmitter
npm i -g asar
# /release/win-unpacked/resources
asar extract app.asar ./app-folder
# .npmrc
# phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs/
yarn add -D electron-icon-builder
# electron-icon-builder --input=./public/uni.png --output=dist_electron --flatten
// code example ./execute.js
console.log('execute callback')
const stand = new Promise((resolve) => {
resolve('This is a example')
})
stand.then(function (a) { return a })
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。