星河（Dimina）_滴出行开源了自主研发的全新轻量级跨端小程序框架

Web前端开发网

fly63.com

首页资源工具文章教程栏目

星河（Dimina）

网站地址:https://didi.github.io/dimina

GitHub:https://github.com/didi/dimina

网站描述:滴出行开源了自主研发的全新轻量级跨端小程序框架

访问官网 GitHub

星河小程序（以下简称 Dimina）是滴滴自研的一套轻量级跨端小程序框架，可以理解为开源版的小程序方案，致力于为开发者提供高性能、跨平台、低门槛的开发体验。

目前，Dimina 已支持 Android、iOS、Harmony 和 Web 四大平台。开发者可以将 Dimina 作为移动端跨平台开发框架，将已有小程序逻辑以独立模块方式集成到现有 App，或直接采用小程序语法进行开发，并一键打包生成独立原生 App。

技术特性

资源离线化: 资源本地存储减少网络请求
逻辑视图分离: 独立 JS 引擎避免主线程阻塞
原生能力封装: 统一 api 调用原生功能
页面预加载: WebView 预热提升性能

跨平台支持

Android: QuickJS + Android WebView
iOS: JavaScriptCore + WKWebView
Harmony: QuickJS + Harmony WebView
Web: Web Worker + Browser

核心特性

Dimina提供了完整的基础开发生态，包括：

全面的API能力：超过60个API，覆盖网络、文件、设备、媒体、位置等8大类核心功能
丰富的组件库：25+个常用组件，包括基础视图、表单、导航、媒体等组件
一致的跨端体验：在不同平台上保持统一的用户界面和交互体验

技术架构设计

vue 3驱动的核心引擎

Dimina的技术架构巧妙地结合了Vue 3引擎与小程序语法：

// 示例：Dimina中的页面结构
// pages/index/index.dm
<template>
  <view>
    <text>{{ title }}</text>
    <button @tap="handleTap">点击按钮</button>
    <scroll-view scroll-y>
      <view v-for="item in list" :key="item.id">
        {{ item.name }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '欢迎使用Dimina',
      list: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ]
    }
  },
  methods: {
    handleTap() {
      this.title = '按钮已点击'
      // 调用Dimina API
      dimina.showToast({
        title: '操作成功'
      })
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}
.title {
  font-size: 36rpx;
  color: #333;
}
</style>

DMCC编译器技术

Dimina框架通过DMCC编译器将小程序语法转译为Vue语法：

语法转换：将小程序的WXML/JS语法转换为Vue组件语法
组件体系：基于Vue实现完整的小程序标准组件体系
代码优化：在编译阶段进行代码优化和体积压缩

分层隔离设计

框架采用分层架构，将业务逻辑与视图渲染分离：

// 逻辑层
// logic.js
export default {
  data: {
    userInfo: null
  },
  
  onLoad() {
    this.loadUserInfo()
  },
  
  async loadUserInfo() {
    try {
      const userInfo = await dimina.request({
        url: '/api/user/info'
      })
      this.setData({ userInfo })
    } catch (error) {
      console.error('获取用户信息失败:', error)
    }
  }
}

// 视图层通过数据绑定自动更新

跨平台实现机制

多端运行时容器

Dimina为不同平台提供了专门的运行时环境：

平台	JavaScript引擎	渲染引擎	特性
Android	QuickJS	Android WebView	轻量级JS引擎，快速启动
iOS	JavaScriptCore	WKWebView	系统级优化，高性能
Harmony	QuickJS	Harmony WebView	鸿蒙原生集成
Web	Web Worker	Browser	现代浏览器特性支持

性能优化策略

Dimina通过多种技术手段优化性能：

// 资源离线化示例
// 在构建时预加载关键资源
dimina.preload({
  urls: [
    '/common/styles/global.css',
    '/common/scripts/utils.js'
  ]
})

// 页面预加载
// app.dm
export default {
  onLaunch() {
    // 预加载首页资源
    this.preloadPages(['pages/index/index'])
  },
  
  preloadPages(pagePaths) {
    pagePaths.forEach(path => {
      dimina.preloadPage({
        url: path,
        success: () => {
          console.log(`预加载页面成功: ${path}`)
        }
      })
    })
  }
}

开发体验

低门槛入门

Dimina提供了友好的开发体验：

// 简单的页面开发
// pages/demo/demo.dm
<template>
  <view>
    <map 
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      @regionchange="onRegionChange"
    />
    <button type="primary" @tap="getLocation">
      获取当前位置
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.9042,
      longitude: 116.4074,
      markers: [{
        id: 1,
        latitude: 39.9042,
        longitude: 116.4074,
        title: '北京'
      }]
    }
  },
  
  methods: {
    async getLocation() {
      try {
        const location = await dimina.getLocation({
          type: 'gcj02'
        })
        this.latitude = location.latitude
        this.longitude = location.longitude
        
        dimina.showToast({
          title: '定位成功'
        })
      } catch (error) {
        dimina.showModal({
          title: '提示',
          content: '获取位置失败，请检查权限设置'
        })
      }
    },
    
    onRegionChange(e) {
      console.log('地图区域变化:', e)
    }
  }
}
</script>

丰富的API支持

Dimina提供了覆盖全面的API体系：

// 网络请求
const result = await dimina.request({
  url: 'https://api.example.com/data',
  method: 'POST',
  data: { key: 'value' },
  header: {
    'Content-Type': 'application/json'
  }
})

// 文件操作
const fileInfo = await dimina.chooseImage({
  count: 1,
  sizeType: ['compressed']
})

// 设备信息
const systemInfo = dimina.getSystemInfoSync()
console.log('设备型号:', systemInfo.model)

// 数据存储
dimina.setStorage({
  key: 'user_token',
  data: 'xxxxx'
})

集成方案

现有App集成

开发者可以将Dimina作为模块集成到现有应用中：

// Android集成示例
public class MainActivity extends AppCompatActivity {
    private DiminaContainer diminaContainer;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        diminaContainer = new DiminaContainer(this);
        setContentView(diminaContainer.getView());
        
        // 启动小程序
        DiminaConfig config = new DiminaConfig.Builder()
            .appId("your_app_id")
            .appPath("/path/to/miniapp")
            .build();
            
        diminaContainer.startApp(config);
    }
}

独立应用开发

也可以直接使用Dimina进行全新应用开发：

// app.dm - 应用入口文件
export default {
  onLaunch(options) {
    console.log('应用启动:', options)
    this.initApp()
  },
  
  onShow() {
    console.log('应用显示')
  },
  
  async initApp() {
    // 初始化应用数据
    await this.checkUpdate()
    await this.initUserSession()
  },
  
  async checkUpdate() {
    const updateManager = dimina.getUpdateManager()
    
    updateManager.onCheckForUpdate((res) => {
      if (res.hasUpdate) {
        dimina.showModal({
          title: '更新提示',
          content: '发现新版本，是否立即更新？',
          success: (res) => {
            if (res.confirm) {
              updateManager.applyUpdate()
            }
          }
        })
      }
    })
  }
}

构建和部署

开发构建流程

# 安装Dimina CLI
npm install -g @dimina/cli

# 创建新项目
dimina create my-project

# 进入项目目录
cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 平台特定构建
npm run build:android
npm run build:ios
npm run build:harmony
npm run build:web

持续集成

Dimina支持现代化的CI/CD流程：

# .github/workflows/build.yml
name: Build Dimina App

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'
        
    - name: Install dependencies
      run: npm install
      
    - name: Build for all platforms
      run: |
        npm run build:android
        npm run build:ios
        npm run build:web
        
    - name: Upload artifacts
      uses: actions/upload-artifact@v2
      with:
        name: dimina-builds
        path: |
          dist/android/
          dist/ios/
          dist/web/

总结

滴滴星河框架（Dimina）通过创新的技术架构和完整的开发生态，为跨端小程序开发提供了全新的解决方案。其核心优势包括：

真正的跨端支持：一套代码多端运行，显著降低开发成本
高性能体验：通过资源离线化、预加载等技术优化性能
完善的开发工具：提供完整的开发、调试、构建工具链
渐进式集成：支持独立开发或现有应用集成

对于需要快速覆盖多端平台的开发团队来说，Dimina提供了一个值得考虑的现代化解决方案。

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/4793

more>>