钉钉小程序开发的技术选型

作为一名专注于前端技术发展的技术博主，今天我将分享一下在进行钉钉小程序开发时关于技术选型的一些思考和经验。本文旨在探讨uni-app、Taro等跨平台框架与原生开发框架之间的优缺点，并最终推荐一个我认为最适合当前需求的技术栈组合。

着急想知道答案的可以直接滑到最后看小编觉得好的解决方案吧！

多端开发框架 vs 原生开发框架

uni-app

uni-app是一个基于Vue.js的跨平台开发框架，它允许开发者通过编写一套代码即可发布到多个平台，包括但不限于微信、支付宝、钉钉等。其主要优势在于：

• 高效性：通过统一的API和组件库简化了不同平台间的差异。
• 社区支持：拥有活跃的开发者社区，提供丰富的插件和资源。
• 快速迭代：对于需要频繁更新的应用来说，uni-app提供了便捷的热更新机制。

然而，它的缺点也不可忽视，比如在性能上可能不如原生应用流畅，尤其是在处理复杂的交互逻辑或动画效果时，而且uniapp的坑比较多，但是为了开发效率总要有取舍。

Taro

Taro是由京东凹凸实验室推出的一个跨平台解决方案，支持使用React语法来开发微信、支付宝、钉钉等多个平台的小程序。它的优点包括：

• 灵活性：支持多种JSX语法，适合已有React项目迁移。
• 强大的插件系统：便于定制化开发和扩展功能。

但是，Taro的学习曲线相对较高，且对于一些特定场景下的优化可能不够到位。

原生开发框架

直接采用钉钉提供的原生小程序开发工具链，可以充分利用平台特性，获得最佳的性能表现。同时，结合Ant Design Mini这样的UI组件库，能够快速构建出符合企业级标准的应用界面。这种方式的优点是：

• 性能优越：由于直接调用底层接口，响应速度更快。
• 深度集成：能更好地利用钉钉提供的高级功能和服务。

但缺点也很明显，即需要针对每个平台单独维护代码，增加了开发成本和复杂度。

具体场景具体分析

作为一个追求效率与质量并重的开发者，我希望找到一个既能保证开发效率又能提供良好用户体验的技术方案。因此，在尝试了几种不同的组合之后，我发现uni-app + Vite + Vue3 + TypeScript + Ant Design Mini是最能满足我需求的解决方案。

在寻找理想的技术栈过程中，我也试用了uni-best（uni-app的一个增强版）和tora + tora ui这两个较为新颖的方案。虽然它们各自有其独特之处，但在实际操作中，我发现这些方案要么缺乏足够的社区支持，要么在某些方面未能达到我的预期效果。

我的最终选择

uni-app + Vite + Vue3 + TypeScript + Ant Design Mini

我们的定位是钉钉企业内部应用开发，主要注重效率；这个组合之所以脱颖而出，是因为它结合了以下几大优势：

• 开发体验：Vite加速了构建过程，Vue3的新特性和TypeScript带来的类型安全极大地提升了编码体验。
• 性能表现：尽管是基于跨平台框架，但由于采用了最新的前端技术，其性能表现非常接近原生水平。
• UI一致性：Ant Design Mini不仅美观大方，而且严格遵循了蚂蚁集团的设计规范，确保了视觉的一致性和专业性。

我将uniapp模板融入了ant-design-mini，感兴趣的可以直接使用

项目地址：GitCode - 全球开发者的开源社区,开源代码托管平台

项目初始化

克隆项目

git clone https://gitcode.com/gmstudio/uni-vue3-ts-template.git
cd uni-vue3-ts-template

安装依赖

# 安装主项目依赖（推荐使用 pnpm）
pnpm install

# 安装钉钉小程序专用组件依赖
cd src/mycomponents
npm install

⚠️ 注意：mycomponents 目录下的依赖必须使用 npm 安装，否则可能无法被钉钉 IDE 正确识别。

运行与构建项目

你可以通过 package.json 中定义的脚本命令来运行或构建项目。常见命令如下：

开发模式（Dev）

pnpm run dev:平台

例如运行钉钉平台：

pnpm run dev:mp-alipay

构建生产包（Build）

pnpm run build:平台

例如构建钉钉平台：

pnpm run build:mp-alipay

提示：具体支持的平台请查看 package.json 中的 scripts 部分，通常包括 dd（钉钉）、mp-weixin（微信）等。

后续改动我们会发布到代码仓库。