duxapp：基於Taro使用模塊化開發，提升開發效率详情 - 前端,taro,react-native,react,模塊化 ShaoGongBra 日志

duxapp是基於Taro二次開發的模塊化框架

使用這個框架，結合框架提供的UI庫和工具庫，能幫助你快速且高質量的完成項目，且能實現同時開發小程序、H5、APP（React Native），並且保證各個端的一致性

duxapp還針對APP開發（React Native）做了大量優化，大大降低了APP發開的難度，你可以閲讀React Native教程，瞭解詳情

下面讓我來詳細介紹如何使用duxapp

何為模塊化

什麼是模塊化？就像npm包一樣，我們可以將一些通用的功能或頁面編寫在一個模塊內，提供給多個項目來使用，以提高代碼的複用性。

模塊的概念在很多後端框架中很常見，它們可以在應用商店通過安裝應用的方式來獲得新功能，在前端框架中確很少見到類似的設計方案，當然你其實也可以理解為發佈到npm就是一種模塊化的設計，但是在Taro中很多功能他並不能發佈到npm中，例如頁面。頁面需要放在項目中，當發佈到npm之後就會無法使用

在duxapp框架中的模塊化設計原理，和npm的依賴關係是類似的，每個模塊有一個配置文件app.json，裏面的依賴字段dependencies，用來填寫我要用到的依賴，就像下面ui庫示例這個模塊的配置

{
  "name": "duxuiExample",
  "description": "ui庫示例",
  "version": "1.0.13",
  "dependencies": [
    "duxui",
    "duxcms",
    "amap",
    "echarts",
    "wechat"
  ]
}

和npm依賴不一樣的是，這裏的依賴不包含版本信息。因為頁面等限制條件，你一個項目中，同一個模塊無法存在兩個不同的版本，因此並未設計指定版本號的功能

依賴關係是逐層查找的，就像npm一樣，例如這裏依賴的duxui模塊，他的模塊配置文件是這樣的

{
  "name": "duxui",
  "description": "DUXUI庫",
  "version": "1.0.42",
  "dependencies": [
    "duxapp"
  ],
  "npm": {
    "dependencies": {
      "b-validate": "^1.5.3",
      "react-native-view-shot": "~3.8.0",
      "react-native-fast-shadow": "~0.1.1",
      "array-tree-filter": "^2.1.0"
    }
  }
}

在duxui模塊中他又使用了duxapp這個依賴，通過每個模塊都去查找，我們最終整理出這樣的依賴關係圖

模塊依賴關係

那麼最終當我們使用下面的命令編譯duxuiExample模塊的時候

# 調試小程序
yarn dev:weapp --app=duxuiExample
# 調試h5
yarn dev:h5 --app=duxuiExample

實際被編譯的模塊就包含下面這些

duxuiExample
duxcms
amap
echarts
wechat
duxui
duxappReactNative
duxapp

使用duxapp

上面介紹了模塊化的原理，現在我們來看看，具體要怎麼使用這個框架

首先使用cli命令創建一個項目，中途會要求你選擇模板，你可以選擇 duxui 示例代碼(包含所有組件的示例代碼支持RN端) 這個選項，和上面使用的示例一樣

npx duxapp-cli create projectName

在使用這個命令之前，確保安裝了以下工具和環境

nodejs 20+
git命令行工具
yarn
使用命令 npm i yarn -g 安裝

安裝後會自動安裝項目依賴

進入項目目錄projectName，使用上面提到的命令 yarn dev:weapp --app=duxuiExample 或者 yarn dev:h5 --app=duxuiExample 編譯為小程序或者H5，使用開發者工具或者瀏覽器就能預覽

可以看到編譯命令是在Taro原有的命令基礎上增加了 --app= 參數，參數用來指定一個模塊，通常你都需要指定這個參數，因為你的項目中除了上面提到的模塊之外，大多是時候還會存在其他模塊，如果你不指定的話，他會把所有模塊都打包進去

通過上面的描述可以看出，其實在一個項目中不是真的只有一個項目，在我的實際開發經驗中，我是將很多項目放在一起開發的，我只需要通過 --app= 參數指定我的項目入口文件進行編譯，他就是不同的項目

多個項目同時存在，如何保持他們不混亂呢，例如第三方npm依賴，每個項目可能都有不同的npm依賴，這通過下面的章節來介紹

模塊

在duxapp框架中，src目錄下每個文件夾將被識別為一個模塊，模塊一般是像下面這樣設計結構的

├── duxapp                      模塊名稱
│   ├── components              模塊組件庫 
│   │   ├── ComponentName       組件
│   │   │   └── index.jsx
│   │   └── index.js            導出需要導出的組件
│   ├── config                  配置目錄 
│   │   ├── route.js            路由配置文件（路徑固定）
│   │   ├── theme.js            主題配置文件（路徑固定）
│   │   └── themeToScss.js      主題轉換函數（路徑固定）
│   ├── pages                   頁面放置文件夾
│   │   └── index               頁面文件夾
│   │       ├── index.jsx       頁面
│   │       └── index.scss
│   ├── utils                   工具庫
│   │   ├── index.js            導出工具庫
│   │   └── ...you util.js
│   ├── update                  模塊安裝目錄
│   │   ├── copy                需要複製到項目的文件（路徑固定）
│   │   │   └── ...             
│   │   └── index.js            安裝腳本 主要針對RN端 插件安裝方法（路徑固定）
│   ├── app.js                  模塊入口文件
│   ├── app.json                模塊配置文件 包括名稱 依賴等（必須）
│   ├── app.scss                全局樣式文件（次樣式文件無需導入到js文件中，會自動注入全局）
│   ├── changelog.md            更新日誌（必須 如果發佈）
│   ├── index.js                模塊出口文件 可以導出組件和方法給其他模塊使用
│   ├── index.html              如果是h5的項目可以自定義index.html，僅當作為入口模塊時可用
│   ├── app.config.js           用於覆蓋項目全局配置
│   ├── babel.config.js         babel配置文件
│   ├── metro.config.js         metro配置文件
│   ├── taro.config.js          Taro編譯配置文件
│   ├── taro.config.prod.js     Taro 發佈配置文件
│   ├── taro.config.dev.js      Taro 調試配置文件
│   └── readme.md               自述文件（必須 如果發佈）

關於模塊目錄的詳細內容查看這個模塊結構獲取

模塊配置

在duxui這個模塊中，它的配置文件是這樣的

{
  "name": "duxui",
  "description": "DUXUI庫",
  "version": "1.0.42",
  "dependencies": [
    "duxapp"
  ],
  "npm": {
    "dependencies": {
      "b-validate": "^1.5.3",
      "react-native-view-shot": "~3.8.0",
      "react-native-fast-shadow": "~0.1.1",
      "array-tree-filter": "^2.1.0"
    }
  }
}

我們看到，他有一個字段 npm，它的內容和項目的 package.json 的配置是完全一樣的，在模塊中編寫這個內容，將會和項目的 package.json 進行覆蓋合併，那麼你就可以通過模塊來安裝當前模塊需要依賴了，每個模塊中都可以指定這個依賴，他們會合並在一起

當你指定了不同的 --app= 入口模塊之後，框架會根據你使用到的模塊中的第三方依賴自動重新安裝

在模塊中還有很多類似的設計，用來編寫配置或者文件，包括下面這些

app.scss 編寫全局樣式
index.html 如果是h5的項目可以自定義index.html，僅當作為入口模塊時可用
app.config.js 用於覆蓋項目全局配置
babel.config.js babel配置文件
metro.config.js metro配置文件
taro.config.js Taro編譯配置文件

模塊路由

每個模塊中都可以編寫頁面，當然這不是必選項，這些頁面會被定義在自己的模塊中

通過 modeName/config/route.js 定義當前的模塊路由，例如 duxuiExample 的路由定義如下

/**
 * login:是否需要登錄
 * platform:支持的平台(weapp, h5, rn)不配置支持所有
 * subPackage:是否將其設置為分包
 * home: 是否是主頁 是主頁的頁面將會被排在前面
 */
const config = {
  pages: {
    'duxuiExample/index': {
      pages: {
        index: {
          home: true
        }
      }
    },
    'duxuiExample/example': {
      pages: {
        Button: {},
        Cell: {},
        Grid: {},
        Divider: {},
        Space: {},
        // 更多未展示
      }
    }
  }
}

module.exports = config

路由的定義也是經過封裝的，配置的時候是將一個文件夾作為一個對象來處理，這樣我們能很方便的將某個文件夾進行分包等操作

使用UI庫和全局樣式編寫頁面

在基礎模塊 duxapp 中提供了可以用於快速佈局頁面的全局樣式，他就和 tailwindcss 類似，在結合UI組件，編寫頁面像下面這樣的，可以看到我們不需要編寫 scss 文件就能完成頁面的編寫

import { Avatar, Card, ScrollView, Column, Divider, Header, Text, TopView, Row, px, Image, nav, Tag } from '@/duxui'
import { useRequest, CmsIcon, saleHook, Qrcode } from '@/duxcmsSale'
import { setClipboardData } from '@tarojs/taro'

export default function Sale() {

  const [{ info = {}, day = {}, money, total = {} }] = useRequest('sale/index')

  return <TopView>
    <Header absolute title='推廣中心' color='#FFFFFF' style={{ backgroundColor: 'transparent' }} />
    <Image style={{ height: px(396) }} className='w-full absolute' src={require('./images/tui_bag.png')} />
    <Row justify='between' items='center' style={{ marginTop: px(208) }} className='mt-3 ph-3'>
      <Row items='center' justify='start'>
        <Avatar url={info.avatar}>{info.nickname}</Avatar>
        <Column className='mh-3'>
          <Row items='center' className='gap-2'>
            <Text size={33} bold color='#FFFFFF' >{info.nickname}</Text>
            {!!info.level_name && <Tag type='primary' size='s'>{info.level_name}</Tag>}
          </Row>
          <Row className='mt-2'>
            <Text color='#FFFFFF' size={1}>邀請碼：{info.code}</Text>
            <CmsIcon className='mh-2' size={36} name='copy' color='#FFFFFF' onClick={() => setClipboardData({ data: info.code })} />
          </Row>
        </Column>
      </Row>
      <CmsIcon size={60} name='QRcode1' color='#FFFFFF' onClick={Qrcode.show} />
    </Row>
    <ScrollView className='mt-3'>
      <Card margin disableMarginTop>
        <Row jtems='center' justify='between' className='gap-3'>
          <Column justify='center' items='center' grow >
            <Text bold type='primary'>{total.order_num || 0}</Text>
            <Text color={2} size={2} className='mt-2'>直推訂單</Text>
          </Column>
          <Column justify='center' items='center' grow>
            <Text bold type='primary'>{total.user_num || 0}</Text>
            <Text color={2} size={2} className='mt-2'>直推客户</Text>
          </Column>
        </Row>
        <Row className='mt-2' jtems='center' justify='between'>
          <Column justify='center' items='center' grow>
            <Text bold type='primary'>{total.month_sale_money || 0}</Text>
            <Text color={2} size={2} className='mt-2'>本月收益</Text>
          </Column>
          <Column justify='center' items='center' grow>
            <Text bold type='primary'>{total.sale_money || 0}</Text>
            <Text color={2} size={2} className='mt-2'>累計收益</Text>
          </Column>
        </Row>
      </Card>
      <Card shadow margin disableMarginTop onClick={() => nav('duxcmsAccount/cash/index')}>
        <Row items='center' justify='between'>
          <Text bold>佣金管理</Text>
          <CmsIcon name='direction_right' size={32} />
        </Row>
        <Row className='mt-3' items='baseline'>
          <Text size={2}>可提現佣金:</Text>
          <Text className='mh-3' bold size={50}>{money || 0}</Text>
        </Row>
      </Card>
      <Card margin disableMarginTop>
        <Row items='center' justify='around'>
          <Column items='center'>
            <Text size={2}>今日預估收益</Text>
            <Text className='mt-1' bold size={40} >{day.sale_money || 0}</Text>
          </Column>
          <Column items='center'>
            <Text size={2}>今日有效訂單</Text>
            <Text className='mt-1' bold size={40} >{day.order_num || 0}</Text>
          </Column>
          <Column items='center'>
            <Text size={2}>今日新增客户</Text>
            <Text className='mt-1' bold size={40} >{day.user_num || 0}</Text>
          </Column>
        </Row>
      </Card>

      <Card margin className='gap-4'>
        <Text size={4} bold>其他操作</Text>
        <Row justify='between' items='center' onClick={() => nav('duxcmsSale/index/order')}>
          <Text size={2} className='mh-2' bold>推廣訂單</Text>
          <CmsIcon name='direction_right' size={32} />
        </Row>
        <Row justify='between' items='center' onClick={() => nav('duxcmsSale/index/customer')} >
          <Text size={2} className='mh-2' bold>我的客户</Text>
          <CmsIcon name='direction_right' size={32} />
        </Row>
        <saleHook.Render mark='index.menus' />
      </Card>
      <Row style={{ height: px(16) }}></Row>
    </ScrollView >
  </TopView>
}

為何獲得更好的編輯體驗，需要在vscode中安裝 SCSS Everywhere 插件，他能識別到全局樣式並給出編寫提示

用户配置

很多模塊都是通用的，那麼一些需要根據不同項目變化的內容，就不能寫在模塊中，而是要通過配置的形式來配置

項目配置放在項目根目錄下的 configs 目錄中，其中每個文件夾就是一個配置，文件中的index.js就是項目配置

像下面這個duxuiExample的配置，其中option中的每一項就是對應模塊的配置

// import qiniu from './base/components/UploadFileManage/drive/qiniu'

const config = {
  // 覆蓋app.config.js 配置
  appConfig: {
    requiredPrivateInfos: [
      'chooseLocation',
      'getLocation',
      'onLocationChange',
      'startLocationUpdateBackground',
      'chooseAddress'
    ]
  },
  // 調試配置
  debug: {
    // 在h5端開啓vconsole調試功能
    vconsole: false
  },
  // 模塊配置 將會調用模塊生命週期的option，將對應模塊的參數傳入
  option: {
    // 基礎模塊
    duxapp: {
      theme: {
        primaryColor: '#E70012',
        secondaryColor: '#E84C00',
        successColor: '#34a853',
        warningColor: '#fbbc05',
        dangerColor: '#ea4335',
        pageColor: '#F7F9FC',

        textColor1: '#373D52',
        textColor2: '#73778E',
        textColor3: '#A1A6B6',
        textColor4: '#FFF',
        header: {
          color: '#fff', // 僅支持rgb hex值，請勿使用純單詞 設置為數組將顯示一個漸變按鈕
          textColor: '#000', // 文本顏色
          showWechat: false, // 微信公眾號是否顯示header
          showWap: true, // h5是否顯示header
        }
      }
    },
    codepush: {
      androidKey: '',
      iosKey: '',
    },
    wechat: {
      // 分享組件配置
      share: {
        open: true,
        // 開啓未定義的頁面分享
        pageSlef: {
          // 包含這些頁面分享自身 頁面路徑關鍵詞匹配 include 優先級比 exclude 高，
          // 可以配置exclude為空數組表示支持所有頁面
          // pageSlef優先級高於pageHome
          // include: ['page/test'],
          // 排除這些頁面 不進行分享
          exclude: []
        },
        // 開啓未定義的頁面分享到指定頁面
        pageHome: {
          path: '',
          params: {},
          // 包含這些頁面分享自身 頁面路徑關鍵詞匹配
          // include: [],
          // 排除這些頁面 不進行分享
          // exclude: []
        },
        // 公共分享參數
        common: {
          title: 'DUXUI',
          desc: '同時兼容小程序、H5、RN',
          image: 'https://img.zhenxinhuixuan.com/weiwait/cropper/2lVCofRIu6Jl3jNebxCA6VkEMUeaobvLWFYMTiaG.jpg'
        },
        platform: {
          app: {
            // 配置分享到小程序的原始id 同時相當於開關
            weappUserName: '',
            // 配置分享到h5的url 同時相當於開關
            h5Url: 'https://duxui.cn',
          }
        }
      }
    },
    // 新php模塊化系統
    duxcms: {
      request: {
        origin: 'https://mock.dux.plus',
        path: 'api', // 域名二級目錄
        secretId: '53368068',
        secretKey: '6c278fbf1791fbed3ae79197de03f65f',
        devOpen: false,
        devToken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJtZW1iZXIiLCJpYXQiOjE2ODc5Mzg3NDEsImV4cCI6MTY5MDUzMDc0MSwiaWQiOjZ9.kCb82Y3bgUJWUo_WYsUPO1cLYzF1OJdEWTKAj9iNlF0'
      },
      // 登錄相關配置
      loginConfig: {
        // 手機號登錄
        phone: true,
        // 郵箱登錄
        email: false,
        // app微信登錄
        appWatch: true,
        // 小程序微信登錄
        weappWatch: true,
        // 名稱
        appName: 'duxui'
      }
    }
  }
}

export default config

後端框架

在我開發的項目中，後端框架是我的合夥人負責的，後端同樣也是採用模塊化的開發模式完成的，duxapp框架對後端框架已經打好了對接的基礎，如果你考慮進一步提升後端的開發效率，可以考慮使用

後端開發文檔：https://www.dux.cn/

總結

這一篇文章已經很長了，duxapp框架中還有很多內容，無法在這裏一一介紹，像下面這些

模塊主題
模塊安裝與發佈
快速開發APP(React Native)
請求上傳
路由系統
開放模塊(用户管理、微信、支付寶、頁面設計器等)
等等

請前往開發文檔查看詳細教程

開發文檔：http://duxapp.cn/

GitHub：https://github.com/duxapp

ShaoGongBra 日志

@shaogongbra

标签

前端 (1157)

react (167)

harmonyos (71)

ui (38)

模塊化 (27)

react-native (23)

redux (19)

taro (7)

动态

duxapp：基於Taro使用模塊化開發，提升開發效率 - 动态详情

何為模塊化

使用duxapp

模塊

模塊配置

模塊路由

使用UI庫和全局樣式編寫頁面

用户配置

後端框架

總結

Add a new 评论

ShaoGongBra 日志

@shaogongbra

标签

前端 (1157)

react (167)

harmonyos (71)

ui (38)

模塊化 (27)

react-native (23)

redux (19)

taro (7)

动态

duxapp：基於Taro使用模塊化開發，提升開發效率 - 动态 详情

何為模塊化

使用duxapp

模塊

模塊配置

模塊路由

使用UI庫和全局樣式編寫頁面

用户配置

後端框架

總結

Add a new 评论

duxapp：基於Taro使用模塊化開發，提升開發效率 - 动态详情