欢迎来到我的小宇宙

其实在最初找工作的时候就跟一些同为前端的朋友交流过，那个时候了解到的一个概念是叫“大前端”，当时其实是有点懵的，刚毕业感觉自己什么都不会，这个概念也是第一次听到，后面了解到的就是前端不仅仅只是做web开发。还需要涉及更多领域，比如说微信小程序，APP,桌面端（Electron），甚至是 Node.js,SSR 这种。后面上班后视野逐渐更加开阔，了解到了一点点 docker 的皮毛，熟悉了 nginx等这种工程化的内容。对于这个大前端也有了一定的概念。 随着工作时间的增加，偶然看到了微前端的这个概念。这个虽然在之前也听过，可是我并没有去了解，但是今天我在空闲的时间中，依靠如今的 AI 帮我做了一个深入的了解。我让 AI 帮我搭建了一个基础的项目框架，然后我看了一下它写的代码，大概就了解了这个概念。微前端无非就是一个大容器中我可以随时放任何内容，想放哪个就放哪个，不要哪个就拿出来即可。且这些内容可以由多个不同的人来开发。彼此之间不会受到任何干扰。这大概就是我所了解到的。虽然可能看起来比较浅显。但是我想应该就是这样了。 下面我输出一些基础的代码来看看 #首先是主应用，也就是所谓的放子应用的容器,其实就是一个独立的 Vue3 项目 App.vue中的核心部分是这样的 #<template> <div> <nav style="padding:10px;background:#f0f0f0"> <a href="/sub-vue">Vue3 Sub</a> | <a href="/sub-react">React Sub</a> | <a href="/sub-vanilla">Vanilla Sub</a> </nav> <div id="subapp-container"></div> </div> </template> 因为我初识这个微前端，搭建的内容可能简单粗浅。这个地方可以看到我有三个子应用，我选择了 vue, react, 和原生的 js. 这个地方的重要点是 a 链接中的 href 和下面 div 中的 id,这些内容需要跟在主应用中注册微应用中的内容对上,记得需要在 main.js 中需要引入前端和对应用进行注册。

背景 #昨天在公司写完项目后，本来就是一个很正常的新增一个接口，然后修改 nginx，然后部署项目，但是出现了一个非常奇怪的事情。我的接口居然出现 403，报错还是 vite ???? 可是我已经部署了怎么可能还报错 vite 的问题呢???? Vite 跨域配置 #以下是我的 vue3 代码的 vite的跨域配置，其实就是端口号不一样，所以我就参考了之前写的 Botapi，nginx 也是这样写的。

这段时间跟同事一起做开发时，总是碰到分支起冲突，我去请教 AI 时，他给了我这样的一套命令，git stash,git pull,git stash pop,这个 pull 是了解的，但是剩下两个是什么呢？为什么能这样避免冲突呢？于是我就去搜索答案，发现 git stash 可以做三件事情， 保存当前修改（tracked 文件） 清空工作区 让你可以安全切分支 然后这个git stash pop命令是把最近一次 stash 的修改恢复到当前工作区，并且从 stash 列表里删除它。 我们来看看一个完整的使用流程 ## 开发中 git status # 临时保存 git stash push -m "WIP: payment module" # 切分支 git checkout main # 修 bug git commit -am "hotfix" # 切回来 git checkout dev # 恢复修改 git stash pop 那其实有点好奇这个 stash 是存在哪里的，本质是什么？ # 存在 .git 目录里 实际是一个特殊的 commit 存在一个栈结构里 但是这种方法不是建议经常使用，很容易造成忘记这回事，最开始我用的时候没有执行最后一步 git stash pop 时吓了一跳，怎么我自己的修改全部不见了。后面才知道是少执行了一步，这也确实暴露了自己的不足。

这两天由于事情不多，能有一点时间解决在 uniapp 中扫描局域网 IP 的功能，虽然这个后端也能做，但是这不恰好我前端也能做，也没啥其他问题。于是就开始琢磨起来。 一开始我去问 GPT，给出的回答是比较一般的，他跟我说要用 http 去轮询接口，这个不还是要后端配合，然后我说还有没有其他的。他给出的一个其他的方法，但是也是丝毫没效果的。于是我放弃了直接跟 AI 沟通就能解决的想法。 后面尝试古法搜索，直接上网页搜索，虽然也找了大半天，但是终究是找到了一个能用的解决方法，我看到有人推荐去使用 uniapp 中的插件 参考文章：xl__qd - CSDN 博客 我找到了这个udp-client 的插件，这个插件完全免费，于是我下载下来，将里面的 aar 包放到我的项目中。 这个地方需要注意，放到我们项目中之后，我们需要在 Hbuildx 中将这个包在 mainfest.json中的安卓/IOS 原生插件配置页面中引入进来，

今天在做开发时，同事提出前端能不能直接对一些内容做排序，不需要依靠后端返回的拼音来做。我一开始还不太明白怎么做，那么就需要交给万能的 claude 大神，果不其然，给出了一个"完美"的方案，那就使用localeCompare方法，这个方法能支持实现排序，然后我又去查询了解这个方法，在 MDN 这个网站中找到了对这个 localeCompare API 的解释描述。 在仔细看完后我发现了一个问题，这个方法在webview中不一定适配，恰好我的运行环境是 app，需要在手机上运行，虽然我在电脑上运行过了是正常的，于是我打包一个 wgt 包进行更新，果然有问题，这个名称排序乱七八糟的。根本不能使用。 为什么不能直接用 localeCompare？ #那是为什么不能直接用 localeCompare 呢？这是因为浏览器内置了完整的 Intl / 本地化数据，可以进行语言敏感的比较（也可直接用 Intl.Collator）。