Skip to content

Commit

Permalink
docs(demos): support listen cwf redirect query params
Browse files Browse the repository at this point in the history
  • Loading branch information
innocces committed Jan 14, 2024
1 parent 84cf245 commit 39fc3a1
Show file tree
Hide file tree
Showing 6 changed files with 169 additions and 89 deletions.
4 changes: 3 additions & 1 deletion examples/taro-hooks-plugin-vue/config/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ const config = {
sourceRoot: 'src',
outputRoot: weapp ? 'dist-weapp' : 'dist',
plugins: ['@taro-hooks/plugin-vue', '@tarojs/plugin-html'],
defineConstants: {},
defineConstants: {
CF: process.env.CF_PAGES ? JSON.stringify(process.env.CF_PAGES) : "'0'",
},
alias: {
'@root': resolve(__dirname, '..', '..', '..'),
},
Expand Down
40 changes: 38 additions & 2 deletions examples/taro-hooks-plugin-vue/src/pages/index/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,9 @@
</template>

<script lang="ts">
import { useRouter, useModal } from 'taro-hooks';
import { useRouter, useModal, useEnv, useLayoutEffect } from 'taro-hooks';
import { ref } from 'vue';
import { ENV_TYPE } from '@tarojs/taro';
import {
generateIndexMenu,
PRODUCTIONDISABLEPANEL,
Expand All @@ -44,11 +45,14 @@ import {
// @ts-ignore
import type { MenuItem } from '@root/public/constant';
let checkParams: any = undefined;
export default {
setup() {
const collapseData = generateIndexMenu(true);
const env = useEnv();
const activeCollapseItem = ref('');
const [, { navigate, switchTab, preload }] = useRouter();
const [pageInfo, { navigate, switchTab, preload }] = useRouter();
const show = useModal({
title: 'Taro-Hooks',
content: '由于个人账号限制. 暂无法使用线上示例!',
Expand All @@ -71,6 +75,38 @@ export default {
navigateAction(path);
};
const handleCheckNavigate = () => {
const checkQueryField = ['type', 'hook', 'sub', 'function'];
const pageParams = pageInfo.params;
// 包含前两个即可
if (checkQueryField.slice(0, 2).every((v) => pageParams[v])) {
// 对比两个是否一致
const isEqual = Object.keys(pageParams).reduce((result, key) => {
if (!result) {
return result;
}
return pageParams[key] === checkParams?.[key];
}, true);
if (!isEqual) {
const path = checkQueryField.reduce(
(forwardPath, key) => [forwardPath, `/${pageParams[key]}`].join(''),
'/pages',
);
checkParams = pageParams;
navigate(path);
}
}
};
useLayoutEffect(() => {
// @ts-ignore
if (env === ENV_TYPE['WEB'] && CF !== '0') {
handleCheckNavigate();
}
}, [pageInfo]);
return {
activeCollapseItem,
collapseData,
Expand Down
4 changes: 3 additions & 1 deletion examples/taro-hooks-plugin/config/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ const config = {
sourceRoot: 'src',
outputRoot: weapp ? 'dist-weapp' : 'dist',
plugins: ['@taro-hooks/plugin-react', '@taro-hooks/plugin-auto-import'],
defineConstants: {},
defineConstants: {
CF: process.env.CF_PAGES ? JSON.stringify(process.env.CF_PAGES) : "'0'",
},
alias: {
'@root': resolve(__dirname, '..', '..', '..'),
'@src': resolve(__dirname, '..', 'src'),
Expand Down
2 changes: 2 additions & 0 deletions examples/taro-hooks-plugin/global.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ declare module '*.scss';
declare module '*.sass';
declare module '*.styl';

declare const CF: string;

declare namespace NodeJS {
interface ProcessEnv {
TARO_ENV:
Expand Down
68 changes: 52 additions & 16 deletions examples/taro-hooks-plugin/src/app.ts
Original file line number Diff line number Diff line change
@@ -1,25 +1,61 @@
import { Component } from 'react';
import {
type FC,
type PropsWithChildren,
useLayoutEffect,
useRef,
useCallback,
} from 'react';
import { useRouter, useEnv, useApp } from 'taro-hooks';
import { ENV_TYPE } from '@tarojs/taro';
import './app.css';

class App extends Component {
componentDidMount() {}
const App: FC<PropsWithChildren> = ({ children }) => {
const [pageInfo, { navigate }] = useRouter();
const { setGlobalData } = useApp();
const env = useEnv();
const checkParams = useRef<typeof pageInfo.params>();

componentDidShow() {}
const handleCheckNavigate = useCallback(() => {
const checkQueryField = ['type', 'hook', 'sub', 'function'];
const pageParams = pageInfo.params;
// 包含前两个即可
if (checkQueryField.slice(0, 2).every((v) => pageParams[v])) {
// 对比两个是否一致
const isEqual = Object.keys(pageParams).reduce((result, key) => {
if (!result) {
return result;
}

componentDidHide() {}
return pageParams[key] === checkParams.current?.[key];
}, true);

componentDidCatchError() {}
if (!isEqual) {
const path = checkQueryField.reduce(
(forwardPath, key) => [forwardPath, `/${pageParams[key]}`].join(''),
'/pages',
);
checkParams.current = pageParams;
navigate(path);
}
}
}, [pageInfo]);

globalData = {
framework: 'React',
package: 'taro-hooks next',
basic: 'taro',
};
useLayoutEffect(() => {
// @ts-ignore
if (env === ENV_TYPE['WEB'] && CF !== '0') {
handleCheckNavigate();
}
}, [pageInfo.params]);

// this.props.children 是将要会渲染的页面
render() {
return this.props.children;
}
}
useLayoutEffect(() => {
Object.entries({
framework: 'React',
package: 'taro-hooks next',
basic: 'taro',
}).forEach((params) => setGlobalData(...params));
}, []);

return children;
};

export default App;
140 changes: 71 additions & 69 deletions examples/taro-hooks-plugin/src/auto-imports.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,73 +5,75 @@
// Generated by unplugin-auto-import
export {}
declare global {
const useAPICheck: typeof import('taro-hooks')['useAPICheck']
const useAccountInfo: typeof import('taro-hooks')['useAccountInfo']
const useActionSheet: typeof import('taro-hooks')['useActionSheet']
const useAlertBeforeUnload: typeof import('taro-hooks')['useAlertBeforeUnload']
const useApp: typeof import('taro-hooks')['useApp']
const useArrayBuffer: typeof import('taro-hooks')['useArrayBuffer']
const useAudio: typeof import('taro-hooks')['useAudio']
const useAuthorize: typeof import('taro-hooks')['useAuthorize']
const useBackground: typeof import('taro-hooks')['useBackground']
const useBattery: typeof import('taro-hooks')['useBattery']
const useBluetooth: typeof import('taro-hooks')['useBluetooth']
const useBoolean: typeof import('taro-hooks')['useBoolean']
const useBrightness: typeof import('taro-hooks')['useBrightness']
const useCamera: typeof import('taro-hooks')['useCamera']
const useChooseAddress: typeof import('taro-hooks')['useChooseAddress']
const useClipboardData: typeof import('taro-hooks')['useClipboardData']
const useCreation: typeof import('taro-hooks')['useCreation']
const useDebounce: typeof import('taro-hooks')['useDebounce']
const useDebounceFn: typeof import('taro-hooks')['useDebounceFn']
const useDeviceInfo: typeof import('taro-hooks')['useDeviceInfo']
const useEnterOptions: typeof import('taro-hooks')['useEnterOptions']
const useEnv: typeof import('taro-hooks')['useEnv']
const useEvent: typeof import('taro-hooks')['useEvent']
const useFile: typeof import('taro-hooks')['useFile']
const useFrom: typeof import('taro-hooks')['useFrom']
const useImage: typeof import('taro-hooks')['useImage']
const useInvoice: typeof import('taro-hooks')['useInvoice']
const useLatest: typeof import('taro-hooks')['useLatest']
const useLaunchOptions: typeof import('taro-hooks')['useLaunchOptions']
const useLoading: typeof import('taro-hooks')['useLoading']
const useLocation: typeof import('taro-hooks')['useLocation']
const useLogin: typeof import('taro-hooks')['useLogin']
const useManualPullDownRefresh: typeof import('taro-hooks')['useManualPullDownRefresh']
const useMap: typeof import('taro-hooks')['useMap']
const useMemoizedFn: typeof import('taro-hooks')['useMemoizedFn']
const useMenuButtonBoundingClientRect: typeof import('taro-hooks')['useMenuButtonBoundingClientRect']
const useModal: typeof import('taro-hooks')['useModal']
const useMotion: typeof import('taro-hooks')['useMotion']
const useMount: typeof import('taro-hooks')['useMount']
const useNavigationBar: typeof import('taro-hooks')['useNavigationBar']
const useNetworkType: typeof import('taro-hooks')['useNetworkType']
const useOnline: typeof import('taro-hooks')['useOnline']
const usePage: typeof import('taro-hooks')['usePage']
const usePromise: typeof import('taro-hooks')['usePromise']
const useRecord: typeof import('taro-hooks')['useRecord']
const useRequest: typeof import('taro-hooks')['useRequest']
const useRequestSubscribeMessage: typeof import('taro-hooks')['useRequestSubscribeMessage']
const useRouter: typeof import('taro-hooks')['useRouter']
const useScanCode: typeof import('taro-hooks')['useScanCode']
const useSelectorQuery: typeof import('taro-hooks')['useSelectorQuery']
const useStorage: typeof import('taro-hooks')['useStorage']
const useSystemInfo: typeof import('taro-hooks')['useSystemInfo']
const useTabBar: typeof import('taro-hooks')['useTabBar']
const useThrottle: typeof import('taro-hooks')['useThrottle']
const useThrottleFn: typeof import('taro-hooks')['useThrottleFn']
const useToast: typeof import('taro-hooks')['useToast']
const useToggle: typeof import('taro-hooks')['useToggle']
const useTopBarText: typeof import('taro-hooks')['useTopBarText']
const useUnmount: typeof import('taro-hooks')['useUnmount']
const useUpdate: typeof import('taro-hooks')['useUpdate']
const useUpdateEffect: typeof import('taro-hooks')['useUpdateEffect']
const useUpdateManager: typeof import('taro-hooks')['useUpdateManager']
const useUserInfo: typeof import('taro-hooks')['useUserInfo']
const useVibrate: typeof import('taro-hooks')['useVibrate']
const useVideo: typeof import('taro-hooks')['useVideo']
const useVisible: typeof import('taro-hooks')['useVisible']
const useWeRun: typeof import('taro-hooks')['useWeRun']
const useWebp: typeof import('taro-hooks')['useWebp']
const useWindowInfo: typeof import('taro-hooks')['useWindowInfo']
const useAPICheck: typeof import('taro-hooks')['useAPICheck'];
const useAccountInfo: typeof import('taro-hooks')['useAccountInfo'];
const useActionSheet: typeof import('taro-hooks')['useActionSheet'];
const useAlertBeforeUnload: typeof import('taro-hooks')['useAlertBeforeUnload'];
const useApp: typeof import('taro-hooks')['useApp'];
const useArrayBuffer: typeof import('taro-hooks')['useArrayBuffer'];
const useAudio: typeof import('taro-hooks')['useAudio'];
const useAuthorize: typeof import('taro-hooks')['useAuthorize'];
const useBackground: typeof import('taro-hooks')['useBackground'];
const useBattery: typeof import('taro-hooks')['useBattery'];
const useBluetooth: typeof import('taro-hooks')['useBluetooth'];
const useBoolean: typeof import('taro-hooks')['useBoolean'];
const useBrightness: typeof import('taro-hooks')['useBrightness'];
const useCamera: typeof import('taro-hooks')['useCamera'];
const useChooseAddress: typeof import('taro-hooks')['useChooseAddress'];
const useClipboardData: typeof import('taro-hooks')['useClipboardData'];
const useCreation: typeof import('taro-hooks')['useCreation'];
const useDebounce: typeof import('taro-hooks')['useDebounce'];
const useDebounceFn: typeof import('taro-hooks')['useDebounceFn'];
const useDeviceInfo: typeof import('taro-hooks')['useDeviceInfo'];
const useEnterOptions: typeof import('taro-hooks')['useEnterOptions'];
const useEnv: typeof import('taro-hooks')['useEnv'];
const useEvent: typeof import('taro-hooks')['useEvent'];
const useFile: typeof import('taro-hooks')['useFile'];
const useFrom: typeof import('taro-hooks')['useFrom'];
const useImage: typeof import('taro-hooks')['useImage'];
const useInvoice: typeof import('taro-hooks')['useInvoice'];
const useKeyboard: typeof import('taro-hooks')['useKeyboard'];
const useLatest: typeof import('taro-hooks')['useLatest'];
const useLaunchOptions: typeof import('taro-hooks')['useLaunchOptions'];
const useLoading: typeof import('taro-hooks')['useLoading'];
const useLocation: typeof import('taro-hooks')['useLocation'];
const useLogin: typeof import('taro-hooks')['useLogin'];
const useManualPullDownRefresh: typeof import('taro-hooks')['useManualPullDownRefresh'];
const useMap: typeof import('taro-hooks')['useMap'];
const useMemoizedFn: typeof import('taro-hooks')['useMemoizedFn'];
const useMenuButtonBoundingClientRect: typeof import('taro-hooks')['useMenuButtonBoundingClientRect'];
const useModal: typeof import('taro-hooks')['useModal'];
const useMotion: typeof import('taro-hooks')['useMotion'];
const useMount: typeof import('taro-hooks')['useMount'];
const useNavigationBar: typeof import('taro-hooks')['useNavigationBar'];
const useNetworkType: typeof import('taro-hooks')['useNetworkType'];
const useOnline: typeof import('taro-hooks')['useOnline'];
const usePage: typeof import('taro-hooks')['usePage'];
const usePreload: typeof import('taro-hooks')['usePreload'];
const usePromise: typeof import('taro-hooks')['usePromise'];
const useRecord: typeof import('taro-hooks')['useRecord'];
const useRequest: typeof import('taro-hooks')['useRequest'];
const useRequestSubscribeMessage: typeof import('taro-hooks')['useRequestSubscribeMessage'];
const useRouter: typeof import('taro-hooks')['useRouter'];
const useScanCode: typeof import('taro-hooks')['useScanCode'];
const useSelectorQuery: typeof import('taro-hooks')['useSelectorQuery'];
const useStorage: typeof import('taro-hooks')['useStorage'];
const useSystemInfo: typeof import('taro-hooks')['useSystemInfo'];
const useTabBar: typeof import('taro-hooks')['useTabBar'];
const useThrottle: typeof import('taro-hooks')['useThrottle'];
const useThrottleFn: typeof import('taro-hooks')['useThrottleFn'];
const useToast: typeof import('taro-hooks')['useToast'];
const useToggle: typeof import('taro-hooks')['useToggle'];
const useTopBarText: typeof import('taro-hooks')['useTopBarText'];
const useUnmount: typeof import('taro-hooks')['useUnmount'];
const useUpdate: typeof import('taro-hooks')['useUpdate'];
const useUpdateEffect: typeof import('taro-hooks')['useUpdateEffect'];
const useUpdateManager: typeof import('taro-hooks')['useUpdateManager'];
const useUserInfo: typeof import('taro-hooks')['useUserInfo'];
const useVibrate: typeof import('taro-hooks')['useVibrate'];
const useVideo: typeof import('taro-hooks')['useVideo'];
const useVisible: typeof import('taro-hooks')['useVisible'];
const useWeRun: typeof import('taro-hooks')['useWeRun'];
const useWebp: typeof import('taro-hooks')['useWebp'];
const useWindowInfo: typeof import('taro-hooks')['useWindowInfo'];
}

0 comments on commit 39fc3a1

Please sign in to comment.