duxapp：基於Taro使用模組化開發，提升開發效率

少恭写代码發表於2024-09-23
UXAPP

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這個依賴，透過每個模組都去查詢，我們最終整理出這樣的依賴關係圖

dependencies

那麼最終當我們使用下面的命令編譯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

相關文章