-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: new architecture for reuqest & ui optimization
- Loading branch information
1 parent
50d8365
commit f9147ad
Showing
33 changed files
with
680 additions
and
490 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,113 @@ | ||
// import CookieManager from '@react-native-cookies/cookies' | ||
import 'axios/dist/axios.min.js' | ||
import { noop } from 'lodash-es' | ||
import { useEffect, useReducer, useRef } from 'react' | ||
import { View } from 'react-native' | ||
import WebView from 'react-native-webview' | ||
|
||
import { baseURL } from '@/utils/request/baseURL' | ||
import tw from '@/utils/tw' | ||
|
||
import v2exMessage from './v2exMessage' | ||
|
||
let outterResolve: () => void | ||
let outterReject: (error: Error) => void | ||
|
||
v2exMessage.loadedV2exWebviewPromise = new Promise((resolve, reject) => { | ||
outterResolve = resolve | ||
outterReject = reject | ||
}) | ||
|
||
export default function V2exWebview() { | ||
const webViewRef = useRef<WebView>(null) | ||
|
||
const [forceRenderKey, updateForceRenderKey] = useReducer( | ||
(num: number): number => num + 1, | ||
1 | ||
) | ||
|
||
v2exMessage.clear = () => { | ||
webViewRef.current?.clearCache?.(true) | ||
// CookieManager.clearAll(true) | ||
} | ||
|
||
v2exMessage.reload = () => { | ||
v2exMessage.loadedV2exWebviewPromise = new Promise((resolve, reject) => { | ||
outterResolve = resolve | ||
outterReject = reject | ||
}) | ||
updateForceRenderKey() | ||
} | ||
|
||
useEffect(() => { | ||
v2exMessage.inject = ({ id, config }) => { | ||
const run = `window.axios(${JSON.stringify(config)}) | ||
.then(response => { | ||
window.ReactNativeWebView.postMessage( | ||
JSON.stringify({ | ||
id: ${JSON.stringify(id)}, | ||
response: response, | ||
}) | ||
) | ||
}) | ||
.catch(error => { | ||
window.ReactNativeWebView.postMessage( | ||
JSON.stringify({ | ||
id: ${JSON.stringify(id)}, | ||
error: JSON.parse( | ||
JSON.stringify(error, Object.getOwnPropertyNames(error)) | ||
), | ||
}) | ||
) | ||
}); void(0);` | ||
|
||
webViewRef.current?.injectJavaScript(run) | ||
} | ||
|
||
return () => { | ||
v2exMessage.inject = noop | ||
} | ||
}, []) | ||
|
||
return ( | ||
<View | ||
key={forceRenderKey} | ||
style={tw`absolute w-0 h-0`} | ||
pointerEvents="none" | ||
> | ||
<WebView | ||
ref={webViewRef} | ||
originWhitelist={['*']} | ||
source={{ uri: `${baseURL}/signin` }} | ||
onLoadEnd={() => outterResolve()} | ||
onError={() => outterReject(new Error('应用初始化失败'))} | ||
javaScriptEnabled={true} | ||
domStorageEnabled={true} | ||
decelerationRate="normal" | ||
sharedCookiesEnabled={true} | ||
startInLoadingState={true} | ||
scalesPageToFit={true} | ||
onMessage={event => { | ||
let result = event.nativeEvent.data as any | ||
|
||
try { | ||
result = JSON.parse(result) | ||
} catch (error) { | ||
// empty | ||
} | ||
|
||
if (typeof result === 'object' && result !== null) { | ||
const listener = v2exMessage.linsteners.get(result.id) | ||
|
||
listener?.( | ||
result.error != null | ||
? Promise.reject(result.error) | ||
: Promise.resolve(result.response) | ||
) | ||
} | ||
}} | ||
userAgent={`Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36`} | ||
/> | ||
</View> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
import { AxiosRequestConfig, AxiosResponse } from 'axios' | ||
import { noop, pick, uniqueId } from 'lodash-es' | ||
|
||
import { timeout } from '@/utils/timeout' | ||
|
||
class V2exMessage { | ||
linsteners: Map<string, (response: any) => void> = new Map() | ||
loadedV2exWebviewPromise: Promise<void> = Promise.resolve() | ||
inject: (arg: { id: string; config: AxiosRequestConfig }) => void = noop | ||
clear: () => void = noop | ||
reload: () => void = noop | ||
|
||
constructor() { | ||
this.sendMessage = this.sendMessage.bind(this) | ||
} | ||
|
||
async sendMessage( | ||
config: AxiosRequestConfig | ||
): Promise<AxiosResponse<any, any>> { | ||
await this.loadedV2exWebviewPromise | ||
|
||
const id = uniqueId() | ||
|
||
return timeout( | ||
new Promise<AxiosResponse<any, any>>(async resolve => { | ||
const pickedConfig = pick(config, [ | ||
'timeout', | ||
'baseURL', | ||
'responseType', | ||
'method', | ||
'url', | ||
'headers', | ||
'withCredentials', | ||
'data', | ||
]) | ||
|
||
this.linsteners.set(id, resolve) | ||
|
||
this.inject({ | ||
id, | ||
config: pickedConfig, | ||
}) | ||
}).finally(() => this.linsteners.delete(id)), | ||
10 * 1000 | ||
) | ||
} | ||
} | ||
|
||
export default new V2exMessage() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.