默认首页是视频星空
This commit is contained in:
7
app.json
7
app.json
@@ -1,7 +1,6 @@
|
||||
{
|
||||
"pages": [
|
||||
"pages/index/index",
|
||||
"pages/index2/index2",
|
||||
"pages/record/record",
|
||||
"pages/detail/detail",
|
||||
"pages/history/history"
|
||||
@@ -23,12 +22,6 @@
|
||||
"iconPath": "images/home.png",
|
||||
"selectedIconPath": "images/home-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/index2/index2",
|
||||
"text": "首页2",
|
||||
"iconPath": "images/home.png",
|
||||
"selectedIconPath": "images/home-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/record/record",
|
||||
"text": "记录",
|
||||
|
||||
@@ -1,82 +1,11 @@
|
||||
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)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<!-- 动态星空背景 -->
|
||||
<canvas
|
||||
class="starry-canvas"
|
||||
type="2d"
|
||||
canvas-id="starrySky"
|
||||
></canvas>
|
||||
|
||||
<!-- 前景内容 -->
|
||||
<view class="content">
|
||||
<text class="title">梦之笺</text>
|
||||
<text class="subtitle">记录你的梦</text>
|
||||
<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>
|
||||
|
||||
@@ -1,34 +1,31 @@
|
||||
.starry-canvas {
|
||||
.page-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#bg-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #0a0a1a; /* 深蓝色夜空 */
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
padding: 20rpx;
|
||||
height: 100%;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 60rpx;
|
||||
font-size: 64rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 32rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
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)
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
<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>
|
||||
@@ -1,31 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user