duxapp is a modular framework based on Taro's secondary development.
The use of this framework, combined with the framework provides UI libraries and tool libraries, can help you quickly and high-quality completion of the project, and can realize the simultaneous development of applets, H5, APP (React Native), and to ensure the consistency of the various ends!
duxapp has also done a lot of optimization for APP development (React Native), which greatly reduces the difficulty of APP hair opening, you can read theReact Native TutorialLearn more
Let me explain in more detail how to use duxapp
What is Modularity
What is modularization? Just like npm packages, we can write some common functions or pages in a module and provide it to multiple projects to increase the reusability of the code.
The concept of modules is very common in many back-end frameworks, they can be in the app store by installing the app to get new features, in the front-end frameworks do not see similar design solutions, of course, you can actually understand that the release to npm is a modular design, but in Taro many features he can not be released to npm, such as pages. Pages need to be placed in the project, when published to npm will not be available!
The modular design principle in the duxapp framework is similar to the npm dependencies, with a configuration file for each moduleDependency fields inside thedependencieswhich is used to fill in the dependencies I'm going to use, like the followingExamples of ui librariesConfiguration of this module
{
"name": "duxuiExample",
"description": "uilibrary example",
"version": "1.0.13",
"dependencies": [
"duxui",
"duxcms",
"amap",
"echarts",
"wechat"
]
}
Unlike the npm dependency, the dependency here does not contain version information. Because of page and other constraints, you can't have two different versions of the same module in a project, so the ability to specify a version number is not designed.
Dependencies are looked up layer by layer, just like npm, e.g. here the dependencies of theduxuimodule, his module configuration file looks like this
{
"name": "duxui",
"description": "DUXUIstorehouse",
"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"
}
}
}
In the duxui module he again uses theduxappThis dependency, by going through each module and looking it up, we eventually put together this dependency graph
Then eventually when we compile it using the following commandduxuiExampleWhen the module
# Debugging applets
yarn dev:weapp --app=duxuiExample
# Debugging h5
yarn dev:h5 --app=duxuiExample
The actual module that is compiled contains the following
- duxuiExample
- duxcms
- amap
- echarts
- duxui
- duxappReactNative
- duxapp
Using duxapp
Having introduced the principle of modularity above, let's now look at how, specifically, we are going to use this framework
First create a project using the cli command, halfway through you will be asked to choose a template.duxui sample code (contains sample code of all components support RN side) This option, like the example used above
npx duxapp-cli create projectName
Before using this command, ensure that the following tools and environments are installed
- nodejs 20+
- git command line tools
- yarn
Using Commandsnpm i yarn -gmounting
Project dependencies are automatically installed after installation
Go to the project directoryprojectNameIf you want to use the above mentioned commandsyarn dev:weapp --app=duxuiExample oryarn dev:h5 --app=duxuiExample Compile it as an applet or H5 and preview it using developer tools or a browser
You can see that the compile command is an addition to Taro's original command, the--app= parameter, the parameter is used to specify a module, usually you need to specify this parameter, because your project in addition to the above mentioned modules, most of the time there will be other modules, if you do not specify it, he will pack all the modules into the
As you can see from the above description, it's not really just one project in a project, in my actual development experience, I develop many projects together, and I only need to pass the--app= parameter specifies my project's entry file for compilation, he is a different project
Multiple projects exist at the same time, how do you keep them from getting messed up, for example third party npm dependencies, each project may have different npm dependencies, this is covered through the following sections
module (in software)
In the duxapp framework.srcEach folder in the directory will be recognized as a module, and modules are generally structured like the following
├── duxapp module name
│ ├── components Module Component Library
│ │ ├── ComponentName Component
│ │ │ └──
│ └── Export components to be exported
│ ├── config Configuration directory
│ ├── Routing configuration file (path fixed)
│ │ ├── Theme configuration file (path fixed)
│ └── Theme Conversion Functions (path fixed)
│ ├── Pages folder (path fixed) │ └── Theme conversion functions (path fixed)
│ │ └── index page folder
│ ├── Pages
│ │ └──
│ ├── utils tool library
│ │ ├── Export utils library
│ │ └── ... .you
│ ├── update Module installation directory
│ │ ├── copy Files to be copied to the project (path fixed)
│ │ │ └── ...
│ └── Installation script Mainly for RN side Plugin installation method (path fixed)
│ ├── Module entry file
│ ├── Module configuration file including name, dependency, etc. (required)
│ ├── Global style file (sub-style file need not be imported into js file, it will be injected into global automatically)
│ ├── Update log (required if published)
│ ├── Module export files can export components and methods for other modules to use.
│ ├── Can be customized if the project is h5, only available when used as an entry module
│ ├── Used to override the global configuration of the project.
│ ├── babel configuration file
│ ├── metro configuration file
│ ├── Taro compilation configuration file
│ ├── Taro publish configuration file
│ ├── Taro debug configuration file
│ └── Readme file (required if released)
For details on the module catalog check thismodular structure gain
Module Configuration
In the module duxui, its configuration file looks like this
{
"name": "duxui",
"description": "DUXUIstorehouse",
"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"
}
}
}
We see that he has a fieldnpm, its content and the program's configuration is exactly the same, writing this in a module will be exactly the same as the project's Override the merge, then you can install the dependencies needed for the current module through the module, and this dependency can be specified in each module, and they will be merged together
When you specify a different--app= After importing a module, the framework automatically reinstalls it based on the third-party dependencies in the module you're using.
There are a number of similar designs in the module for writing configurations or documentation, including the following
- Writing global styles
- Can be customized if the project is h5, only available when used as an entry module
- Used to override project global configuration
- babel configuration file
- metro configuration file
- Taro Compile Configuration File
Module Routing
Pages can be written in each module, but of course this is not mandatory, these pages will be defined in their own module
pass (a bill or inspection etc)modeName/config/ Define the current module route, e.g.duxuiExample The routes are defined as follows
/**
* login:whether login is required
* platform: supported platforms (weapp, h5, rn) not configured to support all
* subPackage: if or not set it as a subpackage.
* home: if or not it is the home page * If it is the home page, it will be listed first.
*/
const config = {
pages: {
'duxuiExample/index': {
pages: {
index: {
home: true
}
}
},
'duxuiExample/example': {
pages: {
Button: {},
Cell: {},
Grid: {},
Divider: {},
Space: {},
// More not shown
}
}
}
}
= config
The definition of routing is also encapsulated, the configuration is a folder as an object to deal with, so that we can easily be a folder for sub-packaging and other operations
Writing pages using UI libraries and global styles
In the base moduleduxapp provides global styles that can be used to quickly lay out a page.tailwindcss Similarly, in conjunction with the UI component, writing a page like the one below, you can see that we don't need to write thescss file is all it takes to write a page
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='Promotion Center' 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={}>{}</Avatar>
<Column className='mh-3'>
<Row items='center' className='gap-2'>
<Text size={33} bold color='#FFFFFF' >{}</Text>
{!!info.level_name && <Tag type='primary' size='s'>{info.level_name}</Tag>}
</Row>
<Row className='mt-2'>
<Text color='#FFFFFF' size={1}>invitation code：{}</Text>
<CmsIcon className='mh-2' size={36} name='copy' color='#FFFFFF' onClick={() => setClipboardData({ data: })} />
</Row>
</Column>
</Row>
<CmsIcon size={60} name='QRcode1' color='#FFFFFF' onClick={} />
</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'>Direct Push Orders</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'>Direct Push Customers</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'>Earnings for the month</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'>cumulative gain</Text>
</Column>
</Row>
</Card>
<Card shadow margin disableMarginTop onClick={() => nav('duxcmsAccount/cash/index')}>
<Row items='center' justify='between'>
<Text bold>Commission Management</Text>
<CmsIcon name='direction_right' size={32} />
</Row>
<Row className='mt-3' items='baseline'>
<Text size={2}>commission:</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}>Today's Estimated Return</Text>
<Text className='mt-1' bold size={40} >{day.sale_money || 0}</Text>
</Column>
<Column items='center'>
<Text size={2}>Today's valid orders</Text>
<Text className='mt-1' bold size={40} >{day.order_num || 0}</Text>
</Column>
<Column items='center'>
<Text size={2}>New Customers Today</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>Other operations</Text>
<Row justify='between' items='center' onClick={() => nav('duxcmsSale/index/order')}>
<Text size={2} className='mh-2' bold>Promotional Orders</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>My Clients</Text>
<CmsIcon name='direction_right' size={32} />
</Row>
< mark='' />
</Card>
<Row style={{ height: px(16) }}></Row>
</ScrollView >
</TopView>
}
For a better editing experience, you need to install the vscodeSCSS Everywhere plugin, which recognizes global styles and gives hints on how to write them.
user configuration
Many of the modules are generic, so some of the content that needs to be changed for different projects can't be written in the module, but have to be configured in the form of a configuration
The project configuration is placed in the project root directory under theconfigs directory, where each folder is a configuration, and the files in theIt's the project configuration.
Like this one.duxuiExampleconfiguration, where theoptionEach of these is the configuration of the corresponding module
// import qiniu from '. /base/components/UploadFileManage/drive/qiniu'
const config = {
// Override config
appConfig: {
requiredPrivateInfos: [
'chooseLocation',
'startLocationUpdateBackground',
'chooseAddress'
]
}, // Debugging configurations.
// Debug configuration
debug: {
// Enable vconsole debugging on the h5 side.
vconsole: false
}, // Module configuration
// Module Configuration The module lifecycle option will be called, passing in the corresponding module's parameters
option: {
// Base module
duxapp: {
theme: {
primaryColor: '#E70012', secondaryColor: '#E84C00', // theme: {
secondaryColor: '#E84C00',
successColor: '#34a853', warningColor: '#fbbc05',
warningColor: '#fbbc05',
dangerColor: '#ea4335',
pageColor: '#F7F9FC',
textColor3: '#A1A6B6',
textColor4: '#FFF',
header: {
color: '#fff', // only supports rgb hex values, do not use plain words Set to array will show a gradient button
textColor: '#000', // text color
showWechat: false, // Whether to show header for WeChat public numbers
showWap: true, // whether h5 shows header or not
}
}
},
codepush: {
androidKey: '',
iosKey: '', }
},
wechat: {
// Share component configuration
share: {
open: true, // open undefined page sharing
// Enable undefined page sharing
pageSlef: {
// Include these pages to share themselves Page path keyword matching include has a higher priority than exclude, // and can be configured to be an empty array to indicate that all pages are supported.
// You can configure exclude to be an empty array to support all pages.
// pageSlef has higher priority than pageHome
// include: ['page/test'], // exclude these pages and do not share them.
// Exclude these pages from sharing
exclude: []
}, // Exclude these pages from sharing.
// Enable undefined pages to be shared on a specific page
pageHome: {
path: '', params: {}, // Enable sharing of undefined pages to specific pages.
params: {}, // Include these page shares themselves.
// Include these pages to share themselves Page path keyword matching
// include: [], // exclude these pages from sharing themselves
// Exclude these pages from sharing
// exclude: []
}, // public sharing parameters.
// Public sharing parameters
common: {
title: 'DUXUI', desc: 'Compatible with Applets, H5, RN', // public sharing parameters
desc: 'Simultaneously compatible with applets, H5, RN',
image: '/weiwait/cropper/'
},
platform: {
app: {
// Configure the original id for sharing to the app, which also acts as a switch.
weappUserName: '', // Configure the url to share to the h5 app with a switch.
// Configure the url to share to the h5 url, also known as a switch.
h5Url: '', }
}
}
}
}, }
// New php modular system
duxcms: {
request: {
origin: '',
path: 'api', // domain second level directory
secretId: '53368068', // domain name second-level directory
secretKey: '6c278fbf1791fbed3ae79197de03f65f', // domain second-level directory
devOpen: false,
devToken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJtZW1iZXIiLCJpYXQiOjE2ODc5Mzg3NDEsImV4cCI6MTY5MDUzMDc0MSwiaWQiOjZ9. kCb82Y3bgUJWUo_WYsUPO1cLYzF1OJdEWTKAj9iNlF0'
}, // Log-in related configuration.
// Login-related configuration
loginConfig: {
// Cell phone login
phone: true, // email logins.
// Email login
email: false, // app wechat login
// appWatch login
appWatch: true, // appWatch login
// Applet wechat login
weappWatch: true, // appWatch.
// Name
appName: 'duxui'
}
}
}
}
export default config
back-end framework
In my development project, the back-end framework is my partner is responsible for, the back-end is also the use of modular development mode to complete, duxapp framework for the back-end framework has played a good docking foundation, if you consider to further improve the efficiency of the back-end development, you can consider using the
Back-end development documentation:/
summarize
This post is already very long, and there is so much more to the duxapp framework that it is impossible to cover it all here, like the following
- Module Topics
- Module Installation and Distribution
- Rapid App Development (React Native)
- Request Upload
- routing system
- Open Modules (User Management, WeChat, Alipay, Page Designer, etc.)
- wait a minute!
Please go to the development documentation for a detailed tutorial
Development Documentation:/
GitHub：/duxapp