钉钉H5微应用开发总结

多租户登录

问题：
钉钉使用的是同一个webview容器来访问多个租户。
钉钉用户在不同租户场景下访问同个域名，会存在已登录上个租户的情况。
为解决这个问题，可使用下面的登录流程的形式。

多租户登录流程图

登录成功后可通过回调执行钉钉鉴权接口，来进行登录后的操作等等。

android和ios时间处理问题

因为ios无法使用new date()把2010-10-10转换成时间戳，所以使用第三方库dayjs做统一转换。

dayjs('2019-01-25').valueOf() // 1548381600000

全局状态管理方案

dva
useStorage

如无必要，首先屏蔽钉钉导航栏右侧的分享功能。因为我们的是单应用，用户从子路径进入很可能会丢失之前的状态变更。

useStorage会存在ios无法调用window.unload事件的bug。

因为我们框架是使用umijs3.0，所以首选dva。

<input type="file" capture="camera" />在android和ios不同的表现

2021年1月ios最新版本可以直接调用摄像头，安卓12版本及其以下版本会出现相册选择界面。

上中下布局，ios 100vh问题

上下固定高度，中自适应高度代码模板

<style>
  .flexWrap{
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  .up{
    height:100px;
  }
  .down{
    height:100px;
  }
  .middle{
    width: 100%;
    display: flex;
    flex: 1;
    height: auto;
  }
</style>

<div class="flexWrap">
  <div class="up"></div> 
  <div class="middle"></div>
  <div class="down"></div>
</div>

<script>
  const flexWrap = document.querySelector('.flexWrap');
  flexWrap.setAttribute('style', `height:${window.innerHeight}px`);
</script>

关闭新打开钉钉应用内页面后的刷新

// 打开新页面
const eventGotoDetail = (item: any) => {

  window.gotoAddFlag = true;

  dd.biz.util.open({
    name:String,//页面名称
    params:JSONObject,//传参
    onSuccess : function() {
          /**/
    },
    onFail : function(err) {}
 });
};

// 新页面返回的可见性变化事件调用
useEffect(() => {
  
    document.addEventListener(
      'visibilitychange',
      () => {
        if (!document.hidden) {
          if (window.gotoAddFlag) {
            window.gotoAddFlag = false
            setStateListArg({
              ...stateListArg,
              page: {
                begin: 0,
                length: 10,
              },
            });
          }
      }
    },
    false,
  );
}, []);

基于umi3的dva最简使用

新建一个model.ts

export default {
  namespace: 'xxx',
  state: {
    listData: []
  },
  reducers: {
    setData(state: any, {payload}: any) {
      return { ...state, listData: payload };
    }
  }
};

业务代码里引用。这里的xxx就是命名空间

import { useDispatch, useSelector } from 'dva';
const mapStateToProps = ({ xxx }: any) => {
  return {
    ...xxx,
  };
};


export default (props: any) => {
  const dispatch = useDispatch();
  const stateProps = useSelector(mapStateToProps);
  
  // 获取的时候
  const { listData } = stateProps;
  
  // 传递数组['']给listData
  dispatch({
    type: 'xxx/setData',
    payload: [''],  
  });
}