2-4

1 NavieUI 主题配置方法

TODO

2 vite项目导入外部包模块

描述：

Packages
  | 包A
  | 包B
    | 包C

如何在包A中导入包B中内容？

TODO

3 Axios 下载文件流方法

1.文件流是什么？

2.后端如何实现，前端如何下载？

TODO

4 Proxy 对象转普通对象

JSON.parse(JSON.stringify(your.object))

5 实现0.5px边框

.border::after { 
  content: '';
  position: absolute;  /* 把父视图设置为relative，方便定位*/
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: 0 0;
  box-sizing: border-box;
  border-radius: 40rpx;
  border: 1px solid #fff;
}

[1 ][微信小程序 0.5px的border在ios上显示粗细不均匀的解决方法](https://www.jianshu.com/p/898d873d786c)

6 Electron 自定义菜单

import {Menu, app} from 'electron';

export function createMenu() {
  if (process.env.NODE_ENV !== 'development') {
    const template: any[] = [
      {
        label: 'Edit',
        submenu: [
          {label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:'},
          {label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:'},
          {type: 'separator'},
          {label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:'},
          {label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:'},
          {label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:'},
          {label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:'},
          {
            label: 'Quit',
            accelerator: 'CmdOrCtrl+Q',
            click() {
              app.quit();
            },
          },
        ],
      },
    ];

    const menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
  }
}

7 解决 MAC 无法打开“***”，因为无法验证开发者

从访答-应用程序，右键-打开

[1][解决 MAC 无法打开“***”，因为无法验证开发者](https://blog.csdn.net/qq_32828933/article/details/108334190)

8 Electron 打包、发布和自动更新

打包和发布

使用 electron-builder 打包，常见配置 .electron-builder.config.js：

/**
 * TODO: Rewrite this config to ESM
 * But currently electron-builder doesn't support ESM configs
 * @see https://github.com/develar/read-config-file/issues/10
 */

/**
 * @type {() => import('electron-builder').Configuration}
 * @see https://www.electron.build/configuration/configuration
 */
module.exports = async function () {
  const {getVersion} = await import('./version/getVersion.mjs');

  return {
    directories: {
      output: 'dist',
      buildResources: 'buildResources',
    },
    productName: 'Dragon Proxies', // TODO Dynamically fetch name
    files: ['packages/**/dist/**'],
    extraMetadata: {
      version: getVersion(),
    },

    win: {
      target: 'nsis',
    },

    // Specify linux target just for disabling snap compilation
    linux: {
      target: 'deb',
    },
  };
};

打包命令：

# 本机打包
electron-builder build --config .electron-builder.config.js --dir --config.asar=false

# 本机打包、并发布
# 发布通过 .electron-builder.config.js 的 publish 字段配置
# 默认发布到github
# 以上示例为发布到阿里云oss
electron-builder --config .electron-builder.config.js --publish always

阿里云oss发布

根据 electron-publisher-alioss 进行配置，主要注意下面 generic 和 custom 的路径问题：

.electron-builder.config.js 中加入 publish 字段

// release config
publish: [
  {
    provider: 'generic',
    // 这里为下载地址，name表示项目名，os表示操作系统
    // 详见 TODO
    url: 'https://download.dragonbot.io/${name}/${os}',
  },
  {
    provider: 'custom',
    providerName: 'alioss',
    // 上传的路径
    path: '/${name}/${os}',

    bucket: 'dragonaio',
    region: 'oss-accelerate',
    accessKeyId: '',
    accessKeySecret: '',
    resumable: true,
    maxResume: 5,
    verbose: true,
  },
]

自动更新

注意：
通过 electron-updater 实现自动更新，详见 Auto Update
Mac自动更新需要签名，签名需要费用

示例代码

import {autoUpdater} from 'electron-updater';

app
  .whenReady()
  .then(() => {
  return autoUpdater.checkForUpdatesAndNotify();
})
  .catch(e => console.error('Failed check and install updates:', e));

之后，如果有更新，则会自动下载并更新（相当于强制更新），若要实现手动更新，见 [encapsulated manual update via menu](https://github.com/electron-userland/electron-builder/blob/docs/encapsulated manual update via menu.js)

win10相关

win10调试方法
在 Windows 上，如果您想查看包含来自 console.log() 的所有消息的控制台，则必须使用参数--enable-logging启动您的应用程序，例如： MyApp.exe --enable-logging
win10自动更新文件下载路径：
C:\Users\ginlink\AppData\Local\krait-tester-updater\pending

electron 模拟打包环境

Object.defineProperty(app, 'isPackaged', {
  get() {
    return true;
  }
});

9 Electron 无法安装问题

原因：网络原因

解决方案：

设置 electron 的下载地址

# win cmd
set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
npm install --registry=https://registry.npmmirror.com -D electron

[1][npm使用国内镜像安装Electron](https://mjpclab.site/uncategorized/npm-install-electron-by-mirror)

10 Electron 在win下拖拽问题

解决思路：给外部容器设置可拖拽，给内部按钮设置不可拖拽

.draggable {
  -webkit-app-region: drag;
}

.un-draggable {
  -webkit-app-region: no-drag;
}

11 request-promise 取消

import rp from 'request-promise';
import {collar} from 'js-flock';

// 'collar' for timeout
const response = await collar(
  (() =>
   new Promise((resolve, reject) => {
    const promise = rp.get(judge, {
      ...this.initialRequestConfig,
      ...this.getAgent(proxyObject, protocol),
    });

    this.cancelTokens.push(promise);

    promise.then(resolve).catch(reject);
  }))(),
  this.initialRequestConfig.timeout,
);

扩展：如何终止 promise ?

TODO

12 Electron win 签名

问题：

如何签名？
.pfx 是什么文件？为什么在本机可以签名，在 github actions 无法签名
错误：SignTool Error: No certificates were found that met all the given criteria.
[1][Windows 10: SignTool Error: No certificates were found that met all the given criteria. #1673](https://github.com/electron-userland/electron-builder/issues/1673)

13 Http 状态码枚举

[1][HttpStatusCode.ts](https://gist.github.com/scokmen/f813c904ef79022e84ab2409574d1b45)

[2][status-code-enum](https://www.npmjs.com/package/status-code-enum)

14 检查 ipv6

[1] http://ip6.me/api/

15 解析 proxy url

TODO

[1] https://www.npmjs.com/search?q=proxy%20url%20parse

[2][proxy-string-parser](https://www.npmjs.com/package/proxy-string-parser)

16 Parallels 科技

[1][Parallels Desktop v18.0.0(53049) 永久中文破解版 pd虚拟机（支持M1-intel）🌟附WIN10-11纯净系统- (30G整理）pd启动器v0.3.8](https://www.macat.vip/6746.html)

17 Vue h 渲染函数

TODO

// 基础
const textEl = h('div', {}, {default: () => 'text'})

// 多插槽
const otherEl = h('div', {}, {default: () => 'text', otherSlot: ()=> 'other'})

// 数组
h('div', {}, {default: () => [textEl, otherEl]})

注意：default 等插槽是一个函数，否则会有性能问题

18 Electron preload 运行在哪里

TODO

19 小程序 van-tabbar 遮挡问题

解决方案

page {
  position: relative;
  z-index: 10000;
}

20 Electron 路径问题

TODO

process.resourcesPath
app.getAppPath()

21 node-libcurl 版本问题

平台问题：M1 mac: mach-o file, but is an incompatible architecture (have 'x86_64', need 'arm64e')

解决方案：手动下载对应 release 的文件 node-libcurl.node，后放入node_modules/node-libcurl/lib/bindding/ 目录下

注意：electron 的版本要对应

22 acro-design work

[email protected]:qingqingxuan/arco-work.git

1 NavieUI 主题配置方法​

2 vite项目导入外部包模块​

3 Axios 下载文件流方法​

4 Proxy 对象转普通对象​

5 实现0.5px边框​

6 Electron 自定义菜单​

7 解决 MAC 无法打开“***”，因为无法验证开发者​

8 Electron 打包、发布和自动更新​

打包和发布​

阿里云oss发布​

自动更新​

win10相关​

electron 模拟打包环境​

9 Electron 无法安装问题​

10 Electron 在win下拖拽问题​

11 request-promise 取消​

12 Electron win 签名​

13 Http 状态码枚举​

14 检查 ipv6​

15 解析 proxy url​

16 Parallels 科技​

17 Vue h 渲染函数​

18 Electron preload 运行在哪里​

19 小程序 van-tabbar 遮挡问题​

20 Electron 路径问题​

21 node-libcurl 版本问题​

22 acro-design work​

1 NavieUI 主题配置方法

2 vite项目导入外部包模块

3 Axios 下载文件流方法

4 Proxy 对象转普通对象

5 实现0.5px边框

6 Electron 自定义菜单

7 解决 MAC 无法打开“***”，因为无法验证开发者

8 Electron 打包、发布和自动更新

打包和发布

阿里云oss发布

自动更新

win10相关

electron 模拟打包环境

9 Electron 无法安装问题

10 Electron 在win下拖拽问题

11 request-promise 取消

12 Electron win 签名

13 Http 状态码枚举

14 检查 ipv6

15 解析 proxy url

16 Parallels 科技

17 Vue h 渲染函数

18 Electron preload 运行在哪里

19 小程序 van-tabbar 遮挡问题

20 Electron 路径问题

21 node-libcurl 版本问题

22 acro-design work