BeeDev：BeeMa component helper

BeeMa 架构，useStore 类型的页面，业务组建相关操作

新增模块

修改点

• 新增相应模块代码(不同加载类型，模块代码不同)

  • 	import { createElement, memo } from 'rax';
    import View from 'rax-view';
    import Text from 'rax-text';
    import styles from './index.module.scss';
    import universalCommonHooks from '@ali/puicom-universal-common-hooks';
    import { INealYangProps } from './neal-yang';
    const { useComLoaded } = universalCommonHooks;
    
    const nealYang = (props) => {
    
      const { dataSource, common } = props as INealYangProps;
      const {  } = dataSource;
    
      // 通知容器组件已加载 （按需加载组件此行修改需谨慎！！！）
      useComLoaded(props);
    
      return (
        <View className={`compContainer ${styles.container}`}>
          <Text>这是异步加载的组件(按需加载)</Text>
        </View>
      );
    }
    
    export default memo(nealYang);
    
    

• 新增模块配置 components/config.ts

• 新增对应 modules 及初始化方法，并在 store.ts 中注入

  • export default {
      // 模块初始值，默认都是空对象
      state: {},
      // 定义改变该模型状态的纯函数
      reducers: {
        /**
         * 初始化 nealYang 模块
         * @param preState
         * @param data 接口获取的初始值
         * @returns
         */
        init(preState, data) {
          return !!data ? data : { ...preState };
        },
      },
    };
    

• utils/index.ts 新增 mock 方法。注入相关字段

• use-data-init.ts 进行模块数据分发

  • import { useEffect } from 'rax';
    import store from '../store';
    import { pageDataInit } from '../utils';
    import emitter from '@ali/puicom-universal-emitter';
    import { APP_CONTAINER_EVENTS } from '@ali/puicom-h5-page-container';
    import { getCurrentEnv } from '@ali/puicom-universal-common-env';
    import { IPageState, IDaoComponents, IDaoCommon } from '../index.d';
    interface IDataInit {
      pageState: IPageState;
      dao: IDaoComponents;
      common: IDaoCommon;
    }
    export default (itemId: string): IDataInit => {
      const [pageState, { setIsLoading }] = store.useModel('pageState');
      const [testHeader, { init: testHeaderInit }] = store.useModel('testHeader');
      const [nealYang, { init: nealYangInit }] = store.useModel('nealYang');
      const [headerImg, { init: headerImgInit }] = store.useModel('headerImg');
      const [common, { init: commonInit }] = store.useModel('common');
      useEffect(() => {
        if (itemId) {
          commonInit(itemId);
          setIsLoading(true);
          pageDataInit(
            //获取接口数据并分发
            itemId,
            (data) => {
              // 这里分发各个模块数据
              setIsLoading(false);
              headerImgInit(data?.headerImg);
              nealYangInit(data?.nealYang);
              testHeaderInit(data?.testHeader);
            },
            (err) => {
              setIsLoading(false);
              triggerError();
            },
          );
        } else {
          triggerError();
        }
      }, []);
    
      if (getCurrentEnv() === 'wapa') {
        // @ts-ignore
        window.__global_state__ = store.getState();
      }
    
      return {
        pageState,
        common,
        dao: {
          headerImg,
          nealYang,
          testHeader,
        },
      };
    };
    /**
    * 触发 error 界面
    */
    
    const triggerError = () => {
      emitter.emit(APP_CONTAINER_EVENTS.TRIGGER_ERROR, {
        isOffline: true,
      });
    };
    

支持模块拖拽排序。但是暂时不支持修改删除。

new feature

新功能开发中。。。