gouki/lunar-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

refactor(wish-tree): 参考 wishing-tree-pages 重写许愿树

Browse Source 
- 使用精美许愿树 PNG 图片作为背景
- 许愿标签用 CSS 动画实现摇摆效果
- 添加萤火虫和花瓣氛围动画
- 预设树冠挂载点，标签位置更自然
- 深色主题 + 金色/红色/绿色标签
- 边缘暗角让树从中心发光
- 最近心愿横向滚动列表
This commit is contained in:
gouki
2026-08-08 16:49:57 +00:00
parent 0bd92a43bf
commit 81cfe76e2b
5 changed files with 488 additions and 799 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mini/images/wish-tree.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

mini/pages/wish-tree/wish-tree.js
+141 -727
View File
@@ -1,17 +1,55 @@
const { request } = require('../../utils/request.js');
// 许愿树配置
const TREE_CONFIG = {
name: '祈福许愿树',
desc: '许下美好愿望，祈福平安顺遂',
type: 'pine',
// 预设的树冠挂载点（百分比坐标）
const CANOPY_SLOTS = [
{ x: 16, y: 34 },
{ x: 27, y: 21 },
{ x: 39, y: 14 },
{ x: 52, y: 12 },
{ x: 63, y: 18 },
{ x: 74, y: 26 },
{ x: 84, y: 38 },
{ x: 12, y: 50 },
{ x: 23, y: 46 },
{ x: 34, y: 40 },
{ x: 66, y: 40 },
{ x: 78, y: 50 },
{ x: 88, y: 30 },
{ x: 45, y: 30 },
];
// 标签颜色配置
const TAG_COLORS = {
amber: {
color: '#ffd700',
bgColor: 'rgba(255, 215, 0, 0.9)',
borderColor: 'rgba(255, 215, 0, 0.6)',
shadowColor: 'rgba(255, 215, 0, 0.4)',
},
red: {
color: '#ff6b6b',
bgColor: 'rgba(255, 107, 107, 0.9)',
borderColor: 'rgba(255, 107, 107, 0.6)',
shadowColor: 'rgba(255, 107, 107, 0.4)',
},
jade: {
color: '#51cf66',
bgColor: 'rgba(81, 207, 102, 0.9)',
borderColor: 'rgba(81, 207, 102, 0.6)',
shadowColor: 'rgba(81, 207, 102, 0.4)',
},
};
// 生成伪随机数（用于萤火虫和花瓣位置）
function seeded(i, salt) {
const v = Math.sin((i + 1) * 12.9898 + salt * 78.233) * 43758.5453;
return v - Math.floor(v);
}
Page({
data: {
treeName: TREE_CONFIG.name,
treeDesc: TREE_CONFIG.desc,
wishes: [],
recentWishes: [],
loading: true,
showCreateModal: false,
wishContent: '',
@@ -20,26 +58,14 @@ Page({
maxPaidLength: 100,
products: [],
selectedProduct: null,
micEnabled: false,
windLevel: 0,
fireflies: [],
petals: [],
},
onLoad() {
this.initAmbiance();
this.loadWishes();
this.loadProducts();
this.initSensors();
},
onReady() {
this.initWebGL();
},
onUnload() {
this.stopAnimation();
this.stopSensors();
if (this.renderer) {
this.renderer.dispose();
}
},
onPullDownRefresh() {
@@ -48,709 +74,32 @@ Page({
});
},
// 初始化 WebGL
initWebGL() {
const query = wx.createSelectorQuery().in(this);
query.select('#webgl-canvas')
.node()
.exec((res) => {
if (!res || !res[0] || !res[0].node) {
console.error('Canvas 初始化失败');
return;
}
const canvas = res[0].node;
this.canvas = canvas;
// 获取系统信息
const systemInfo = wx.getSystemInfoSync();
const dpr = systemInfo.pixelRatio;
// 设置画布尺寸
canvas.width = systemInfo.windowWidth * dpr;
canvas.height = systemInfo.windowHeight * dpr;
this.width = canvas.width;
this.height = canvas.height;
this.dpr = dpr;
// 初始化 Three.js 场景
this.initThreeScene();
// 开始动画
this.startAnimation();
// 初始化氛围效果
initAmbiance() {
// 萤火虫
const fireflies = [];
for (let i = 0; i < 22; i++) {
fireflies.push({
left: seeded(i, 1) * 100,
top: seeded(i, 2) * 100,
size: 2 + seeded(i, 3) * 4,
duration: 2.5 + seeded(i, 4) * 3.5,
delay: seeded(i, 5) * 4,
});
},
// 初始化 Three.js 场景
initThreeScene() {
const canvas = this.canvas;
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL 不支持');
return;
}
this.gl = gl;
// 手动创建 Three.js 核心对象
// 由于小程序限制，我们使用原生 WebGL API
// 设置视口
gl.viewport(0, 0, this.width, this.height);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
// 创建着色器程序
this.createShaderProgram();
// 创建树的几何体
this.createTreeGeometry();
// 创建丝带几何体
this.createRibbonGeometry();
// 初始化相机
this.camera = {
position: [0, 2, 8],
target: [0, 3, 0],
up: [0, 1, 0],
fov: 45,
aspect: this.width / this.height,
near: 0.1,
far: 100,
};
// 初始化光照
this.lights = {
ambient: { color: [0.3, 0.3, 0.4], intensity: 0.5 },
directional: {
color: [1, 0.95, 0.8],
intensity: 0.8,
direction: [0.5, 1, 0.5],
},
point: {
color: [1, 0.8, 0.4],
intensity: 0.5,
position: [0, 5, 2],
},
};
// 动画状态
this.animationState = {
time: 0,
windLevel: 0,
rotation: 0,
};
},
// 创建着色器程序
createShaderProgram() {
const gl = this.gl;
// 顶点着色器
const vsSource = `
attribute vec3 aPosition;
attribute vec3 aNormal;
attribute vec2 aTexCoord;
attribute vec3 aColor;
uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;
uniform mat3 uNormalMatrix;
varying vec3 vNormal;
varying vec3 vPosition;
varying vec2 vTexCoord;
varying vec3 vColor;
void main() {
vec4 worldPosition = uModelMatrix * vec4(aPosition, 1.0);
vPosition = worldPosition.xyz;
vNormal = uNormalMatrix * aNormal;
vTexCoord = aTexCoord;
vColor = aColor;
gl_Position = uProjectionMatrix * uViewMatrix * worldPosition;
}
`;
// 片段着色器
const fsSource = `
precision mediump float;
varying vec3 vNormal;
varying vec3 vPosition;
varying vec2 vTexCoord;
varying vec3 vColor;
uniform vec3 uAmbientLight;
uniform vec3 uDirectionalLightColor;
uniform vec3 uDirectionalLightDirection;
uniform vec3 uPointLightColor;
uniform vec3 uPointLightPosition;
uniform vec3 uCameraPosition;
uniform float uTime;
void main() {
vec3 normal = normalize(vNormal);
vec3 viewDir = normalize(uCameraPosition - vPosition);
// 环境光
vec3 ambient = uAmbientLight * vColor;
// 漫反射
float diff = max(dot(normal, uDirectionalLightDirection), 0.0);
vec3 diffuse = uDirectionalLightColor * diff * vColor;
// 点光源
vec3 lightDir = normalize(uPointLightPosition - vPosition);
float pointDiff = max(dot(normal, lightDir), 0.0);
float distance = length(uPointLightPosition - vPosition);
float attenuation = 1.0 / (1.0 + 0.05 * distance + 0.01 * distance * distance);
vec3 pointLight = uPointLightColor * pointDiff * attenuation * vColor;
// 高光
vec3 reflectDir = reflect(-uDirectionalLightDirection, normal);
float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32.0);
vec3 specular = uDirectionalLightColor * spec * 0.3;
// 发光效果（许愿树特殊效果）
float glow = sin(uTime * 2.0 + vPosition.y * 3.0) * 0.5 + 0.5;
vec3 glowColor = vec3(1.0, 0.9, 0.5) * glow * 0.2;
vec3 result = ambient + diffuse + pointLight + specular + glowColor;
gl_FragColor = vec4(result, 1.0);
}
`;
// 编译着色器
const vertexShader = this.compileShader(gl.VERTEX_SHADER, vsSource);
const fragmentShader = this.compileShader(gl.FRAGMENT_SHADER, fsSource);
// 创建程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('着色器程序链接失败:', gl.getProgramInfoLog(program));
return;
// 花瓣
const petals = [];
for (let i = 0; i < 10; i++) {
petals.push({
left: seeded(i, 6) * 100,
size: 5 + seeded(i, 7) * 6,
duration: 10 + seeded(i, 8) * 8,
delay: seeded(i, 9) * 12,
});
}
this.program = program;
gl.useProgram(program);
// 获取属性位置
this.attribLocations = {
position: gl.getAttribLocation(program, 'aPosition'),
normal: gl.getAttribLocation(program, 'aNormal'),
texCoord: gl.getAttribLocation(program, 'aTexCoord'),
color: gl.getAttribLocation(program, 'aColor'),
};
// 获取 uniform 位置
this.uniformLocations = {
modelMatrix: gl.getUniformLocation(program, 'uModelMatrix'),
viewMatrix: gl.getUniformLocation(program, 'uViewMatrix'),
projectionMatrix: gl.getUniformLocation(program, 'uProjectionMatrix'),
normalMatrix: gl.getUniformLocation(program, 'uNormalMatrix'),
ambientLight: gl.getUniformLocation(program, 'uAmbientLight'),
directionalLightColor: gl.getUniformLocation(program, 'uDirectionalLightColor'),
directionalLightDirection: gl.getUniformLocation(program, 'uDirectionalLightDirection'),
pointLightColor: gl.getUniformLocation(program, 'uPointLightColor'),
pointLightPosition: gl.getUniformLocation(program, 'uPointLightPosition'),
cameraPosition: gl.getUniformLocation(program, 'uCameraPosition'),
time: gl.getUniformLocation(program, 'uTime'),
};
},
// 编译着色器
compileShader(type, source) {
const gl = this.gl;
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('着色器编译失败:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
},
// 创建树的几何体
createTreeGeometry() {
// 树干 - 使用圆柱体变形
const trunkSegments = 16;
const trunkHeight = 4;
const trunkRadiusBottom = 0.4;
const trunkRadiusTop = 0.15;
const trunkVertices = [];
const trunkNormals = [];
const trunkColors = [];
const trunkIndices = [];
// 生成树干顶点
for (let i = 0; i <= trunkSegments; i++) {
const t = i / trunkSegments;
const y = t * trunkHeight;
const radius = trunkRadiusBottom + (trunkRadiusTop - trunkRadiusBottom) * t;
// 添加扭曲效果
const twist = t * 2;
const offsetX = Math.sin(twist) * 0.1 * t;
const offsetZ = Math.cos(twist) * 0.1 * t;
for (let j = 0; j <= trunkSegments; j++) {
const angle = (j / trunkSegments) * Math.PI * 2;
const x = Math.cos(angle) * radius + offsetX;
const z = Math.sin(angle) * radius + offsetZ;
trunkVertices.push(x, y, z);
// 法线
const nx = Math.cos(angle);
const nz = Math.sin(angle);
trunkNormals.push(nx, 0, nz);
// 颜色 - 树干棕色
const shade = 0.3 + Math.random() * 0.1;
trunkColors.push(shade, shade * 0.6, shade * 0.3);
}
}
// 生成树干索引
for (let i = 0; i < trunkSegments; i++) {
for (let j = 0; j < trunkSegments; j++) {
const a = i * (trunkSegments + 1) + j;
const b = a + trunkSegments + 1;
trunkIndices.push(a, b, a + 1);
trunkIndices.push(b, b + 1, a + 1);
}
}
this.trunkGeometry = {
vertices: new Float32Array(trunkVertices),
normals: new Float32Array(trunkNormals),
colors: new Float32Array(trunkColors),
indices: new Uint16Array(trunkIndices),
};
// 树冠 - 使用多个球体变形
this.crownGeometry = this.createCrownGeometry();
// 创建缓冲区
this.createBuffers();
},
// 创建树冠几何体
createCrownGeometry() {
const crownLayers = 5;
const segments = 16;
const vertices = [];
const normals = [];
const colors = [];
const indices = [];
let vertexOffset = 0;
for (let layer = 0; layer < crownLayers; layer++) {
const layerT = layer / crownLayers;
const layerY = 3 + layer * 0.8;
const layerRadius = 2.5 - layer * 0.4;
const layerHeight = 1.2;
// 每层树冠是一个变形的球体
for (let i = 0; i <= segments; i++) {
const t = i / segments;
const phi = t * Math.PI;
for (let j = 0; j <= segments; j++) {
const theta = (j / segments) * Math.PI * 2;
// 基础球体坐标
let x = layerRadius * Math.sin(phi) * Math.cos(theta);
let y = layerY + layerHeight * Math.cos(phi);
let z = layerRadius * Math.sin(phi) * Math.sin(theta);
// 添加噪声使树冠更自然
const noise = Math.sin(theta * 5 + layer) * 0.2 + Math.cos(phi * 3) * 0.15;
x += noise * Math.cos(theta);
z += noise * Math.sin(theta);
y += Math.sin(theta * 3 + layer * 2) * 0.1;
vertices.push(x, y, z);
// 法线
const nx = Math.sin(phi) * Math.cos(theta);
const ny = Math.cos(phi);
const nz = Math.sin(phi) * Math.sin(theta);
normals.push(nx, ny, nz);
// 颜色 - 绿色渐变
const green = 0.4 + layerT * 0.3 + Math.random() * 0.1;
colors.push(0.1, green, 0.15);
}
}
// 生成索引
for (let i = 0; i < segments; i++) {
for (let j = 0; j < segments; j++) {
const a = vertexOffset + i * (segments + 1) + j;
const b = a + segments + 1;
indices.push(a, b, a + 1);
indices.push(b, b + 1, a + 1);
}
}
vertexOffset += (segments + 1) * (segments + 1);
}
return {
vertices: new Float32Array(vertices),
normals: new Float32Array(normals),
colors: new Float32Array(colors),
indices: new Uint16Array(indices),
};
},
// 创建丝带几何体
createRibbonGeometry() {
// 丝带将在渲染时动态生成
this.ribbons = [];
},
// 创建缓冲区
createBuffers() {
const gl = this.gl;
// 树干缓冲区
this.trunkBuffers = {
position: gl.createBuffer(),
normal: gl.createBuffer(),
color: gl.createBuffer(),
index: gl.createBuffer(),
};
gl.bindBuffer(gl.ARRAY_BUFFER, this.trunkBuffers.position);
gl.bufferData(gl.ARRAY_BUFFER, this.trunkGeometry.vertices, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, this.trunkBuffers.normal);
gl.bufferData(gl.ARRAY_BUFFER, this.trunkGeometry.normals, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, this.trunkBuffers.color);
gl.bufferData(gl.ARRAY_BUFFER, this.trunkGeometry.colors, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.trunkBuffers.index);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.trunkGeometry.indices, gl.STATIC_DRAW);
// 树冠缓冲区
this.crownBuffers = {
position: gl.createBuffer(),
normal: gl.createBuffer(),
color: gl.createBuffer(),
index: gl.createBuffer(),
};
gl.bindBuffer(gl.ARRAY_BUFFER, this.crownBuffers.position);
gl.bufferData(gl.ARRAY_BUFFER, this.crownGeometry.vertices, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, this.crownBuffers.normal);
gl.bufferData(gl.ARRAY_BUFFER, this.crownGeometry.normals, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, this.crownBuffers.color);
gl.bufferData(gl.ARRAY_BUFFER, this.crownGeometry.colors, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.crownBuffers.index);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.crownGeometry.indices, gl.STATIC_DRAW);
},
// 开始动画循环
startAnimation() {
const animate = () => {
this.animationState.time += 0.016;
this.animationState.windLevel = this.data.windLevel;
this.render();
this.animationId = canvas.requestAnimationFrame(animate);
};
this.animationId = this.canvas.requestAnimationFrame(animate);
},
// 停止动画
stopAnimation() {
if (this.animationId) {
this.canvas.cancelAnimationFrame(this.animationId);
}
},
// 渲染场景
render() {
const gl = this.gl;
// 清空画布
gl.clearColor(0.05, 0.05, 0.15, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// 更新相机
this.updateCamera();
// 设置光照
this.setLights();
// 绘制树干
this.drawMesh(this.trunkBuffers, this.trunkGeometry.indices.length);
// 绘制树冠
this.drawMesh(this.crownBuffers, this.crownGeometry.indices.length);
// 绘制丝带
this.drawRibbons();
},
// 更新相机
updateCamera() {
const gl = this.gl;
const camera = this.camera;
// 相机旋转动画
const rotationSpeed = 0.001;
this.animationState.rotation += rotationSpeed;
const radius = 8;
camera.position[0] = Math.sin(this.animationState.rotation) * radius;
camera.position[2] = Math.cos(this.animationState.rotation) * radius;
camera.position[1] = 2 + Math.sin(this.animationState.time * 0.5) * 0.5;
// 计算视图矩阵
const viewMatrix = this.lookAt(camera.position, camera.target, camera.up);
// 计算投影矩阵
const projectionMatrix = this.perspective(
camera.fov * Math.PI / 180,
camera.aspect,
camera.near,
camera.far
);
// 设置 uniform
gl.uniformMatrix4fv(this.uniformLocations.viewMatrix, false, viewMatrix);
gl.uniformMatrix4fv(this.uniformLocations.projectionMatrix, false, projectionMatrix);
gl.uniform3fv(this.uniformLocations.cameraPosition, camera.position);
gl.uniform1f(this.uniformLocations.time, this.animationState.time);
},
// 设置光照
setLights() {
const gl = this.gl;
const lights = this.lights;
gl.uniform3fv(this.uniformLocations.ambientLight,
lights.ambient.color.map(c => c * lights.ambient.intensity));
gl.uniform3fv(this.uniformLocations.directionalLightColor,
lights.directional.color.map(c => c * lights.directional.intensity));
gl.uniform3fv(this.uniformLocations.directionalLightDirection,
lights.directional.direction);
gl.uniform3fv(this.uniformLocations.pointLightColor,
lights.point.color.map(c => c * lights.point.intensity));
gl.uniform3fv(this.uniformLocations.pointLightPosition,
lights.point.position);
},
// 绘制网格
drawMesh(buffers, indexCount) {
const gl = this.gl;
// 设置模型矩阵
const modelMatrix = this.identity();
gl.uniformMatrix4fv(this.uniformLocations.modelMatrix, false, modelMatrix);
// 设置法线矩阵
const normalMatrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];
gl.uniformMatrix3fv(this.uniformLocations.normalMatrix, false, normalMatrix);
// 绑定顶点属性
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.enableVertexAttribArray(this.attribLocations.position);
gl.vertexAttribPointer(this.attribLocations.position, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.normal);
gl.enableVertexAttribArray(this.attribLocations.normal);
gl.vertexAttribPointer(this.attribLocations.normal, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
gl.enableVertexAttribArray(this.attribLocations.color);
gl.vertexAttribPointer(this.attribLocations.color, 3, gl.FLOAT, false, 0, 0);
// 绘制
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.index);
gl.drawElements(gl.TRIANGLES, indexCount, gl.UNSIGNED_SHORT, 0);
},
// 绘制丝带
drawRibbons() {
// 根据许愿数据动态生成丝带
const wishes = this.data.wishes;
if (!wishes || wishes.length === 0) return;
// 这里简化处理，使用线条绘制丝带
// 实际项目中可以使用更复杂的几何体
},
// 矩阵工具函数
identity() {
return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
},
lookAt(eye, center, up) {
const z = this.normalize(this.subtract(eye, center));
const x = this.normalize(this.cross(up, z));
const y = this.cross(z, x);
return [
x[0], y[0], z[0], 0,
x[1], y[1], z[1], 0,
x[2], y[2], z[2], 0,
-this.dot(x, eye), -this.dot(y, eye), -this.dot(z, eye), 1
];
},
perspective(fov, aspect, near, far) {
const f = 1.0 / Math.tan(fov / 2);
const nf = 1 / (near - far);
return [
f / aspect, 0, 0, 0,
0, f, 0, 0,
0, 0, (far + near) * nf, -1,
0, 0, 2 * far * near * nf, 0
];
},
subtract(a, b) {
return [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
},
cross(a, b) {
return [
a[1] * b[2] - a[2] * b[1],
a[2] * b[0] - a[0] * b[2],
a[0] * b[1] - a[1] * b[0]
];
},
dot(a, b) {
return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
},
normalize(v) {
const len = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
return len > 0 ? [v[0] / len, v[1] / len, v[2] / len] : [0, 0, 0];
},
// 初始化传感器
initSensors() {
// 陀螺仪
wx.startGyroscope({
interval: 'game',
success: () => {
wx.onGyroscopeChange((res) => {
const wind = Math.min(1, Math.abs(res.x) * 0.5 + Math.abs(res.y) * 0.3);
this.setData({ windLevel: wind });
});
},
fail: () => {
console.log('陀螺仪不可用');
},
});
// 麦克风
this.recorderManager = wx.getRecorderManager();
this.recorderManager.onFrameRecorded((res) => {
if (res.frameBuffer) {
const volume = this.analyzeVolume(res.frameBuffer);
this.setData({ windLevel: Math.min(1, volume * 2) });
}
});
},
// 分析音量
analyzeVolume(buffer) {
const data = new Int16Array(buffer);
let sum = 0;
for (let i = 0; i < data.length; i++) {
sum += Math.abs(data[i]);
}
return sum / data.length / 32768;
},
// 开启麦克风
enableMicrophone() {
wx.authorize({
scope: 'scope.record',
success: () => {
this.recorderManager.start({
duration: 600000,
sampleRate: 16000,
numberOfChannels: 1,
encodeBitRate: 48000,
format: 'PCM',
frameSize: 50,
});
this.setData({ micEnabled: true });
wx.showToast({ title: '吹气让树摇摆', icon: 'none' });
},
fail: () => {
wx.showToast({ title: '需要麦克风权限', icon: 'none' });
},
});
},
// 停止传感器
stopSensors() {
wx.stopGyroscope();
if (this.recorderManager) {
this.recorderManager.stop();
}
},
// 画布触摸事件
onCanvasTouch(e) {
// 处理触摸旋转
this.touchStartX = e.touches[0].x;
this.touchStartY = e.touches[0].y;
},
onCanvasMove(e) {
if (this.touchStartX === undefined) return;
const deltaX = e.touches[0].x - this.touchStartX;
const deltaY = e.touches[0].y - this.touchStartY;
// 根据触摸移动调整相机
this.animationState.rotation += deltaX * 0.005;
this.touchStartX = e.touches[0].x;
this.touchStartY = e.touches[0].y;
},
onCanvasEnd() {
this.touchStartX = undefined;
this.touchStartY = undefined;
this.setData({ fireflies, petals });
},
// 加载许愿
@@ -762,22 +111,79 @@ Page({
});
if (res.code === 0) {
this.setData({ wishes: res.data.list || [] });
const wishes = this.formatWishes(res.data.list || []);
this.setData({
wishes,
recentWishes: wishes.slice(0, 8),
loading: false,
});
}
} catch (err) {
console.error('加载许愿失败:', err);
this.setData({ wishes: this.getMockWishes() });
const wishes = this.formatWishes(this.getMockWishes());
this.setData({
wishes,
recentWishes: wishes.slice(0, 8),
loading: false,
});
}
},
// 格式化许愿数据
formatWishes(list) {
const colorKeys = Object.keys(TAG_COLORS);
return list.map((wish, index) => {
const slot = this.pickSlot(index);
const colorKey = colorKeys[index % colorKeys.length];
const colors = TAG_COLORS[colorKey];
return {
id: wish.id,
content: wish.content,
author: wish.author || '匿名',
type: wish.type,
x: slot.x,
y: slot.y,
color: colors.color,
bgColor: colors.bgColor,
borderColor: colors.borderColor,
shadowColor: colors.shadowColor,
swayDuration: 3.4 + (index % 5) * 0.6,
swayDelay: (index % 7) * 0.35,
isNew: false,
};
});
},
// 选择挂载点
pickSlot(index) {
const base = CANOPY_SLOTS[index % CANOPY_SLOTS.length];
const wrap = Math.floor(index / CANOPY_SLOTS.length);
if (wrap === 0) return base;
const jitterX = ((wrap * 37) % 9) - 4;
const jitterY = ((wrap * 53) % 9) - 4;
return {
x: Math.min(92, Math.max(8, base.x + jitterX)),
y: Math.min(58, Math.max(10, base.y + jitterY)),
};
},
// 模拟许愿数据
getMockWishes() {
return [
{ id: 1, content: '愿家人平安健康', type: 'paid' },
{ id: 2, content: '事业顺利', type: 'free' },
{ id: 3, content: '心想事成', type: 'paid' },
{ id: 4, content: '考试通过', type: 'free' },
{ id: 5, content: '财源广进', type: 'paid' },
{ id: 1, content: '愿家人平安喜乐，身体健康', author: '小满', type: 'paid' },
{ id: 2, content: '希望今年考研上岸，一战成硕', author: '阿远', type: 'free' },
{ id: 3, content: '愿世界温柔以待每一个努力的人', author: '林深', type: 'paid' },
{ id: 4, content: '早日遇见那个对的人', author: '拾光', type: 'free' },
{ id: 5, content: '祝爸妈身体硬朗，笑口常开', author: '念念', type: 'paid' },
{ id: 6, content: '愿所求皆如愿，所行皆坦途', author: '白露', type: 'free' },
{ id: 7, content: '希望新工作顺顺利利', author: '子夜', type: 'paid' },
{ id: 8, content: '愿此生尽兴，赤诚善良', author: '青禾', type: 'free' },
{ id: 9, content: '愿代码零bug，一次通过', author: '小测', type: 'paid' },
];
},
@@ -920,6 +326,14 @@ Page({
});
},
// 查看许愿详情
viewWishDetail(e) {
const id = e.currentTarget.dataset.id;
wx.navigateTo({
url: `/pages/wish-detail/wish-detail?id=${id}`,
});
},
// 分享
onShareAppMessage() {
return {
mini/pages/wish-tree/wish-tree.wxml
+77 -20
View File
@@ -1,34 +1,91 @@
<view class="container">
<!-- WebGL Canvas -->
<canvas
type="webgl"
id="webgl-canvas"
class="webgl-canvas"
bindtouchstart="onCanvasTouch"
bindtouchmove="onCanvasMove"
bindtouchend="onCanvasEnd"
></canvas>
<!-- 背景氛围：萤火虫 -->
<view class="ambiance">
<view
wx:for="{{fireflies}}"
wx:key="index"
class="firefly"
style="left: {{item.left}}%; top: {{item.top}}%; width: {{item.size}}px; height: {{item.size}}px; animation-duration: {{item.duration}}s; animation-delay: {{item.delay}}s;"
></view>
</view>
<!-- 顶部导航 -->
<view class="top-bar">
<view class="tree-info">
<text class="tree-name">{{treeName}}</text>
<text class="tree-desc">{{treeDesc}}</text>
<!-- 背景氛围：花瓣 -->
<view class="petals">
<view
wx:for="{{petals}}"
wx:key="index"
class="petal"
style="left: {{item.left}}%; width: {{item.size}}px; height: {{item.size}}px; animation-duration: {{item.duration}}s; animation-delay: {{item.delay}}s;"
></view>
</view>
<!-- 边缘暗角，让树从中心发光 -->
<view class="vignette"></view>
<!-- 主内容 -->
<view class="main-content">
<!-- 头部 -->
<view class="header">
<text class="subtitle">MAKE A WISH</text>
<text class="title">许愿树</text>
<text class="description">月色微凉，灯火摇曳。写下心中所愿，挂上枝头，静待花开成真。</text>
<text class="wish-count">已有 <text class="count">{{wishes.length}}</text> 个心愿挂满枝头</text>
</view>
<!-- 传感器控制 -->
<view class="sensor-controls">
<view class="sensor-btn {{micEnabled ? 'active' : ''}}" bindtap="enableMicrophone">
<text class="sensor-icon">🎤</text>
<!-- 许愿树 -->
<view class="tree-container">
<image
src="/images/wish-tree.png"
class="tree-image"
mode="aspectFit"
/>
<!-- 许愿标签 -->
<view
wx:for="{{wishes}}"
wx:key="id"
class="wish-tag {{item.isNew ? 'new' : ''}}"
style="left: {{item.x}}%; top: {{item.y}}%;"
bindtap="viewWishDetail"
data-id="{{item.id}}"
>
<view class="tag-sway" style="animation-duration: {{item.swayDuration}}s; animation-delay: {{item.swayDelay}}s;">
<!-- 挂绳 -->
<view class="tag-string" style="background: linear-gradient(to bottom, transparent, {{item.color}});"></view>
<!-- 绳结 -->
<view class="tag-knot" style="background: {{item.color}}; box-shadow: 0 0 8px {{item.color}};"></view>
<!-- 标签 -->
<view class="tag-content" style="background: {{item.bgColor}}; border: 1px solid {{item.borderColor}}; box-shadow: 0 4px 16px {{item.shadowColor}};">
<text class="tag-text">{{item.content}}</text>
<text class="tag-author">—— {{item.author}}</text>
</view>
</view>
</view>
</view>
<!-- 最近的心愿 -->
<view class="recent-section">
<text class="section-title">最 近 的 心 愿</text>
<scroll-view class="recent-list" scroll-x enhanced show-scrollbar="{{false}}">
<view
wx:for="{{recentWishes}}"
wx:key="id"
class="recent-item"
bindtap="viewWishDetail"
data-id="{{item.id}}"
>
<text class="recent-text">{{item.content}}</text>
<text class="recent-author">—— {{item.author}}</text>
</view>
</scroll-view>
</view>
</view>
<!-- 许愿按钮 -->
<view class="action-bar">
<button class="btn-wish" bindtap="openCreateModal">
<text class="icon">🙏</text>
<text>我要许愿</text>
<text>写下心愿</text>
</button>
</view>
mini/pages/wish-tree/wish-tree.wxss
+269 -52
View File
@@ -3,88 +3,252 @@
width: 100vw;
height: 100vh;
overflow: hidden;
background: linear-gradient(180deg, #0a0a1a 0%, #1a1a3a 50%, #0f2a4a 100%);
background: #0d0d1a;
}
/* WebGL Canvas */
.webgl-canvas {
/* 背景氛围 */
.ambiance {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* 顶部导航 */
.top-bar {
.firefly {
position: absolute;
border-radius: 50%;
background: #ffd700;
box-shadow: 0 0 8px #ffd700, 0 0 14px #ffd700;
animation: twinkle 3s ease-in-out infinite;
}
.petals {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 100rpx 40rpx 30rpx;
display: flex;
justify-content: space-between;
align-items: flex-start;
z-index: 100;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.top-bar .tree-info,
.top-bar .sensor-controls {
pointer-events: auto;
.petal {
position: absolute;
top: -20px;
border-radius: 50% 50% 50% 0;
background: rgba(255, 200, 200, 0.6);
animation: drift 12s linear infinite;
}
.tree-info {
/* 边缘暗角 */
.vignette {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(13, 13, 26, 0.9) 100%);
pointer-events: none;
z-index: 2;
}
/* 主内容 */
.main-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
gap: 8rpx;
}
.tree-name {
font-size: 40rpx;
color: #ffd700;
font-weight: bold;
text-shadow: 0 2rpx 10rpx rgba(255, 215, 0, 0.5);
}
.tree-desc {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.7);
}
/* 传感器控制 */
.sensor-controls {
display: flex;
gap: 16rpx;
}
.sensor-btn {
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
min-height: 100vh;
padding: 60rpx 40rpx 200rpx;
}
/* 头部 */
.header {
text-align: center;
margin-bottom: 20rpx;
}
.subtitle {
display: block;
font-size: 20rpx;
letter-spacing: 8rpx;
color: rgba(255, 215, 0, 0.8);
margin-bottom: 16rpx;
}
.title {
display: block;
font-size: 72rpx;
font-weight: bold;
color: #ffd700;
text-shadow: 0 4rpx 24rpx rgba(255, 215, 0, 0.4);
margin-bottom: 24rpx;
}
.description {
display: block;
font-size: 26rpx;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
max-width: 500rpx;
margin: 0 auto 20rpx;
}
.wish-count {
display: block;
font-size: 24rpx;
color: rgba(255, 215, 0, 0.7);
}
.wish-count .count {
font-weight: bold;
color: #ffd700;
}
/* 许愿树容器 */
.tree-container {
position: relative;
width: 100%;
max-width: 700rpx;
aspect-ratio: 1;
margin: 0 auto;
}
.tree-image {
width: 100%;
height: 100%;
object-fit: contain;
}
/* 许愿标签 */
.wish-tag {
position: absolute;
z-index: 20;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
}
.wish-tag.new {
animation: tag-drop 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.tag-sway {
display: flex;
flex-direction: column;
align-items: center;
transform-origin: top center;
animation: sway 4s ease-in-out infinite;
}
.tag-string {
width: 2rpx;
height: 40rpx;
}
.tag-knot {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
border: 2rpx solid rgba(255, 255, 255, 0.2);
transition: all 0.3s;
margin-top: -2rpx;
}
.sensor-btn.active {
background: rgba(255, 215, 0, 0.3);
border-color: rgba(255, 215, 0, 0.6);
box-shadow: 0 0 30rpx rgba(255, 215, 0, 0.4);
.tag-content {
margin-top: 8rpx;
padding: 16rpx 20rpx;
border-radius: 12rpx;
min-width: 160rpx;
max-width: 200rpx;
backdrop-filter: blur(4px);
transition: transform 0.3s;
}
.sensor-icon {
font-size: 40rpx;
.wish-tag:active .tag-content {
transform: translateY(-4rpx) scale(1.05);
}
.tag-text {
display: block;
font-size: 20rpx;
font-weight: 500;
color: #2a2a3a;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.tag-author {
display: block;
font-size: 16rpx;
color: #4a4a5a;
margin-top: 8rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 最近的心愿 */
.recent-section {
width: 100%;
margin-top: 40rpx;
}
.section-title {
display: block;
text-align: center;
font-size: 22rpx;
letter-spacing: 6rpx;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 24rpx;
}
.recent-list {
display: flex;
gap: 20rpx;
padding-bottom: 20rpx;
white-space: nowrap;
}
.recent-item {
display: inline-flex;
flex-direction: column;
min-width: 280rpx;
padding: 24rpx;
background: rgba(255, 255, 255, 0.08);
border: 1rpx solid rgba(255, 255, 255, 0.1);
border-radius: 20rpx;
backdrop-filter: blur(8px);
}
.recent-text {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.recent-author {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.5);
margin-top: 12rpx;
}
/* 许愿按钮 */
.action-bar {
position: absolute;
bottom: 80rpx;
position: fixed;
bottom: 60rpx;
left: 50%;
transform: translateX(-50%);
z-index: 100;
@@ -314,3 +478,56 @@
border: none;
box-shadow: 0 8rpx 30rpx rgba(196, 30, 58, 0.4);
}
/* 动画 */
@keyframes sway {
0%, 100% {
transform: rotate(-3.5deg);
}
50% {
transform: rotate(3.5deg);
}
}
@keyframes twinkle {
0%, 100% {
opacity: 0.2;
transform: scale(0.7);
}
50% {
opacity: 1;
transform: scale(1.15);
}
}
@keyframes drift {
0% {
transform: translate3d(0, 0, 0) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.9;
}
90% {
opacity: 0.9;
}
100% {
transform: translate3d(-40px, 120vh, 0) rotate(360deg);
opacity: 0;
}
}
@keyframes tag-drop {
0% {
transform: translateY(-24px) rotate(-8deg);
opacity: 0;
}
60% {
transform: translateY(4px) rotate(3deg);
opacity: 1;
}
100% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
}