From 0d5b2fe8a1b419d5eafcd6d62b6306e243ea7bc0 Mon Sep 17 00:00:00 2001 From: anyesu Date: Tue, 20 Feb 2024 11:40:00 +0800 Subject: [PATCH] feat(react): :sparkles: use NutUI-React Taro - https://nutui.jd.com/taro/react/2x/#/zh-CN/guide/start-react - https://docs.taro.zone/docs/use-h5 - https://github.com/jdf2e/nutui-icons/issues/16 --- packages/taro-demo-react/babel.config.js | 12 ++++++ packages/taro-demo-react/config/index.ts | 2 +- packages/taro-demo-react/package.json | 4 ++ packages/taro-demo-react/src/app.ts | 1 + .../src/pages/index/constants.ts | 3 ++ .../src/pages/index/index.module.scss | 40 +++++++++++++++++++ .../taro-demo-react/src/pages/index/index.tsx | 36 +++++++++++++---- 7 files changed, 89 insertions(+), 9 deletions(-) create mode 100644 packages/taro-demo-react/src/pages/index/index.module.scss diff --git a/packages/taro-demo-react/babel.config.js b/packages/taro-demo-react/babel.config.js index 12f3043..a6d12a7 100644 --- a/packages/taro-demo-react/babel.config.js +++ b/packages/taro-demo-react/babel.config.js @@ -10,4 +10,16 @@ module.exports = { }, ], ], + plugins: [ + [ + 'import', + { + libraryName: '@nutui/nutui-react-taro', + libraryDirectory: 'dist/esm', + style: 'css', + camel2DashComponentName: false, + }, + 'nutui-react-taro', + ], + ], }; diff --git a/packages/taro-demo-react/config/index.ts b/packages/taro-demo-react/config/index.ts index cdd212d..bcba647 100644 --- a/packages/taro-demo-react/config/index.ts +++ b/packages/taro-demo-react/config/index.ts @@ -7,7 +7,7 @@ import prodConfig from './prod'; export default defineConfig(async (merge) => { const baseConfig: UserConfigExport = { projectName: 'taro-demo-react', - designWidth: 750, + designWidth: 375, // 全局使用 NutUI 的 375 尺寸 deviceRatio: { 640: 2.34 / 2, 750: 1, diff --git a/packages/taro-demo-react/package.json b/packages/taro-demo-react/package.json index 31013b3..80a27a6 100644 --- a/packages/taro-demo-react/package.json +++ b/packages/taro-demo-react/package.json @@ -35,9 +35,12 @@ ], "dependencies": { "@babel/runtime": "7.24.4", + "@nutui/icons-react-taro": "1.0.4", + "@nutui/nutui-react-taro": "2.6.0", "@tarojs/components": "3.6.25", "@tarojs/helper": "3.6.25", "@tarojs/plugin-framework-react": "3.6.25", + "@tarojs/plugin-html": "3.6.25", "@tarojs/plugin-platform-alipay": "3.6.25", "@tarojs/plugin-platform-h5": "3.6.25", "@tarojs/plugin-platform-harmony-hybrid": "3.6.25", @@ -64,6 +67,7 @@ "@types/jest": "29.5.12", "@types/react": "18.2.74", "@types/webpack-env": "1.18.4", + "babel-plugin-import": "1.13.8", "babel-preset-taro": "3.6.25", "eslint-config-taro": "3.6.25", "eslint-plugin-import": "2.12.0", diff --git a/packages/taro-demo-react/src/app.ts b/packages/taro-demo-react/src/app.ts index e87b51a..da68108 100644 --- a/packages/taro-demo-react/src/app.ts +++ b/packages/taro-demo-react/src/app.ts @@ -1,5 +1,6 @@ import { useLaunch } from '@tarojs/taro'; import type { PropsWithChildren } from 'react'; +import '@nutui/nutui-react-taro/dist/style.css'; import './app.scss'; function App({ children }: PropsWithChildren) { diff --git a/packages/taro-demo-react/src/pages/index/constants.ts b/packages/taro-demo-react/src/pages/index/constants.ts index 7c749c4..bb0695e 100644 --- a/packages/taro-demo-react/src/pages/index/constants.ts +++ b/packages/taro-demo-react/src/pages/index/constants.ts @@ -7,4 +7,7 @@ export interface NavGroupConfig extends NavConfig { children: NavConfig[]; } +export const NUT_UI_LOGO = + 'https://img14.360buyimg.com/imagetools/jfs/t1/117879/25/28831/6279/6329723bE66715a2f/5f099b8feca9e8cc.png'; + export const navs: NavGroupConfig[] = []; diff --git a/packages/taro-demo-react/src/pages/index/index.module.scss b/packages/taro-demo-react/src/pages/index/index.module.scss new file mode 100644 index 0000000..4868128 --- /dev/null +++ b/packages/taro-demo-react/src/pages/index/index.module.scss @@ -0,0 +1,40 @@ +.index { + height: 100%; + width: 100%; + + &__header { + display: flex; + align-items: center; + padding: 0 34px; + height: 117px; + > image { + width: 67px; + height: 67px; + margin-right: 18px; + flex-shrink: 0; + } + &__info { + display: flex; + flex-direction: column; + h1 { + height: 48px; + line-height: 48px; + font-size: 34px; + color: rgb(51 51 51 / 100%); + font-weight: 500; + } + p { + height: 18px; + line-height: 18px; + font-size: 12px; + color: rgb(154 155 157 / 100%); + } + } + } + &__navs { + background: #f7f8fa; + border-radius: 30px 30px 0 0; + overflow: hidden; + padding: 30px 25px; + } +} diff --git a/packages/taro-demo-react/src/pages/index/index.tsx b/packages/taro-demo-react/src/pages/index/index.tsx index 8d61e2a..ab073ca 100644 --- a/packages/taro-demo-react/src/pages/index/index.tsx +++ b/packages/taro-demo-react/src/pages/index/index.tsx @@ -1,14 +1,34 @@ -import { Text, View } from '@tarojs/components'; -import { useLoad } from '@tarojs/taro'; +import { Image, View } from '@tarojs/components'; +import Taro from '@tarojs/taro'; +import { ArrowRight } from '@nutui/icons-react-taro'; +import { Cell, CellGroup } from '@nutui/nutui-react-taro'; +import { navs, NUT_UI_LOGO } from './constants'; +import styles from './index.module.scss'; -export default function Index() { - useLoad(() => { - console.log('Page loaded.'); - }); +async function navigateTo(group: string, path: string) { + await Taro.navigateTo({ url: `/pages/${group}/${path}` }); +} +export default function Index() { return ( - - Hello world! + + + + +

NutUI React

+

京东风格的轻量级小程序组件库 React 版

+ + + + {navs.map((group) => ( + + {group.children.map(({ name, path }) => { + const onClick = () => navigateTo(group.path, path); + return } onClick={onClick} />; + })} + + ))} + ); }