我的GitHub
0%

一、背景

开发环境可以利用控制台调试,看网络请求啊乱七八糟的。但是打包以后就没办法看了。

二、解决这个问题

其实主要打开控制台的关键语句就是

1
window.webContents.openDevTools()

那我们需要设置一个不常用的快捷键,避免误触来打开控制台

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import {globalShortcut} from 'electron';
// 快捷键注册
function registryShortcut() {
globalShortcut.register('CommandOrControl+J+K', () => {
// 获取当前窗口
BrowserWindow.getFocusedWindow().webContents.openDevTools();
});
}

app.whenReady().then(() => {
// 注册快捷键
if (!isDevelopment) {
registryShortcut();
}
});

app.on('will-quit', () => {
globalShortcut.unregisterAll();
});

即可

阅读全文 »

背景

在开发过程中,偶尔会遇到一些问题,需要通过修改三方库才能解决。

一般遇到这种情况,我们会采取以下方式解决:

1.fork一份并修改,package.json指向fork的地址。

2.写一个shell脚本,在拉完包后执行脚本替换。

第一个方法太重了,并且在主库的更新合并上比较麻烦,需要手动去合并。

第二个方法需要写shell脚本,投入产出比不高,还经常忘记执行。

但自从发现了如下方法,临时修改npm包再也不是事了

使用patch-packagepostinstall-postinstall

1.集成

阅读全文 »

Vue3的router问题

其实严格来说,这不是qiankun的问题,是vue-router4.x的问题。

解决方案:history模式使用window.history跳转,hash模式主应用添加hashchange事件发送

详情见issues1280

旧的jq项目改造,发现属性和方法丢失

子应用包含多个script,其中有些是公共方法,其他js使用的时候提示找不到方法

解决方案:需要显式挂载到window

详情见issues1272

qiankun添加的div撑不满外部盒子

使用css选择器为qiankun添加的div加样式

阅读全文 »

这个方式其实是我在上家公司的时候体验过,觉得确实很有意思。

所以这里来逆推一下实现方式。

解决了什么痛点

1.开发一个模块,需要启动2-3个项目

在微前端的开发过程中,如果我们要在主应用中看效果,我们至少需要启动一个主应用,和一个待开发模块,如果项目具有登陆机制,我们还需要启动一个登陆模块。

换句话说,为了开发一个模块,我们需要至少启动三个项目。

2.数据耦合的情况下,无法单独启动项目调试

3.特定环境下出现的bug

可能某些bug依赖特定的数据,在测试环境出现了但在本地运行或开发环境运行正常。

如何解决

阅读全文 »

微前端改造

这里以Vue3为例子,主应用和子应用均使用vue3

路由的话,建议主应用和子应用使用相同模式,即均为history或者均为hash

以下先使用为history模式讲解,最后会写如何使用hash模式。


History模式

主应用改造

一般情况下,我们会将带导航的layout的部分,直接放在主应用中。当然不是说不能拆,是能拆的,因为导航的layout明显是个路由不敏感部分,完全可以拆解为单独的子应用。

1.添加qiankun

1
yarn add qiankun
阅读全文 »

微前端是什么

我觉得没有什么说的必要,可以百度到

微前端能解决什么

也没有什么必要赘述

微前端能为我们带来什么

不被时间所淘汰的技术选型!!!

微前端的核心价值

选型开始

备选库

SingleSpa:可以说“万物基于SingleSpa”,当前流行的大量框架其实是SingleSpa的上层封装。

阅读全文 »

这里是一些很浅很浅的东西,大佬们不要喷我=。=。

qiankun将应用分为两种:主应用,微(子)应用

一.主应用是一个基座

主应用是一个基座,承载着各个子应用。

主应用负责各个应用之间的加载,通信和调度。

带🔥都说,这是微服务在前端的应用,不过我没做过服务端,对微服务不是很了解,因此不敢乱说。

我只做过客户端,从客户端的角度来看,这看上去就类似于iOS的组件化。将模块解耦后,通过主工程进行加载调用。这样一来有客户端背景的同学是不是就比较好理解了。

二.主应用通过注册好的配置表,去分别加载各自子应用的资源。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
{
// 子应用的名称,需要唯一
name: 'reactApp',
// 需要加载资源的地址
entry: '//localhost:3000',
// 用于替换dom的id
container: '#container',
// 激活规则
activeRule: '/app-react',
},
{
name: 'vueApp',
entry: '//localhost:8080',
container: '#container',
activeRule: '/app-vue',
},
{
name: 'angularApp',
entry: '//localhost:4200',
container: '#container',
activeRule: '/app-angular',
},
]);
// 启动 qiankun
start();

这里可以看到两步:注册,启动

阅读全文 »

第一次用Vue3+ts,采用了eslint(aribnb),遇到了一些问题,又不想用经常性使用any,只能逼迫自己解决问题。

本文只是记录一些自己遇到的检测问题

1.使用less并导出变量到ts使用,但是ts报错找不到

报错内容:

1
Cannot find module 'xxx.less' or its corresponding type declarations.

解决方法:

CSS in Typescript

2.setup中获取proxy,但提示可能为null

1
const { proxy } = getCurrentInstance();

提示报错内容:

阅读全文 »

之前干iOS的,写过一段时间swift,所以从js转到ts对我其实影响不太大。

只是有些知识点比较乱,没有串起来过。

首先我们需要上typescript的官方文档阅读一哈文档

中文网很久没有更新了,不过github有老哥一直在翻译zhongsp/TypeScript

实际上现在看官网也有中文语言这个选项了,但是翻译完成的文章不太多,今后应该会越来越多。

那么接下来就是把知识点串起来了

以下都是个人观点,如果有不对,望大牛指点

1.要不要全局安装typescript

个人觉得不要,typescript也是有版本的,版本随着项目走,项目去安装typescript即可,完全没有必要全局安装。

2.tsc命令

阅读全文 »

背景

常见的需求,开发移动端h5,在移动端浏览器或者移动端app上渲染。

前端不知道怎么在移动端调试,移动端不知道怎么调试网页。

经常出了问题不知道是找移动端解决还是找前端解决。

好了,我们举个例子:

公司小改改写了个页面,要在app的webview里加载,本地调试杠杠的,自己手机杠杠的,但是一上特意准备的测试机,就白屏了。

我号称是公司移动端里最会写前端的,前端里最会写移动端的。只能露一手了[LetMeSee]

如果你是前端,可以找个客户端,按此方法操作打开调试控制台,由你来调试网页上的问题

如果你是个移动端,你就可以按照这个方法,为前端同学准备好调试环境,剩下的网页调试工作交给他们

如何查找问题

阅读全文 »