blackteay/uniapp-vue3-vite-ts-template
1
0
Fork 0
mirror of https://gitee.com/h_mo/uniapp-vue3-vite-ts-template synced 2025-04-06 03:58:03 +08:00
Code Issues Projects Releases Wiki Activity

style-格式化代码

Browse Source
This commit is contained in:
Huang 2023-02-20 15:14:14 +08:00
parent ff12419ce5
commit 8ff3ca01a0
55 changed files with 1535 additions and 1669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.vue
View File

@ -1,25 +1,25 @@
<script setup lang="ts"> <script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'; import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
import { useAuthStore } from '@/state/modules/auth'; import { useAuthStore } from '@/state/modules/auth';
import { removeInterceptor, setupInterceptors } from '@/utils/interceptors'; import { removeInterceptor, setupInterceptors } from '@/utils/interceptors';
import { useRouterStore } from '@/state/modules/router'; import { useRouterStore } from '@/state/modules/router';
onLaunch(() => { onLaunch(() => {
console.log('App Launch'); console.log('App Launch');
removeInterceptor(); removeInterceptor();
setupInterceptors(); setupInterceptors();
const appStore = useRouterStore(); const appStore = useRouterStore();
appStore.initialize(); appStore.initialize();
}); });
onShow(() => { onShow(() => {
const authStore = useAuthStore(); const authStore = useAuthStore();
authStore.initToken(); authStore.initToken();
console.log('App Show'); console.log('App Show');
}); });
onHide(() => { onHide(() => {
console.log('App Hide'); console.log('App Hide');
}); });
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/assets/main.scss'; @import '@/assets/main.scss';
</style> </style>

42
src/androidPrivacy.json
View File

@ -1,29 +1,29 @@
{ {
"version" : "1", "version": "1",
"prompt" : "template", "prompt": "template",
"title" : "服务协议和隐私政策", "title": "服务协议和隐私政策",
"message" : "　　请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>　　你可阅读<a href=\"\">《服务协议》</a>和<a href=\"\">《隐私政策》</a>了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。", "message": "　　请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>　　你可阅读<a href=\"\">《服务协议》</a>和<a href=\"\">《隐私政策》</a>了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。",
"buttonAccept" : "同意并接受", "buttonAccept": "同意并接受",
"buttonRefuse" : "暂不同意", "buttonRefuse": "暂不同意",
// HX 3.4.13之后版本新增，system 使用系统webview 打开隐私协议链接，默认使用uni-app内置web组件 // HX 3.4.13之后版本新增，system 使用系统webview 打开隐私协议链接，默认使用uni-app内置web组件
"hrefLoader" : "default", "hrefLoader": "default",
"second" : { "second": {
"title" : "确认提示", "title": "确认提示",
"message" : "　　进入应用前，你需先同意<a href=\"\">《服务协议》</a>和<a href=\"\">《隐私政策》</a>，否则将退出应用。", "message": "　　进入应用前，你需先同意<a href=\"\">《服务协议》</a>和<a href=\"\">《隐私政策》</a>，否则将退出应用。",
"buttonAccept" : "同意并继续", "buttonAccept": "同意并继续",
"buttonRefuse" : "退出应用" "buttonRefuse": "退出应用"
}, },
"styles" : { "styles": {
"backgroundColor" : "#00FF00", "backgroundColor": "#00FF00",
"borderRadius" : "5px", "borderRadius": "5px",
"title" : { "title": {
"color" : "#ff00ff" "color": "#ff00ff"
}, },
"buttonAccept" : { "buttonAccept": {
"color" : "#ffff00" "color": "#ffff00"
}, },
"buttonRefuse" : { "buttonRefuse": {
"color" : "#00ffff" "color": "#00ffff"
} }
} }
} }

14
src/components/BasicButton/index.vue
View File

@ -1,11 +1,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import { buttonProps } from '@/components/BasicButton/prpos'; import { buttonProps } from '@/components/BasicButton/prpos';
const props = defineProps(buttonProps); const props = defineProps(buttonProps);
const emits = defineEmits(['click']); const emits = defineEmits(['click']);
const click = () => { const click = () => {
emits('click'); emits('click');
}; };
</script> </script>
<template> <template>
@ -15,7 +15,7 @@
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.default-btn { .default-btn {
color: #fff; color: #fff;
border-width: 4rpx; border-width: 4rpx;
border-color: #bfdbfe; border-color: #bfdbfe;
@ -28,5 +28,5 @@
&:hover { &:hover {
background-color: #3b82f6; background-color: #3b82f6;
} }
} }
</style> </style>

6
src/components/BasicInput/index.vue
View File

@ -3,9 +3,9 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
name: 'BasicInput', name: 'BasicInput',
props: { props: {
type: { type: {
@ -25,7 +25,7 @@
const _props = props; const _props = props;
return {}; return {};
}, },
}); });
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

40
src/components/Iconify/index.vue
View File

@ -1,8 +1,8 @@
<script lang="ts" setup name="Iconify"> <script lang="ts" setup name="Iconify">
import { computed, ref, unref } from 'vue'; import { computed, ref, unref } from 'vue';
import { assign } from 'lodash-es'; import { assign } from 'lodash-es';
const props = defineProps({ const props = defineProps({
icon: { icon: {
type: String, type: String,
}, },
@ -12,35 +12,23 @@
color: { color: {
type: String, type: String,
}, },
}); });
const iconSize = ref<string | boolean>( const iconSize = ref<string | boolean>(props.size ? `${props.size}rpx` : false);
props.size ? `${props.size}rpx` : false, const style = computed(() => {
); return assign(unref(iconSize) ? { width: unref(iconSize), height: unref(iconSize) } : {}, props.color ? { color: props.color } : {});
const style = computed(() => { });
return assign(
unref(iconSize)
? { width: unref(iconSize), height: unref(iconSize) }
: {},
props.color ? { color: props.color } : {},
);
});
const emit = defineEmits(['click']); const emit = defineEmits(['click']);
const onClick = () => { const onClick = () => {
emit('click'); emit('click');
}; };
</script> </script>
<template> <template>
<view <view ref="elRef" @click="onClick" :class="['iconify', icon]" :style="style"></view>
ref="elRef"
@click="onClick"
:class="['iconify', icon]"
:style="style"
></view>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.iconify { .iconify {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
height: 44rpx; height: 44rpx;
@ -50,5 +38,5 @@
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
} }
} }
</style> </style>

132
src/components/Navbar/index.vue
View File

@ -1,25 +1,21 @@
<script lang="ts" setup name="Navbar"> <script lang="ts" setup name="Navbar">
/** /**
* 头部导航栏 * 头部导航栏
* @description 所有尺寸都用px2rpx做适配 * @description 所有尺寸都用px2rpx做适配
*/ */
import { useSystem } from '@/hooks/useSystem'; import { useSystem } from '@/hooks/useSystem';
import { px2rpx } from '@/utils/uniapi'; import { px2rpx } from '@/utils/uniapi';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { useRoute, useRouter } from '@/hooks/router'; import { useRoute, useRouter } from '@/hooks/router';
import { useGlobalStyle } from '@/hooks/useGlobalStyle'; import { useGlobalStyle } from '@/hooks/useGlobalStyle';
import Iconify from '@/components/Iconify/index.vue'; import Iconify from '@/components/Iconify/index.vue';
import { HOME_PAGE } from '@/enums/routerEnum'; import { HOME_PAGE } from '@/enums/routerEnum';
const { const { navigationBarBackgroundColor, navigationBarTitleText, navigationBarTextStyle } = useGlobalStyle();
navigationBarBackgroundColor,
navigationBarTitleText,
navigationBarTextStyle,
} = useGlobalStyle();
const { currentRoute, currentPages } = useRoute(); const { currentRoute, currentPages } = useRoute();
const props = defineProps({ const props = defineProps({
bgColor: { type: String }, bgColor: { type: String },
title: { type: String }, title: { type: String },
titleColor: { type: String }, titleColor: { type: String },
@ -29,55 +25,39 @@
isBackShow: { type: Boolean, default: true }, isBackShow: { type: Boolean, default: true },
isHomeShow: { type: Boolean }, isHomeShow: { type: Boolean },
shadow: { type: Boolean, default: true }, shadow: { type: Boolean, default: true },
}); });
const { statusBarHeight } = useSystem(); const { statusBarHeight } = useSystem();
const statusHeight = computed(() => `${px2rpx(statusBarHeight!)}rpx`); const statusHeight = computed(() => `${px2rpx(statusBarHeight!)}rpx`);
const defaultNavbarHeight = ref(44); const defaultNavbarHeight = ref(44);
const defaultTitleSize = ref(16); const defaultTitleSize = ref(16);
const defaultIconSize = ref(24); const defaultIconSize = ref(24);
const navbarHeight = computed( const navbarHeight = computed(() => `${px2rpx(defaultNavbarHeight.value)}rpx`);
() => `${px2rpx(defaultNavbarHeight.value)}rpx`, const headHeight = computed(() => `${px2rpx((statusBarHeight || 0) + defaultNavbarHeight.value)}rpx`);
); const sideGap = computed(() => `${px2rpx(props.gap)}rpx`);
const headHeight = computed( const navbarBgColor = computed(() => props.bgColor || navigationBarBackgroundColor);
() => `${px2rpx((statusBarHeight || 0) + defaultNavbarHeight.value)}rpx`, const navbarTitle = computed(() => props.title || currentRoute?.style?.navigationBarTitleText || navigationBarTitleText);
); const navbarTitleColor = computed(() => props.titleColor || currentRoute?.style?.navigationBarTextStyle || navigationBarTextStyle);
const sideGap = computed(() => `${px2rpx(props.gap)}rpx`); const navbarTitleSize = computed(() => {
const navbarBgColor = computed(
() => props.bgColor || navigationBarBackgroundColor,
);
const navbarTitle = computed(
() =>
props.title ||
currentRoute?.style?.navigationBarTitleText ||
navigationBarTitleText,
);
const navbarTitleColor = computed(
() =>
props.titleColor ||
currentRoute?.style?.navigationBarTextStyle ||
navigationBarTextStyle,
);
const navbarTitleSize = computed(() => {
return `${px2rpx(defaultTitleSize.value) || props.titleSize}rpx`; return `${px2rpx(defaultTitleSize.value) || props.titleSize}rpx`;
}); });
const navbarLeftIconSize = computed(() => { const navbarLeftIconSize = computed(() => {
return `${px2rpx(defaultIconSize.value) || props.titleSize}`; return `${px2rpx(defaultIconSize.value) || props.titleSize}`;
}); });
const backShow = computed(() => { const backShow = computed(() => {
return currentPages.length > 1 && props.isBackShow; return currentPages.length > 1 && props.isBackShow;
}); });
const backHomeShow = computed(() => { const backHomeShow = computed(() => {
return !currentRoute?.meta?.tabBar && props.isHomeShow; return !currentRoute?.meta?.tabBar && props.isHomeShow;
}); });
const router = useRouter(); const router = useRouter();
const onBack = () => { const onBack = () => {
router.back(); router.back();
}; };
const onBackHome = () => { const onBackHome = () => {
router.pushTab(HOME_PAGE); router.pushTab(HOME_PAGE);
}; };
</script> </script>
<template> <template>
<view class="head-wrapper"> <view class="head-wrapper">
@ -85,49 +65,25 @@
<!-- 顶部状态栏 --> <!-- 顶部状态栏 -->
<view class="status-bar"></view> <view class="status-bar"></view>
<!-- navbar --> <!-- navbar -->
<view <view :class="['navbar-wrapper', '_u_flex', '_u_flex-nowrap', '_u_justify-between', '_u_items-center']">
:class="[ <view class="_u_flex _u_flex-nowrap _u_items-center _u_h-full _u_w3/10 _u_min-w3/10">
'navbar-wrapper',
'_u_flex',
'_u_flex-nowrap',
'_u_justify-between',
'_u_items-center',
]"
>
<view
class="_u_flex _u_flex-nowrap _u_items-center _u_h-full _u_w3/10 _u_min-w3/10"
>
<slot name="left"> <slot name="left">
<view class="_u_h-full _u_flex _u_items-center"> <view class="_u_h-full _u_flex _u_items-center">
<template v-if="backShow"> <template v-if="backShow">
<Iconify <Iconify @click="onBack" :size="navbarLeftIconSize" :color="navbarTitleColor" icon="i-humbleicons-chevron-left" />
@click="onBack"
:size="navbarLeftIconSize"
:color="navbarTitleColor"
icon="i-humbleicons-chevron-left"
/>
</template> </template>
<template v-if="backHomeShow"> <template v-if="backHomeShow">
<Iconify <Iconify @click="onBackHome" :size="navbarLeftIconSize" :color="navbarTitleColor" icon="i-iconoir-home-simple-door" />
@click="onBackHome"
:size="navbarLeftIconSize"
:color="navbarTitleColor"
icon="i-iconoir-home-simple-door"
/>
</template> </template>
</view> </view>
</slot> </slot>
</view> </view>
<view <view class="navbar__center _u_flex _u_flex-nowrap _u_justify-center _u_items-center _u_h-full _u_w2/5 _u_min-w2/5">
class="navbar__center _u_flex _u_flex-nowrap _u_justify-center _u_items-center _u_h-full _u_w2/5 _u_min-w2/5"
>
<slot> <slot>
<text>{{ navbarTitle }}</text> <text>{{ navbarTitle }}</text>
</slot> </slot>
</view> </view>
<view <view class="_u_flex _u_flex-nowrap _u_justify-end _u_items-center _u_h-full _u_w3/10 _u_min-w3/10">
class="_u_flex _u_flex-nowrap _u_justify-end _u_items-center _u_h-full _u_w3/10 _u_min-w3/10"
>
<slot name="right"></slot> <slot name="right"></slot>
</view> </view>
</view> </view>
@ -137,7 +93,7 @@
</view> </view>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.head-wrapper { .head-wrapper {
.page-head { .page-head {
background: v-bind(navbarBgColor); background: v-bind(navbarBgColor);
.status-bar { .status-bar {
@ -159,5 +115,5 @@
height: v-bind(headHeight); height: v-bind(headHeight);
min-height: v-bind(headHeight); min-height: v-bind(headHeight);
} }
} }
</style> </style>

6
src/components/Test/index.vue
View File

@ -1,12 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps({ const props = defineProps({
text: { text: {
type: String, type: String,
default: 'text', default: 'text',
}, },
}); });
const text = 'TEXT: ' + props.text; const text = 'TEXT: ' + props.text;
</script> </script>
<template> <template>
<view>{{ text }}</view> <view>{{ text }}</view>

7
src/enums/routerEnum.ts
View File

@ -6,12 +6,7 @@ export enum NAVIGATE_TYPE {
NAVIGATE_BACK = 'navigateBack', NAVIGATE_BACK = 'navigateBack',
} }
export const NAVIGATE_TYPE_LIST = [ export const NAVIGATE_TYPE_LIST = ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'];
'navigateTo',
'redirectTo',
'reLaunch',
'switchTab',
];
export const HOME_PAGE = '/pages/index/index'; export const HOME_PAGE = '/pages/index/index';
export const LOGIN_PAGE = '/pages/login/index'; export const LOGIN_PAGE = '/pages/login/index';

7
src/hooks/useGlobalStyle.ts
View File

@ -5,12 +5,7 @@ const { globalStyle } = pagesJson;
* 全局样式 * 全局样式
*/ */
export const useGlobalStyle = () => { export const useGlobalStyle = () => {
const { const { navigationBarTextStyle, navigationBarTitleText, navigationBarBackgroundColor, backgroundColor } = globalStyle;
navigationBarTextStyle,
navigationBarTitleText,
navigationBarBackgroundColor,
backgroundColor,
} = globalStyle;
return { return {
navigationBarTextStyle, navigationBarTextStyle,
navigationBarTitleText, navigationBarTitleText,

16
src/hooks/useSystem.ts
View File

@ -78,20 +78,8 @@ export const useSystem = () => {
cacheLocation, cacheLocation,
storage, storage,
} = uni.getSystemInfoSync(); } = uni.getSystemInfoSync();
const { const { top: safeAreaTop, bottom: safeAreaBottom, left: safeAreaLeft, right: safeAreaRight, height: safeAreaHeight, width: safeAreaWidth } = safeArea!;
top: safeAreaTop, const { top: safeAreaInsetsTop, bottom: safeAreaInsetsBottom, left: safeAreaInsetsLeft, right: safeAreaInsetsRight } = safeAreaInsets!;
bottom: safeAreaBottom,
left: safeAreaLeft,
right: safeAreaRight,
height: safeAreaHeight,
width: safeAreaWidth,
} = safeArea!;
const {
top: safeAreaInsetsTop,
bottom: safeAreaInsetsBottom,
left: safeAreaInsetsLeft,
right: safeAreaInsetsRight,
} = safeAreaInsets!;
return { return {
deviceId, deviceId,
deviceBrand, deviceBrand,

50
src/pages/about/index.vue
View File

@ -1,27 +1,27 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app'; import { onShow } from '@dcloudio/uni-app';
import BasicButton from '@/components/BasicButton/index.vue'; import BasicButton from '@/components/BasicButton/index.vue';
import AppProvider from '@/components/AppProvider/inedx.vue'; import AppProvider from '@/components/AppProvider/inedx.vue';
import { useAuthStore } from '@/state/modules/auth'; import { useAuthStore } from '@/state/modules/auth';
import { useRouter } from '@/hooks/router'; import { useRouter } from '@/hooks/router';
const authStore = useAuthStore(); const authStore = useAuthStore();
const isLogin = ref(false); const isLogin = ref(false);
const router = useRouter(); const router = useRouter();
onShow(() => { onShow(() => {
isLogin.value = authStore.isLogin; isLogin.value = authStore.isLogin;
}); });
const handleJump = (url: string) => { const handleJump = (url: string) => {
router.push(url); router.push(url);
}; };
// 登出 // 登出
const handleLoginOut = () => { const handleLoginOut = () => {
authStore.loginOut().then(() => { authStore.loginOut().then(() => {
isLogin.value = false; isLogin.value = false;
}); });
}; };
</script> </script>
<template> <template>
@ -33,25 +33,17 @@
</view> </view>
<view class="desc">{{ isLogin ? '测试' : '未登入' }}</view> <view class="desc">{{ isLogin ? '测试' : '未登入' }}</view>
</view> </view>
<view class="cell" <view class="cell"><BasicButton @click="handleJump('/pages/log/index?id=4345&title=log')">log</BasicButton></view>
><BasicButton @click="handleJump('/pages/log/index?id=4345&title=log')" <view class="cell" v-if="isLogin"><BasicButton @click="handleLoginOut">登出</BasicButton></view>
>log</BasicButton
></view
>
<view class="cell" v-if="isLogin"
><BasicButton @click="handleLoginOut">登出</BasicButton></view
>
<view class="cell" v-else> <view class="cell" v-else>
<BasicButton @click="handleJump('/pages/login/index')"> <BasicButton @click="handleJump('/pages/login/index')"> 登入 </BasicButton>
登入
</BasicButton>
</view> </view>
</view> </view>
</AppProvider> </AppProvider>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
padding: 96rpx 24rpx; padding: 96rpx 24rpx;
.head-wrap { .head-wrap {
display: flex; display: flex;
@ -78,5 +70,5 @@
margin-top: 60rpx; margin-top: 60rpx;
text-align: center; text-align: center;
} }
} }
</style> </style>

16
src/pages/demo/index.vue
View File

@ -1,12 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import BasicButton from '@/components/BasicButton/index.vue'; import BasicButton from '@/components/BasicButton/index.vue';
import AppProvider from '@/components/AppProvider/inedx.vue'; import AppProvider from '@/components/AppProvider/inedx.vue';
import { useRouter } from '@/hooks/router'; import { useRouter } from '@/hooks/router';
const router = useRouter(); const router = useRouter();
const jumpList1 = () => { const jumpList1 = () => {
router.push('/pagesA/list/test1/index?key=words&page=1&limit=15'); router.push('/pagesA/list/test1/index?key=words&page=1&limit=15');
}; };
</script> </script>
<template> <template>
@ -19,8 +19,8 @@
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
padding: 128rpx 0; padding: 128rpx 0;
text-align: center; text-align: center;
} }
</style> </style>

42
src/pages/index/index.vue
View File

@ -1,23 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import BasicButton from '@/components/BasicButton/index.vue'; import BasicButton from '@/components/BasicButton/index.vue';
import AppProvider from '@/components/AppProvider/inedx.vue'; import AppProvider from '@/components/AppProvider/inedx.vue';
import { useRouter } from '@/hooks/router'; import { useRouter } from '@/hooks/router';
import { CURRENT_PLATFORM, PLATFORMS } from '@/enums/platformEnum'; import { CURRENT_PLATFORM, PLATFORMS } from '@/enums/platformEnum';
import { judgePlatform } from '@/utils/platform'; import { judgePlatform } from '@/utils/platform';
import Iconify from '@/components/Iconify/index.vue'; import Iconify from '@/components/Iconify/index.vue';
const title = ref('uni-app vue3 ts --Vite'); const title = ref('uni-app vue3 ts --Vite');
const platform = CURRENT_PLATFORM; const platform = CURRENT_PLATFORM;
const isVue3 = judgePlatform(PLATFORMS.VUE3); const isVue3 = judgePlatform(PLATFORMS.VUE3);
const router = useRouter(); const router = useRouter();
const handleGetStarted = () => { const handleGetStarted = () => {
router.pushTab('/pages/demo/index'); router.pushTab('/pages/demo/index');
// router.push('/pages/log/index?id=4345&title=log'); // router.push('/pages/log/index?id=4345&title=log');
}; };
</script> </script>
<template> <template>
<AppProvider> <AppProvider>
@ -43,27 +43,27 @@
</AppProvider> </AppProvider>
</template> </template>
<style lang="scss"> <style lang="scss">
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.logo { .logo {
height: 200rpx; height: 200rpx;
width: 200rpx; width: 200rpx;
margin: 280rpx auto 50rpx; margin: 280rpx auto 50rpx;
} }
.text-area { .text-area {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 60rpx; margin-bottom: 60rpx;
} }
.title { .title {
font-size: 36rpx; font-size: 36rpx;
color: #8f8f94; color: #8f8f94;
} }
</style> </style>

6
src/pages/log/index.vue
View File

@ -3,11 +3,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'; import { onLoad } from '@dcloudio/uni-app';
onLoad(query => { onLoad((query) => {
console.log('log onLoad', query); console.log('log onLoad', query);
}); });
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

48
src/pages/login/index.vue
View File

@ -1,25 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'; import { onLoad } from '@dcloudio/uni-app';
import { useAuthStore } from '@/state/modules/auth'; import { useAuthStore } from '@/state/modules/auth';
import { Toast } from '@/utils/uniapi/prompt'; import { Toast } from '@/utils/uniapi/prompt';
import { useRouter } from '@/hooks/router'; import { useRouter } from '@/hooks/router';
const redirect = ref<string | undefined>(undefined); const redirect = ref<string | undefined>(undefined);
onLoad(query => { onLoad((query) => {
redirect.value = query.redirect redirect.value = query.redirect ? decodeURIComponent(query.redirect) : undefined;
? decodeURIComponent(query.redirect) });
: undefined;
});
const router = useRouter(); const router = useRouter();
const form = reactive({ const form = reactive({
email: 'uni-app@test.com', email: 'uni-app@test.com',
password: 'Vue3_Ts_Vite', password: 'Vue3_Ts_Vite',
}); });
const authStore = useAuthStore(); const authStore = useAuthStore();
const submit = (e: any) => { const submit = (e: any) => {
authStore.login(e.detail.value).then(() => { authStore.login(e.detail.value).then(() => {
Toast('登录成功', { duration: 1500 }); Toast('登录成功', { duration: 1500 });
setTimeout(() => { setTimeout(() => {
@ -30,7 +28,7 @@
router.pushTab('/pages/about/index'); router.pushTab('/pages/about/index');
}, 1500); }, 1500);
}); });
}; };
</script> </script>
<template> <template>
@ -40,26 +38,20 @@
<form class="form" @submit="submit"> <form class="form" @submit="submit">
<label class="form-item"> <label class="form-item">
<view class="form-label">邮箱:</view> <view class="form-label">邮箱:</view>
<view class="form-element" <view class="form-element"><input name="email" :value="form.email" /></view>
><input name="email" :value="form.email"
/></view>
</label> </label>
<label class="form-item"> <label class="form-item">
<view class="form-label">密码:</view> <view class="form-label">密码:</view>
<view class="form-element" <view class="form-element"><input type="password" name="password" :value="form.password" /></view>
><input type="password" name="password" :value="form.password"
/></view>
</label> </label>
<button form-type="submit" class="submit-btn" hover-class="none" <button form-type="submit" class="submit-btn" hover-class="none">登录</button>
>登录</button
>
</form> </form>
</view> </view>
</view> </view>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
margin: 0 auto; margin: 0 auto;
width: 80%; width: 80%;
.title { .title {
@ -95,5 +87,5 @@
} }
} }
} }
} }
</style> </style>

24
src/pages/notFound/404.vue
View File

@ -1,23 +1,23 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'; import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue'; import { ref } from 'vue';
import BasicButton from '@/components/BasicButton/index.vue'; import BasicButton from '@/components/BasicButton/index.vue';
import { useRouter } from '@/hooks/router'; import { useRouter } from '@/hooks/router';
const go = ref<string>(''); const go = ref<string>('');
const router = useRouter(); const router = useRouter();
const redirect = ref<string>(''); const redirect = ref<string>('');
onLoad(query => { onLoad((query) => {
go.value = query.go || ''; go.value = query.go || '';
redirect.value = query.redirect || ''; redirect.value = query.redirect || '';
}); });
/** /**
* 返回首页 * 返回首页
*/ */
const backHome = () => { const backHome = () => {
router.pushTab(redirect.value); router.pushTab(redirect.value);
}; };
</script> </script>
<template> <template>

14
src/pagesA/list/test1/index.vue
View File

@ -1,16 +1,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import BasicButton from '@/components/BasicButton/index.vue'; import BasicButton from '@/components/BasicButton/index.vue';
import { useRouter } from '@/hooks/router'; import { useRouter } from '@/hooks/router';
const router = useRouter(); const router = useRouter();
const jumpTest2 = () => { const jumpTest2 = () => {
router.push('/pagesA/list/test2/index?id=256'); router.push('/pagesA/list/test2/index?id=256');
}; };
</script> </script>
<template> <template>
<view class="_u_center"> Test1 </view> <view class="_u_center"> Test1 </view>
<view class="_u_center" <view class="_u_center"><BasicButton @click="jumpTest2">Test2 → </BasicButton></view>
><BasicButton @click="jumpTest2">Test2 → </BasicButton></view
>
</template> </template>
<style scoped></style> <style scoped></style>

10
src/pagesA/list/test2/index.vue
View File

@ -1,11 +1,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import BasicButton from '@/components/BasicButton/index.vue'; import BasicButton from '@/components/BasicButton/index.vue';
import { useRouter } from '@/hooks/router'; import { useRouter } from '@/hooks/router';
const router = useRouter(); const router = useRouter();
const jumpDetail = () => { const jumpDetail = () => {
router.push('/pagesB/detail/index?page=1&limit=20'); router.push('/pagesB/detail/index?page=1&limit=20');
}; };
</script> </script>
<template> <template>
<view> <view>

2
src/pagesB/detail/index.vue
View File

@ -1,3 +1,3 @@
<script lang="ts" setup></script> <script lang="ts" setup></script>
<template> Detail </template> <template>Detail</template>
<style scoped></style> <style scoped></style>

5
src/settings/encryptionSetting.ts
View File

@ -2,10 +2,7 @@ import { getEnvValue, getPkgVersion, isDevMode } from '@/utils/env';
// System default cache time, in seconds // System default cache time, in seconds
export const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7; export const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
const PREFIX = const PREFIX = getEnvValue<string>('VITE_APP_CACHE_PREFIX') || getEnvValue<string>('VITE_APP_TITLE') || 'UNI_APP_VUE3_TS';
getEnvValue<string>('VITE_APP_CACHE_PREFIX') ||
getEnvValue<string>('VITE_APP_TITLE') ||
'UNI_APP_VUE3_TS';
export const DEFAULT_PREFIX_KEY = `${PREFIX}${getPkgVersion()}`; export const DEFAULT_PREFIX_KEY = `${PREFIX}${getPkgVersion()}`;
// aes encryption key // aes encryption key

2
src/state/modules/auth.ts
View File

@ -13,7 +13,7 @@ export const useAuthStore = defineStore({
token: undefined, token: undefined,
}), }),
getters: { getters: {
getToken: state => state.token, getToken: (state) => state.token,
isLogin: (state): boolean => !!state.token, isLogin: (state): boolean => !!state.token,
}, },
actions: { actions: {

2
src/types/router/route.d.ts vendored
View File

@ -22,7 +22,7 @@ export interface RouteLocationNormalized {
/* 当前页面栈的实例 */ /* 当前页面栈的实例 */
currentPages: Page.PageInstance<AnyObject, {}>[]; currentPages: Page.PageInstance<AnyObject, {}>[];
/* 当前页面的实例 */ /* 当前页面的实例 */
currentPage: Page.PageInstance; currentPage: Page.PageInstance | undefined;
/* 当前页面在pages.json中的配置 */ /* 当前页面在pages.json中的配置 */
currentRoute?: Route; currentRoute?: Route;
/* 当前页面的path */ /* 当前页面的path */

13
src/utils/cache/index.ts vendored
View File

@ -1,10 +1,5 @@
import { createStorage, CreateStorageParams } from './storageCache'; import { createStorage, CreateStorageParams } from './storageCache';
import { import { cacheCipher, DEFAULT_CACHE_TIME, DEFAULT_PREFIX_KEY, enableStorageEncryption } from '@/settings/encryptionSetting';
cacheCipher,
DEFAULT_CACHE_TIME,
DEFAULT_PREFIX_KEY,
enableStorageEncryption,
} from '@/settings/encryptionSetting';
const options: Partial<CreateStorageParams> = { const options: Partial<CreateStorageParams> = {
prefixKey: DEFAULT_PREFIX_KEY, prefixKey: DEFAULT_PREFIX_KEY,
@ -16,11 +11,7 @@ const options: Partial<CreateStorageParams> = {
export const storage = createStorage(options); export const storage = createStorage(options);
export function setCache( export function setCache(key: string, value: any, expire?: number | null): void {
key: string,
value: any,
expire?: number | null,
): void {
storage.set(key, value, expire); storage.set(key, value, expire);
} }

14
src/utils/cache/storageCache.ts vendored
View File

@ -15,7 +15,7 @@ export const createStorage = ({
timeout = null, timeout = null,
hasEncrypt = true, hasEncrypt = true,
}: Partial<CreateStorageParams> = {}) => { }: Partial<CreateStorageParams> = {}) => {
if (hasEncrypt && [key.length, iv.length].some(item => item !== 16)) { if (hasEncrypt && [key.length, iv.length].some((item) => item !== 16)) {
throw new Error('When hasEncrypt is true, the key or iv must be 16 bits!'); throw new Error('When hasEncrypt is true, the key or iv must be 16 bits!');
} }
@ -60,13 +60,9 @@ export const createStorage = ({
const stringData = JSON.stringify({ const stringData = JSON.stringify({
value, value,
time: Date.now(), time: Date.now(),
expire: !isNullOrUnDef(expire) expire: !isNullOrUnDef(expire) ? new Date().getTime() + expire * 1000 : null,
? new Date().getTime() + expire * 1000
: null,
}); });
const stringifyValue = this.hasEncrypt const stringifyValue = this.hasEncrypt ? this.encryption.encryptByAES(stringData) : stringData;
? this.encryption.encryptByAES(stringData)
: stringData;
uni.setStorageSync(this.getKey(key), stringifyValue); uni.setStorageSync(this.getKey(key), stringifyValue);
} catch (err) { } catch (err) {
throw new Error(`setStorageSync error: ${err}`); throw new Error(`setStorageSync error: ${err}`);
@ -84,9 +80,7 @@ export const createStorage = ({
if (!val) return def; if (!val) return def;
try { try {
const decVal = this.hasEncrypt const decVal = this.hasEncrypt ? this.encryption.decryptByAES(val) : val;
? this.encryption.decryptByAES(val)
: val;
const data = JSON.parse(decVal); const data = JSON.parse(decVal);
const { value, expire } = data; const { value, expire } = data;
if (isNullOrUnDef(expire) || expire < new Date().getTime()) { if (isNullOrUnDef(expire) || expire < new Date().getTime()) {

10
src/utils/http/index.ts
View File

@ -26,7 +26,7 @@ const request = createRequest();
* 请求拦截器 * 请求拦截器
*/ */
request.interceptors.request.use( request.interceptors.request.use(
options => { (options) => {
if (options.custom?.auth) { if (options.custom?.auth) {
const authStore = useAuthStore(); const authStore = useAuthStore();
if (!authStore.isLogin) { if (!authStore.isLogin) {
@ -40,14 +40,14 @@ request.interceptors.request.use(
} }
return options; return options;
}, },
options => Promise.reject(options), (options) => Promise.reject(options)
); );
/** /**
* 响应拦截器 * 响应拦截器
*/ */
request.interceptors.response.use( request.interceptors.response.use(
async response => { async (response) => {
const { data: resData } = response; const { data: resData } = response;
const { code, message } = resData; const { code, message } = resData;
if (code === ResultEnum.SUCCESS) { if (code === ResultEnum.SUCCESS) {
@ -56,10 +56,10 @@ request.interceptors.response.use(
Toast(message); Toast(message);
return Promise.reject(resData); return Promise.reject(resData);
}, },
response => (response) =>
// 请求错误做点什么。可以使用async await 做异步操作 // 请求错误做点什么。可以使用async await 做异步操作
// error('Request Error!'); // error('Request Error!');
Promise.reject(response), Promise.reject(response)
); );
export { request }; export { request };

4
src/utils/index.ts
View File

@ -8,9 +8,7 @@ import { isObject } from '@/utils/is';
export function deepMerge<T = any>(src: any = {}, target: any = {}): T { export function deepMerge<T = any>(src: any = {}, target: any = {}): T {
let key: string; let key: string;
for (key in target) { for (key in target) {
src[key] = isObject(src[key]) src[key] = isObject(src[key]) ? deepMerge(src[key], target[key]) : (src[key] = target[key]);
? deepMerge(src[key], target[key])
: (src[key] = target[key]);
} }
return src; return src;
} }

5
src/utils/interceptors/index.ts
View File

@ -1,7 +1,4 @@
import { import { routerInterceptor, routerRemoveInterceptor } from '@/utils/router/interceptor';
routerInterceptor,
routerRemoveInterceptor,
} from '@/utils/router/interceptor';
export function setupInterceptors() { export function setupInterceptors() {
routerInterceptor(); routerInterceptor();

7
src/utils/is.ts
View File

@ -53,12 +53,7 @@ export function isNumber(val: unknown): val is number {
} }
export function isPromise<T = any>(val: unknown): val is Promise<T> { export function isPromise<T = any>(val: unknown): val is Promise<T> {
return ( return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch);
is(val, 'Promise') &&
isObject(val) &&
isFunction(val.then) &&
isFunction(val.catch)
);
} }
export function isString(val: unknown): val is string { export function isString(val: unknown): val is string {

12
src/utils/router/interceptor.ts
View File

@ -1,8 +1,4 @@
import { import { HOME_PAGE, NAVIGATE_TYPE_LIST, NOT_FOUND_PAGE } from '@/enums/routerEnum';
HOME_PAGE,
NAVIGATE_TYPE_LIST,
NOT_FOUND_PAGE,
} from '@/enums/routerEnum';
import { useAuthStore } from '@/state/modules/auth'; import { useAuthStore } from '@/state/modules/auth';
import { isIgnoreAuth, jumpLogin } from '@/utils/router/constant'; import { isIgnoreAuth, jumpLogin } from '@/utils/router/constant';
@ -32,7 +28,7 @@ export function routerBeforeEach(path: string): boolean {
function addInterceptor(routerName: string) { function addInterceptor(routerName: string) {
uni.addInterceptor(routerName, { uni.addInterceptor(routerName, {
// 跳转前拦截 // 跳转前拦截
invoke: args => { invoke: (args) => {
const flag = routerBeforeEach(args.url); const flag = routerBeforeEach(args.url);
return flag ? args : false; return flag ? args : false;
}, },
@ -64,7 +60,7 @@ function addInterceptor(routerName: string) {
* 添加路由拦截器 * 添加路由拦截器
*/ */
export function routerInterceptor() { export function routerInterceptor() {
NAVIGATE_TYPE_LIST.forEach(item => { NAVIGATE_TYPE_LIST.forEach((item) => {
addInterceptor(item); addInterceptor(item);
}); });
} }
@ -73,7 +69,7 @@ export function routerInterceptor() {
* 移除路由拦截器 * 移除路由拦截器
*/ */
export function routerRemoveInterceptor() { export function routerRemoveInterceptor() {
NAVIGATE_TYPE_LIST.forEach(item => { NAVIGATE_TYPE_LIST.forEach((item) => {
uni.removeInterceptor(item); uni.removeInterceptor(item);
}); });
} }

8
src/utils/router/routes.ts
View File

@ -7,14 +7,14 @@ const { pages, subPackages, tabBar } = pagesJson;
// 将pages.json转换成Map对象,path为key // 将pages.json转换成Map对象,path为key
const pagesMap = new Map<string, Route>(); const pagesMap = new Map<string, Route>();
pages.forEach(page => { pages.forEach((page) => {
pagesMap.set(page.path, page as Route); pagesMap.set(page.path, page as Route);
}); });
if (Array.isArray(subPackages) && subPackages.length) { if (Array.isArray(subPackages) && subPackages.length) {
subPackages.forEach(el => { subPackages.forEach((el) => {
const rootPath = el.root; const rootPath = el.root;
el.pages.forEach(page => { el.pages.forEach((page) => {
page.path = `${rootPath}/${page.path}`; page.path = `${rootPath}/${page.path}`;
pagesMap.set(page.path, page as Route); pagesMap.set(page.path, page as Route);
}); });
@ -24,7 +24,7 @@ if (Array.isArray(subPackages) && subPackages.length) {
if (tabBar) { if (tabBar) {
const tabBarList = tabBar.list; const tabBarList = tabBar.list;
if (Array.isArray(tabBarList)) { if (Array.isArray(tabBarList)) {
tabBarList.forEach(el => { tabBarList.forEach((el) => {
if (pagesMap.has(el.pagePath)) { if (pagesMap.has(el.pagePath)) {
const page = pagesMap.get(el.pagePath); const page = pagesMap.get(el.pagePath);
const meta = page?.meta || {}; const meta = page?.meta || {};

8
src/utils/uniapi/index.ts
View File

@ -9,10 +9,10 @@ export const SetClipboardData = (data: string, showToast = true) =>
uni.setClipboardData({ uni.setClipboardData({
data, data,
showToast, showToast,
success: res => { success: (res) => {
resolve(res); resolve(res);
}, },
fail: err => { fail: (err) => {
reject(err); reject(err);
}, },
}); });
@ -25,10 +25,10 @@ export const SetClipboardData = (data: string, showToast = true) =>
export const GetClipboardData = () => export const GetClipboardData = () =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
uni.getClipboardData({ uni.getClipboardData({
success: res => { success: (res) => {
resolve(res); resolve(res);
}, },
fail: err => { fail: (err) => {
reject(err); reject(err);
}, },
}); });

18
src/utils/uniapi/prompt.ts
View File

@ -9,10 +9,7 @@
* @param options * @param options
* @constructor * @constructor
*/ */
export function Toast( export function Toast(title: string, options?: Partial<UniApp.ShowToastOptions>) {
title: string,
options?: Partial<UniApp.ShowToastOptions>,
) {
uni.showToast({ uni.showToast({
title, title,
duration: 1500, duration: 1500,
@ -35,10 +32,7 @@ export function HideToast() {
* @param options * @param options
* @constructor * @constructor
*/ */
export function Loading( export function Loading(title: string, options?: Partial<UniApp.ShowLoadingOptions>) {
title: string,
options?: Partial<UniApp.ShowLoadingOptions>,
) {
uni.showLoading({ uni.showLoading({
title, title,
mask: true, mask: true,
@ -62,10 +56,10 @@ export function Modal(options: UniApp.ShowModalOptions) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
uni.showModal({ uni.showModal({
...options, ...options,
success: res => { success: (res) => {
resolve(res); resolve(res);
}, },
fail: res => { fail: (res) => {
reject(res); reject(res);
}, },
}); });
@ -81,10 +75,10 @@ export function ActionSheet(options: UniApp.ShowActionSheetOptions) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
uni.showActionSheet({ uni.showActionSheet({
...options, ...options,
success: res => { success: (res) => {
resolve(res); resolve(res);
}, },
fail: res => { fail: (res) => {
reject(res); reject(res);
}, },
}); });