first

pages/index2/index2.js

@@ -0,0 +1,83 @@
+Page({
+  data: {
+    playbackRate: 5.0,  // 默认1倍速
+    animationFrame: null // 用于保存定时器ID
+  },
+  
+  onReady() {
+    // 获取Canvas上下文
+    const query = wx.createSelectorQuery()
+    
+    // 获取Canvas宽高
+    query.select('.starry-canvas')
+      .fields({ node: true, size: true })
+      .exec((res) => {
+        const canvas = res[0].node
+        const ctx = canvas.getContext('2d')
+        
+        const dpr = wx.getSystemInfoSync().pixelRatio
+        canvas.width = res[0].width * dpr
+        canvas.height = res[0].height * dpr
+        ctx.scale(dpr, dpr)
+        
+        // 绘制星空
+        this.drawStars(canvas, ctx)
+      })
+  },
+  
+  // 绘制动态星空
+  drawStars(canvas, ctx) {
+    const width = canvas.width / wx.getSystemInfoSync().pixelRatio
+    const height = canvas.height / wx.getSystemInfoSync().pixelRatio
+    
+    // 创建星星数组
+    const stars = []
+    const starCount = 200 // 星星数量
+    
+    // 初始化星星
+    for (let i = 0; i < starCount; i++) {
+      stars.push({
+        x: Math.random() * width,
+        y: Math.random() * height,
+        radius: Math.random() * 1.5 + 0.5, // 星星大小
+        opacity: Math.random(), // 透明度
+        speed: Math.random() * 0.5 + 0.1 // 移动速度
+      })
+    }
+    
+    // 动画循环 - 使用setInterval替代requestAnimationFrame
+    const animate = () => {
+      // 清空画布
+      ctx.clearRect(0, 0, width, height)
+      
+      // 绘制每颗星星
+      stars.forEach(star => {
+        // 更新星星位置（向上移动）
+        star.y -= star.speed
+        if (star.y < 0) {
+          star.y = height // 星星移出屏幕后重新从底部出现
+        }
+        
+        // 随机闪烁效果
+        star.opacity += (Math.random() - 0.5) * 0.02
+        star.opacity = Math.max(0.1, Math.min(1, star.opacity))
+        
+        // 绘制星星
+        ctx.beginPath()
+        ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`
+        ctx.fill()
+      })
+    }
+    
+    // 开始动画，每30ms更新一次（约33fps）
+    this.data.animationFrame = setInterval(animate, 30)
+  },
+  
+  // 页面卸载时清除定时器，避免内存泄漏
+  onUnload() {
+    if (this.data.animationFrame) {
+      clearInterval(this.data.animationFrame)
+    }
+  }
+})

pages/index2/index2.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "navigation-bar": "/components/navigation-bar/navigation-bar"
+  }
+}

pages/index2/index2.wxml

@@ -0,0 +1,15 @@
+<view class="page-container">
+  <video id="bg-video"
+         src="http://exam.yinyue.click/sky.mp4"  
+         loop
+         muted
+         autoplay
+         object-fit="cover"
+         controls="{{false}}">
+         playback-rate="{{playbackRate}}">
+  </video>
+  <!-- 这里可以添加首页其他内容，比如标题、按钮等 -->
+  <view class="content">
+    <text class="title">欢迎来到我的梦境</text>
+  </view>
+</view>

pages/index2/index2.wxss

@@ -0,0 +1,31 @@
+.page-container {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+#bg-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: white;
+  text-align: center;
+}
+
+.title {
+  font-size: 64rpx;
+  font-weight: bold;
+}