Duxapp：新一代模块化跨平台移动端开发框架

DuxWeb
237 阅读4分钟

duxui-7708652baa055ffa6122759ff122c205.jpg

框架概述

Duxapp 是一个基于 Taro 深度定制的模块化移动端跨平台开发框架，通过独特的模块化设计理念，实现了真正的"一次编写，到处运行"的开发体验。该框架支持同时开发 React Native APP、鸿蒙应用、微信小程序、H5 网页、支付宝小程序、抖音小程序和 QQ 小程序 等多个平台，极大提升了开发效率和代码复用率。

核心特性

🚀 真正的跨平台支持

  • 全平台兼容：支持 React Native、鸿蒙 ArkUI、微信小程序、H5、支付宝小程序、抖音小程序、QQ 小程序
  • 一致性保障：保证各个端的UI和功能一致性，减少平台差异带来的开发成本
  • RN 深度优化：针对 React Native 端进行了大量优化，包括项目配置化、打包文件自动创建、常用第三方库集成

📦 革新性模块化架构

Duxapp 的模块化设计是其最大的亮点。类似于 npm 包管理，但更适合移动端开发：

{
  "name": "duxuiExample",
  "description": "ui库示例",
  "version": "1.0.13",
  "dependencies": [
    "duxui",
    "duxcms",
    "amap",
    "echarts",
    "wechat"
  ]
}
  • 依赖管理：模块间可以形成依赖关系，自动解析依赖树
  • 代码复用：通用功能可以封装成模块，在多个项目中复用
  • 独立维护：每个模块可以独立开发、测试和发布
  • 按需编译：通过 --app=moduleName 参数指定编译入口，只打包需要的模块

🎨 丰富的 UI 组件库 - DuxUI

DuxUI 是 Duxapp 官方提供的多端兼容 UI 组件库，包含 60+ 个组件：

基础组件

  • TopView（顶层容器）、Header（头部导航）、ScrollView（滚动容器）
  • Text（文本）、Image（图片）、Button（按钮）等

布局组件

  • Column（flex竖向）、Row（flex横向）、Grid（宫格）
  • Space（间距）、Divider（分割线）、Card（卡片）等

导航组件

  • Tab（选项卡）、TabBar（底部导航）、Menu（下拉菜单）
  • Elevator（电梯楼层）、ActionSheet（弹出菜单）等

表单组件

  • Form（表单）、Input（输入框）、Textarea（多行文本）
  • Picker（选择器）、Calendar（日历）、Upload（上传）
  • Radio（单选）、Checkbox（多选）、Switch（开关）等

高级组件

  • NumberKeyboard（数字键盘）、Sign（签名）
  • HorseLanternLottery（跑马灯抽奖）等

🛠️ 强大的工具库生态

路由管理

  • 路由拦截和协议解析
  • 支持传递任何类型参数
  • 返回传参功能
  • 封装返回主页方法

网络请求

  • 请求拦截器（中间件）
  • 自动错误提醒和加载状态
  • 防止过快请求
  • Request Hook 封装
  • Hook 缓存机制

样式系统

  • 类似 TailwindCSS 的全局样式类
  • 主题配置系统
  • SCSS 预处理器支持

快速开始

环境准备

# 安装必要工具
npm i yarn -g

# 创建项目
npx duxapp-cli create projectName

创建过程中可选择不同模板：

  • 基础模板：仅包含基础 duxapp 模块
  • DuxUI 示例：包含所有组件的示例代码，支持 RN 端
  • CMS 商城：单用户商城模块，支持 RN 端
  • 移动端页面编辑器：编辑器示例代码模块

开发调试

# 小程序开发
yarn dev:weapp --app=moduleName

# H5 开发
yarn dev:h5 --app=moduleName

# APP 开发
yarn android --app=moduleName
yarn start --app=moduleName

模块管理

# 添加模块
yarn duxapp app add duxui

# 创建新模块
yarn duxapp app create moduleName

项目配置

Duxapp 通过配置文件系统实现不同项目的个性化设置：

// configs/projectName/index.js
const config = {
  // 模块配置
  option: {
    duxapp: {
      theme: {
        primaryColor: '#E70012',
        secondaryColor: '#E84C00',
        // 更多主题配置...
      }
    },
    wechat: {
      appid: 'your-wechat-appid'
    }
  }
}

React Native 优化

针对 APP 开发，Duxapp 提供了完整的 React Native 解决方案：

简化配置

// duxapp.rn.js
const config = {
  android: {
    appid: 'cn.duxapp.example',
    appName: 'APP名称',
    versionCode: 1,
    versionName: '1.0.0'
  },
  ios: {
    BundleId: 'cn.duxapp.example',
    appName: 'APP名称',
    versionCode: 1,
    versionName: '1.0.0'
  }
}

官方模块支持

  • 微信：登录、分享、支付功能
  • 支付宝：支付功能集成
  • 高德地图：地图服务
  • 推送服务：厂商通道消息推送
  • 热更新：CodePush 集成
  • 云闪付：银联支付

自动化工具

# 生成应用图标
yarn duxapp rn logo --config=projectName

# 生成签名证书
yarn duxapp android keystore --config=projectName

# 打包发布版本
yarn build:android --app=projectName

鸿蒙开发支持

Duxapp 是目前首个支持鸿蒙 ArkUI 的 Taro UI 库：

  • 兼容鸿蒙原生组件
  • 保持与其他平台的一致性
  • 提供鸿蒙专用构建配置

实际应用案例

通过 app.share.dux.plus/ 可以体验基于 Duxapp 开发的实际 APP 项目，涵盖电商、工具、社交等多个领域。

技术优势总结

  1. 开发效率提升：模块化设计实现代码高度复用
  2. 维护成本降低：统一的组件库保证多端一致性
  3. 学习门槛较低：基于熟悉的 React 生态
  4. 生态完整：提供从开发到部署的完整工具链
  5. 社区支持：活跃的开发者社区和官方支持

总结

Duxapp 通过创新的模块化架构和完善的工具链，解决了跨平台移动端开发中的核心痛点。无论是初创团队还是大型企业，都可以通过 Duxapp 快速构建高质量的多端应用，实现真正的"一次开发，处处运行"。

官方链接：

基于 Taro 的模块化、多端、跨平台开发框架 - 让移动端开发更简单、更高效！

avatar
文章
阅读
粉丝