hookehuyr

feat(StarryBackground): 根据微信移动端调整星星和流星参数

针对微信移动端优化性能,调整星星数量、移动速度和流星效果参数
...@@ -4,6 +4,13 @@ ...@@ -4,6 +4,13 @@
4 </div> 4 </div>
5 </template> 5 </template>
6 6
7 +<script>
8 +import { wxInfo } from '@/utils/tools';
9 +
10 +const { isMobile, isWeiXin } = wxInfo();
11 +const isWxMobile = isMobile && isWeiXin;
12 +</script>
13 +
7 <script setup> 14 <script setup>
8 import { ref, onMounted, onUnmounted, computed } from 'vue'; 15 import { ref, onMounted, onUnmounted, computed } from 'vue';
9 16
...@@ -21,7 +28,7 @@ const props = defineProps({ ...@@ -21,7 +28,7 @@ const props = defineProps({
21 // 星星数量 28 // 星星数量
22 starCount: { 29 starCount: {
23 type: Number, 30 type: Number,
24 - default: 500 31 + default: isWxMobile ? 800 : 800
25 }, 32 },
26 // 星星颜色 (RGBA 前缀,例如 '255,255,255') 33 // 星星颜色 (RGBA 前缀,例如 '255,255,255')
27 starColor: { 34 starColor: {
...@@ -31,22 +38,22 @@ const props = defineProps({ ...@@ -31,22 +38,22 @@ const props = defineProps({
31 // 星星移动速度系数 (值越大移动越快) 38 // 星星移动速度系数 (值越大移动越快)
32 starSpeed: { 39 starSpeed: {
33 type: Number, 40 type: Number,
34 - default: 1 41 + default: isWxMobile ? 1 : 0.1
35 }, 42 },
36 // 流星速度 - 水平分量 (负值向左,正值向右) 43 // 流星速度 - 水平分量 (负值向左,正值向右)
37 meteorVx: { 44 meteorVx: {
38 type: Number, 45 type: Number,
39 - default: -5 46 + default: isWxMobile ? -10 : -2
40 }, 47 },
41 // 流星速度 - 垂直分量 (正值向下) 48 // 流星速度 - 垂直分量 (正值向下)
42 meteorVy: { 49 meteorVy: {
43 type: Number, 50 type: Number,
44 - default: 5 51 + default: isWxMobile ? 10 : 2
45 }, 52 },
46 // 流星拖尾长度系数 (值越大尾巴越长) 53 // 流星拖尾长度系数 (值越大尾巴越长)
47 meteorTrail: { 54 meteorTrail: {
48 type: Number, 55 type: Number,
49 - default: 5 56 + default: isWxMobile ? 4 : 10
50 } 57 }
51 }); 58 });
52 59
......