多租戶登錄
問題：
釘釘使用的是同一個(gè)webview容器來(lái)訪問多個(gè)租戶鸣峭。
釘釘用戶在不同租戶場(chǎng)景下訪問同個(gè)域名渴肉，會(huì)存在已登錄上個(gè)租戶的情況坦辟。
為解決這個(gè)問題鳄橘，可使用下面的登錄流程的形式声离。
多租戶登錄流程圖
登錄成功后可通過(guò)回調(diào)執(zhí)行釘釘鑒權(quán)接口，來(lái)進(jìn)行登錄后的操作等等瘫怜。
android和ios時(shí)間處理問題
因?yàn)閕os無(wú)法使用new date()把2010-10-10轉(zhuǎn)換成時(shí)間戳术徊，所以使用第三方庫(kù)dayjs做統(tǒng)一轉(zhuǎn)換。
dayjs('2019-01-25').valueOf() // 1548381600000
全局狀態(tài)管理方案
- dva
- useStorage
如無(wú)必要鲸湃，首先屏蔽釘釘導(dǎo)航欄右側(cè)的分享功能赠涮。因?yàn)槲覀兊氖菃螒?yīng)用，用戶從子路徑進(jìn)入很可能會(huì)丟失之前的狀態(tài)變更暗挑。
useStorage會(huì)存在ios無(wú)法調(diào)用window.unload事件的bug笋除。
因?yàn)槲覀兛蚣苁鞘褂胾mijs3.0，所以首選dva炸裆。
<input type="file" capture="camera" />在android和ios不同的表現(xiàn)
2021年1月ios最新版本可以直接調(diào)用攝像頭垃它，安卓12版本及其以下版本會(huì)出現(xiàn)相冊(cè)選擇界面。
上中下布局烹看，ios 100vh問題
上下固定高度国拇，中自適應(yīng)高度 代碼模板
<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>
關(guān)閉新打開釘釘應(yīng)用內(nèi)頁(yè)面后的刷新
// 打開新頁(yè)面
const eventGotoDetail = (item: any) => {
window.gotoAddFlag = true;
dd.biz.util.open({
name:String,//頁(yè)面名稱
params:JSONObject,//傳參
onSuccess : function() {
/**/
},
onFail : function(err) {}
});
};
// 新頁(yè)面返回的可見性變化事件調(diào)用
useEffect(() => {
document.addEventListener(
'visibilitychange',
() => {
if (!document.hidden) {
if (window.gotoAddFlag) {
window.gotoAddFlag = false
setStateListArg({
...stateListArg,
page: {
begin: 0,
length: 10,
},
});
}
}
},
false,
);
}, []);
基于umi3的dva最簡(jiǎn)使用
新建一個(gè)model.ts
export default {
namespace: 'xxx',
state: {
listData: []
},
reducers: {
setData(state: any, {payload}: any) {
return { ...state, listData: payload };
}
}
};
業(yè)務(wù)代碼里引用。這里的xxx就是命名空間
import { useDispatch, useSelector } from 'dva';
const mapStateToProps = ({ xxx }: any) => {
return {
...xxx,
};
};
export default (props: any) => {
const dispatch = useDispatch();
const stateProps = useSelector(mapStateToProps);
// 獲取的時(shí)候
const { listData } = stateProps;
// 傳遞數(shù)組['']給listData
dispatch({
type: 'xxx/setData',
payload: [''],
});
}
