electron-learn

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 })