<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>生成微信小程序图标</title>
|
<style>
|
body {
|
font-family: Arial, sans-serif;
|
padding: 20px;
|
background-color: #f5f5f5;
|
}
|
.container {
|
max-width: 800px;
|
margin: 0 auto;
|
background: white;
|
padding: 30px;
|
border-radius: 10px;
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
}
|
.icon-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
gap: 20px;
|
margin-top: 20px;
|
}
|
.icon-item {
|
text-align: center;
|
padding: 20px;
|
border: 1px solid #ddd;
|
border-radius: 8px;
|
background: #fafafa;
|
}
|
.icon-canvas {
|
border: 1px solid #ccc;
|
margin: 10px 0;
|
}
|
.download-btn {
|
background: #007aff;
|
color: white;
|
border: none;
|
padding: 8px 16px;
|
border-radius: 4px;
|
cursor: pointer;
|
margin: 5px;
|
}
|
.download-btn:hover {
|
background: #0056b3;
|
}
|
h1 {
|
color: #333;
|
text-align: center;
|
}
|
.instructions {
|
background: #e3f2fd;
|
padding: 15px;
|
border-radius: 5px;
|
margin-bottom: 20px;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="container">
|
<h1>微信小程序图标生成器</h1>
|
|
<div class="instructions">
|
<h3>使用说明：</h3>
|
<ol>
|
<li>点击下方的"下载"按钮保存对应的图标</li>
|
<li>将下载的图标文件重命名并放置到 wx/images/ 目录下</li>
|
<li>确保文件名与app.json中配置的路径一致</li>
|
</ol>
|
</div>
|
|
<div class="icon-grid">
|
<div class="icon-item">
|
<h3>首页图标（未选中）</h3>
|
<canvas id="home" class="icon-canvas" width="81" height="81"></canvas>
|
<br>
|
<button class="download-btn" onclick="downloadIcon('home', 'home.png')">下载 home.png</button>
|
</div>
|
|
<div class="icon-item">
|
<h3>首页图标（选中）</h3>
|
<canvas id="home-active" class="icon-canvas" width="81" height="81"></canvas>
|
<br>
|
<button class="download-btn" onclick="downloadIcon('home-active', 'home-active.png')">下载 home-active.png</button>
|
</div>
|
|
<div class="icon-item">
|
<h3>消息图标（未选中）</h3>
|
<canvas id="message" class="icon-canvas" width="81" height="81"></canvas>
|
<br>
|
<button class="download-btn" onclick="downloadIcon('message', 'message.png')">下载 message.png</button>
|
</div>
|
|
<div class="icon-item">
|
<h3>消息图标（选中）</h3>
|
<canvas id="message-active" class="icon-canvas" width="81" height="81"></canvas>
|
<br>
|
<button class="download-btn" onclick="downloadIcon('message-active', 'message-active.png')">下载 message-active.png</button>
|
</div>
|
|
<div class="icon-item">
|
<h3>我的图标（未选中）</h3>
|
<canvas id="profile" class="icon-canvas" width="81" height="81"></canvas>
|
<br>
|
<button class="download-btn" onclick="downloadIcon('profile', 'profile.png')">下载 profile.png</button>
|
</div>
|
|
<div class="icon-item">
|
<h3>我的图标（选中）</h3>
|
<canvas id="profile-active" class="icon-canvas" width="81" height="81"></canvas>
|
<br>
|
<button class="download-btn" onclick="downloadIcon('profile-active', 'profile-active.png')">下载 profile-active.png</button>
|
</div>
|
</div>
|
</div>
|
|
<script>
|
// 绘制首页图标（未选中）
|
function drawHomeIcon(ctx, color = '#999999') {
|
ctx.clearRect(0, 0, 81, 81);
|
ctx.fillStyle = color;
|
ctx.beginPath();
|
// 绘制房子形状
|
ctx.moveTo(40, 15);
|
ctx.lineTo(20, 35);
|
ctx.lineTo(25, 35);
|
ctx.lineTo(25, 60);
|
ctx.lineTo(55, 60);
|
ctx.lineTo(55, 35);
|
ctx.lineTo(60, 35);
|
ctx.lineTo(40, 15);
|
ctx.fill();
|
|
// 绘制门
|
ctx.fillStyle = 'white';
|
ctx.fillRect(35, 45, 10, 15);
|
}
|
|
// 绘制消息图标（未选中）
|
function drawMessageIcon(ctx, color = '#999999') {
|
ctx.clearRect(0, 0, 81, 81);
|
ctx.fillStyle = color;
|
ctx.beginPath();
|
// 绘制消息气泡
|
ctx.roundRect(20, 25, 40, 25, 5);
|
ctx.fill();
|
|
// 绘制小尾巴
|
ctx.beginPath();
|
ctx.moveTo(30, 50);
|
ctx.lineTo(25, 55);
|
ctx.lineTo(35, 50);
|
ctx.fill();
|
}
|
|
// 绘制个人图标（未选中）
|
function drawProfileIcon(ctx, color = '#999999') {
|
ctx.clearRect(0, 0, 81, 81);
|
ctx.fillStyle = color;
|
|
// 绘制头部
|
ctx.beginPath();
|
ctx.arc(40, 30, 12, 0, 2 * Math.PI);
|
ctx.fill();
|
|
// 绘制身体
|
ctx.beginPath();
|
ctx.arc(40, 55, 18, 0, Math.PI, true);
|
ctx.fill();
|
}
|
|
// 添加roundRect方法（兼容性）
|
if (!CanvasRenderingContext2D.prototype.roundRect) {
|
CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius) {
|
this.beginPath();
|
this.moveTo(x + radius, y);
|
this.lineTo(x + width - radius, y);
|
this.quadraticCurveTo(x + width, y, x + width, y + radius);
|
this.lineTo(x + width, y + height - radius);
|
this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
|
this.lineTo(x + radius, y + height);
|
this.quadraticCurveTo(x, y + height, x, y + height - radius);
|
this.lineTo(x, y + radius);
|
this.quadraticCurveTo(x, y, x + radius, y);
|
this.closePath();
|
};
|
}
|
|
// 初始化所有图标
|
function initIcons() {
|
// 首页图标
|
const homeCtx = document.getElementById('home').getContext('2d');
|
drawHomeIcon(homeCtx, '#999999');
|
|
const homeActiveCtx = document.getElementById('home-active').getContext('2d');
|
drawHomeIcon(homeActiveCtx, '#007aff');
|
|
// 消息图标
|
const messageCtx = document.getElementById('message').getContext('2d');
|
drawMessageIcon(messageCtx, '#999999');
|
|
const messageActiveCtx = document.getElementById('message-active').getContext('2d');
|
drawMessageIcon(messageActiveCtx, '#007aff');
|
|
// 个人图标
|
const profileCtx = document.getElementById('profile').getContext('2d');
|
drawProfileIcon(profileCtx, '#999999');
|
|
const profileActiveCtx = document.getElementById('profile-active').getContext('2d');
|
drawProfileIcon(profileActiveCtx, '#007aff');
|
}
|
|
// 下载图标
|
function downloadIcon(canvasId, filename) {
|
const canvas = document.getElementById(canvasId);
|
const link = document.createElement('a');
|
link.download = filename;
|
link.href = canvas.toDataURL('image/png');
|
link.click();
|
}
|
|
// 页面加载完成后初始化图标
|
window.onload = initIcons;
|
</script>
|
</body>
|
</html>
|
