前言

滴滴刚刚开源了一个叫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

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴！

優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。