uni-app x 专题

前言

uni-app x 是一个非常强大的跨多端解决方案，可以说是国内跨平台编译技术的天花板了，DCloud 公司出品。

我很荣幸在 [email protected] 版本中，适配了 uni-app x 的多端构建。

并借助 uni-app x 的能力，把 tailwindcss 原子化样式方案，同时带入到 Web, 小程序, 安卓,IOS, 鸿蒙 五端。

注意

目前只支持 [email protected]，不兼容 [email protected] 去进行跨多段，
原因在于 [email protected] 中生成的 css 过于先进，基本只有现代的 web 浏览器可以兼容，
而 uni-app x 暂时并没有兼容如此之多的 css 现代特性，所以 [email protected] 目前在 uni-app x 中无法使用。

如何使用

🚀详见快速集成

如何开发

目前 uni-app x 并没有提供任何 cli 的方式去使用它，所以是必须要去使用 Hbuilderx 去进行开发和构建的。

这里可以使用 Hbuilderx 的运行，来运行到各个平台。

优先使用安卓进行开发

一般来说，CSS 平台的兼容程度，是 Web > 小程序 > App(安卓/IOS/鸿蒙)

所以，假如你有跨多端的需求，建议你一开始使用 安卓模拟器 来进行开发和调试，这是综合考虑下来 成本最低 的方案。

🧐为什么?

因为 uni-app x 开发原生 app 是有一些限制的，

1. 比如文字必须包括在 <text> 标签中，文字的样式(比如 text-2xl text-center text-red-400) 也必须设置在这个元素上，设置在 <view> 上是没有效果的。而 Web 和 小程序 都是兼容的。

2. 还有很多 css 的样式，目前 uni-app x 暂时是不兼容的，强行使用 Hbuilderx 的控制台会爆出警告，要求你进行更改。

这就相当于，你写的代码，能够满足了 安卓 这一端，那就大概率能满足 小程序 端，甚至 Web 端了(当然实战中还需要很多条件编译处理)

🧐为什么不是 IOS 或者鸿蒙?

IOS 模拟器，需要你有 Mac 才能运行，IOS 调试需要你有苹果手机，考虑到大部分开发应该都是用的 Windows 机器，所以选择 Android 模拟器开发，相对成本低一些，你都有的话当我没说

至于鸿蒙，uni-app x 官方文档上都写着:

鸿蒙整体处于发展初期，能用，有坑，大部分坑有规避方案。但开发者应建议其领导、客户、质量部门降低期望，不能严格比照Android和iOS的验收标准要求鸿蒙。

不如安卓/IOS 稳定的话，自然优先选择安卓平台

常见问题

Vscode uvue/uts 代码染色

安装 DCloud 自己推出的 uni-app x语言服务, 插件市场一搜 uni-app x 就搜到了

• ID: dcloud-ide.hbuilderx-language-services
• 说明: 支持uni-app x项目的代码提示、悬浮、转到定义、查找引用、大纲、校验等
• 发布者: DCloud
• VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=dcloud-ide.hbuilderx-language-services

Tailwindcss 智能提示

目前 Tailwindcss 智能提示最好的还是 vscode，但是 vscode Tailwindcss 肯定是不认识 uvue/uts 文件的，

要让插件认识，只需要在你的项目中添加 .vscode/settings.json 文件

{
    "tailwindCSS.includeLanguages": {
        "uvue": "html",
        "uts": "javascript"
    }
}

当然，你直接全局修改你的 vscode Tailwindcss 插件配置肯定也是可以的。

配置好的模板

https://github.com/icebreaker-template/uni-app-x-hbuilderx

使用方式见这个项目中的 README.md