前言
滴滴刚刚开源了一个叫Dimina（星河）的跨端小程序框架，基于Vue3和小程序语法，可以一套代码跑在Android、iOS、鸿蒙和Web上，还自带25+组件和60+API。今日前端早读课文章由@林振培分享，公号：滴滴技术授权。
正文从这开始~~
自2017年微信小程序横空出世，至今已历经八年多的发展历程。各家大厂纷纷构建了自己的小程序框架，然而，市面上始终缺乏一套成熟且完善的开源小程序解决方案。
如今，滴滴正式开源其核心小程序框架——Dimina (星河小程序)！作为滴滴内部多年实践和沉淀的成果，Dimina星河小程序是滴滴自研的一套轻量级跨端小程序框架，致力于为开发者提供高性能、跨平台、低门槛的开发体验。
【第3508期】FunProxy - 使用 Rust 构建跨平台全链路测试抓包代理工具
以往小程序框架大多依附于App内部，如今Dimina的出现为跨端框架带来了新的选择。它将成为继React Native（RN）、Flutter之后另一套跨端框架的选择，对于小程序的开发者来说，“我只需编写一套小程序代码，就能让它在Android、iOS、Harmony以及Web平台上运行！”这无疑是当下大前端开发领域的潮流趋势。
一个关于“偷懒”的技术故事
传统的开发模式中，常常面临这样的困境：为不同平台开发应用，需要四套代码，组建四个团队，四倍的工作量，这种重复劳动不仅耗时耗力，更是对开发难度和效率的挑战。但我们说，“不，我们有更优雅的解决方案”，于是，星河小程序（以下简称：Dimina）应运而生！
Dimina究竟是什么？简单来说，就是让小程序突破传统束缚，开发者可以将 Dimina 作为移动端跨平台开发框架，将已有小程序逻辑以独立模块方式集成到现有 App，或直接采用小程序语法进行开发，并一键打包生成独立原生 App，这套轻量级跨端小程序解决方案，可极大程度地简化的开发流程。
模块化技术架构，像搭积木一样优雅
核心理念：Vue3+小程序语法的完美结合
底层渲染框架：Vue3（因为Vue3和小程序语法相似度极高，简直是“失散多年的孪生兄弟”）
【第3123期】原来 TinyVue 组件库跨框架（vue2、vue3、react、solid）是这样实现的？
语法转译器：DMCC编译器（把小程序语法无缝转换为Vue语法）
原生容器：各平台的小程序运行时容器
编译流程：化繁为简的艺术
DMCC编译器的工作方式简单且高效：
输入文件 输出文件
app.js, index.js → logic.js #(逻辑文件)
index.wxml → view.js #(视图文件)
app.wxss, index.wxss → style.css #(样式文件)
app.json, index.json → config.json #(配置文件)
这就像是一个“翻译官”，把小程序的“方言”翻译成各个平台都能理解的“普通话”。
项目结构：整洁有序的代码组织
your-miniprogram/
├── app.js # 应用逻辑
├── app.json # 应用配置
├── app.wxss # 全局样式
├── pages/ # 页面目录
│ └── index/
│ ├── index.js # 页面逻辑
│ ├── index.wxml # 页面结构
│ ├── index.wxss # 页面样式
│ └── index.json # 页面配置
└── components/ # 组件目录
编译后的产物结构清晰明了：
dist/
└── {appId}/
├── logic.js
├── view.js
├── style.css
└── config.json
组件生态：应有尽有的工具箱
目前Dimina已支持25+常用组件，覆盖了日常开发的方方面面：
基础组件：view、text、button、image...
表单组件：input、checkbox、radio、picker...
导航组件：navigator、navigation-bar...
媒体组件：swiper、scroll-view、rich-text...
API能力：功能强大的瑞士军刀
Dimina提供了60+API，涵盖8大类功能，满足了多样化的开发需求：
上手使用，从0到1的开发体验
我们为开发者们绘制了一份接入星河的基本流程图，按照图示说明即可轻松使用星河框架开发日常业务功能。
实战案例，Dimina在实战项目中的表现
在线体验地址：https://didi.github.io/dimina/
完整的小程序组件展示 流畅的用户交互体验 实时的状态更新和路由跳转
Rome wasn't built in a day
Dimina 遵循小程序标准化白皮书进行设计，目前已对齐微信小程序的主要功能。得益于 Vue3 与小程序语法的高度相似，Dimina 底层视图渲染框架选择基于 Vue 构建。
Dimina 框架通过DMCC将小程序语法转译为 Vue 语法，并在此基础上实现了完整的小程序标准 Vue 组件体系。最终，通过实现端侧小程序容器来提供原生能力，同时灵活加载并展示视图页面。
【第3182期】在微信小程序里运行完整的 Flutter，怎么做到的？
未来，Dimina 还将进一步提升API/组件/特性组件能力。感谢大家关注 Dimina，道阻且长，行则将至，诚邀大家一同参与共建！
在移动互联网碎片化愈发严重的今天，Dimina代表的不仅仅是一个技术框架，更是一种理念：用技术连接不同平台，用标准统一开发体验。如果你也相信“一套代码走天下”的美好愿景，那请⭐Star & Fork我们 ！每一个伟大的框架都是从第一行代码开始的，而Dimina的故事，正等待着你来续写！
项目地址：https://github.com/didi/dimina
在线演示：https://didi.github.io/dimina/
关于本文
作者：@林振培
原文：https://mp.weixin.qq.com/s/TMHLwmZZEhDJfNbIKtLIHA
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
