👀 增强 uni-app 系列产品体验的 uni-helper

1,681 阅读3分钟

如果你正在使用 uni-app 系列产品,你可能会用过我开发的 uni-helper

GitHub 仓库

GitHub Pages

Gitee 仓库

Gitee Pages

VSCode Marketplace

Open VSX Registry

uni-helper 旨在增强 uni-app 系列产品的体验,目前包括 TypeScript 支持、编辑器支持、原子化 CSS 支持、网络请求支持、组合式支持和自动化支持。

做来干啥

公司内使用 uni-app 做小程序和 APP 开发。在使用过程中,我发现 uni-app 系列产品很棒,它们提供了使用 vue 书写小程序和移动应用的能力、降低了全栈的门槛。

但它们也很糟,推出了和 node_modules 不一样的 uni_modulesTypeScriptVolar 支持都较差。

我先后尝试了以下的东西:

image.png

  • flyio,发现这位作者也好久不更新了

image.png

  • uni-ajax,客户的 iOS 手机报错误说请求不正常,情急之下换成了 luch-request,后续也没时间提 ISSUE

image.png

  • luch-request,发现泛型支持不太好,提了 PR 之后合并了,但是一直没发布 😳

image.png

image.png

我觉得与其等待别人来做,不如我自己开工做。于是我从 VSCode 插件 uni-app-snippets 开始做,发展成 VSCode 插件包 uni-helper,再发展成现在提供 6 个方面支持的包 uni-helper

做了啥鸭

uni-helper 目前包含了 6 个方面的支持。

image.png

TypeScript 支持

基于 这个 PR,目前 Volar 已经支持。

提供 3 个 NPM 包:uni-app-typesuni-cloud-typesuni-ui-types

image.png
image.png

最开始我给 uni-base-components-types 提了 PR。根据经验,我认为直接扒 uni-app 文档人工处理后的类型要比脚本、爬虫之类的工具自动处理得到的类型更准确,作者认为还是自动化好一点。于是我关了这个 PR 并基于这个 PR 做了 3 个 NPM 包。

编辑器支持

这里可能是大家最熟悉的部分,提供了 5 个 VSCode 插件。

image.png

应某个 ISSUE 请求,这 5 个插件也提供了 OpenVSX 版本。

image.png

原子化 CSS 支持

在小程序中使用 tailwindcss 简直就是一个折磨,因为小程序环境不支持大量语法,比如 w-[1.5rpx] 等。

提供 vite-plugin-uni-app-tailwind,通过修改 bundle 的方式支持了 tailwindcss 大部分原本不支持的语法,现在你可以正常使用 tailwindcss 了。

不想要丑丑的 []?不如来看看 tailwind-extensionsUnoCSS 吧。

没有做 webpack 支持,一方面是因为现在 vue 生态圈主推的是 vite,另一方面是因为我不太会写 webpack 插件,太难了 😅

image.png

网络请求支持

在开发网页时,用得最多的请求库肯定是 axios。参考 0.27.2 版本,我开发了 uni-app-network

⚠️可能会参考 1.1.3 修改,现在还不太稳定。

image.png

组合式支持

vueuse 是目前 vue 生态圈中最火的组合式工具包,但它是面向开放标准的,antfu 明确说了不打算支持 uni-app,见 github.com/vueuse/vueu…

现在我做了 uni-app-use,提供 uni-app 下的组合式支持。

⚠️对比 taro-hooks,还有很多 API 支持需要加入,现在还不太稳定。

image.png

自动化支持

我之前也有用过 taro,看到 taro-deploy 非常馋。于是就有了 uni-app-deploy

⚠️现在极其不稳定。

image.png

结语

uni-helper 所有内容完全开源,感兴趣的朋友可以帮忙找 BUG 提 ISSUE,也欢迎提 PR,更欢迎捐赠我让我继续做下去。

感谢所有提过 ISSUE 提过 PR 点过赞点过星的朋友。

祝大家都能准时上下班。♪(・ω・)ノ

image.png

本文使用 文章同步助手 同步