diff --git a/.prettierrc b/.prettierrc index 9b95825..0d75a05 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,7 +2,7 @@ "singleQuote": true, "trailingComma": "all", "tabWidth": 4, - "printWidth": 100, + "printWidth": 80, "formatOnSave": true, "bracketSameLine": true, "overrides": [ diff --git a/miniprogram/app.less b/miniprogram/app.less index 101d83c..6164d4b 100644 --- a/miniprogram/app.less +++ b/miniprogram/app.less @@ -7,4 +7,21 @@ // justify-content: space-between; // padding: 200rpx 0; // box-sizing: border-box; -// } \ No newline at end of file +// } + +.border-1px { + position: relative; +} + +.border-1px::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 200%; + height: 200%; + border: 1px solid #141414; + transform: scale(0.5); + transform-origin: 0 0; + box-sizing: border-box; +} diff --git a/miniprogram/canvasService/textDrawServiceV3.ts b/miniprogram/canvasService/textDrawServiceV3.ts index 61bb783..9cae6c6 100644 --- a/miniprogram/canvasService/textDrawServiceV3.ts +++ b/miniprogram/canvasService/textDrawServiceV3.ts @@ -10,7 +10,11 @@ class TextDrawService { currentX: number; currentY: number; - constructor(canvas: Canvas, ctx: RenderingContext, options?: Record) { + constructor( + canvas: Canvas, + ctx: RenderingContext, + options?: Record, + ) { this.canvas = canvas; this.ctx = ctx; this.paperSize = 'A4'; @@ -160,7 +164,9 @@ class TextDrawService { for (let j = 0; j < cols; j++) { const y = startY + i * (spaceHeight + radius * 2); const x = - i % 2 === 0 ? startX1 + j * spaceWidthFrist : startX2 + j * spaceWidthSecond; + i % 2 === 0 + ? startX1 + j * spaceWidthFrist + : startX2 + j * spaceWidthSecond; const character = characters[Math.floor(Math.random() * len)]; diff --git a/miniprogram/components/word-card/word-card.less b/miniprogram/components/word-card/word-card.less index f82c59b..a24bc11 100644 --- a/miniprogram/components/word-card/word-card.less +++ b/miniprogram/components/word-card/word-card.less @@ -4,7 +4,7 @@ // width: 324rpx; height: 100rpx; border-radius: 16rpx; - background-color: #EEFCFC; + background-color: #eefcfc; align-items: center; box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.35); @@ -15,6 +15,21 @@ background-color: #ff0000; margin-left: 20rpx; border: 1rpx solid #141414; + + position: relative; + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 200%; + height: 200%; + border-radius: 50%; + border: 1px solid #141414; + transform: scale(0.5); + transform-origin: 0 0; + box-sizing: border-box; + } } .word-box { @@ -31,7 +46,6 @@ font-size: 28rpx; color: #141414; text-align: center; - } } @@ -40,4 +54,4 @@ margin-right: 8rpx; color: #141414; } -} \ No newline at end of file +} diff --git a/miniprogram/components/word-card/word-card.ts b/miniprogram/components/word-card/word-card.ts index 20d417b..0dfbf9e 100644 --- a/miniprogram/components/word-card/word-card.ts +++ b/miniprogram/components/word-card/word-card.ts @@ -6,7 +6,15 @@ Component({ * 组件的属性列表 */ properties: { - extClass: { + key: { + type: Number, + value: 0, + }, + word: { + type: String, + value: '', + }, + color: { type: String, value: '', }, @@ -15,7 +23,8 @@ Component({ * 组件的初始数据 */ data: { - displayStyle: '', + word: '', + color: '', }, lifetimes: { attached() {}, @@ -23,5 +32,10 @@ Component({ /** * 组件的方法列表 */ - methods: {}, + methods: { + onDelete() { + const { key, word } = this.data; + this.triggerEvent('onDelete', { key, word }); + }, + }, }); diff --git a/miniprogram/components/word-card/word-card.wxml b/miniprogram/components/word-card/word-card.wxml index 515af29..33a570f 100644 --- a/miniprogram/components/word-card/word-card.wxml +++ b/miniprogram/components/word-card/word-card.wxml @@ -1,9 +1,9 @@ - - - 文 + + + {{word}} - + - + \ No newline at end of file diff --git a/miniprogram/components/word-input/word-input.ts b/miniprogram/components/word-input/word-input.ts index 20d417b..9aed947 100644 --- a/miniprogram/components/word-input/word-input.ts +++ b/miniprogram/components/word-input/word-input.ts @@ -5,23 +5,31 @@ Component({ /** * 组件的属性列表 */ - properties: { - extClass: { - type: String, - value: '', - }, - }, + properties: {}, /** * 组件的初始数据 */ - data: { - displayStyle: '', - }, + data: {}, lifetimes: { - attached() {}, + attached() { + (this as any).words = ''; + }, }, /** * 组件的方法列表 */ - methods: {}, + methods: { + onConfirm(e: WechatMiniprogram.Input) { + let { value } = e.detail; + // (this as any).words = value; + value = value.replace(' ', ''); + if (value.length > 0) { + this.triggerEvent('onConfirm', { value }); + } + }, + + // onTap() { + // this.triggerEvent('onTap', { words: (this as any).words }); + // }, + }, }); diff --git a/miniprogram/constants/index.ts b/miniprogram/constants/index.ts index e69de29..471454e 100644 --- a/miniprogram/constants/index.ts +++ b/miniprogram/constants/index.ts @@ -0,0 +1,111 @@ +// export const COLOR_LIST = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6']; +export const WATER_COLORS = { + // 基础 12色 + basic12: [ + { name: '红色', hex: '#FF0000' }, + { name: '橙色', hex: '#FF7F00' }, + { name: '黄色', hex: '#FFFF00' }, + { name: '黄绿色', hex: '#ADFF2F' }, + { name: '绿色', hex: '#00FF00' }, + { name: '青色', hex: '#00FFFF' }, + { name: '蓝色', hex: '#0000FF' }, + { name: '紫色', hex: '#8A2BE2' }, + { name: '粉红色', hex: '#FF69B4' }, + { name: '棕色', hex: '#A52A2A' }, + { name: '橙红色', hex: '#FF4500' }, + { name: '黑色', hex: '#000000' }, + ], + + // 扩展 24色 + extended24: [ + { name: '红色', hex: '#FF0000' }, + { name: '橙红色', hex: '#FF4500' }, + { name: '橙色', hex: '#FF7F00' }, + { name: '橙黄色', hex: '#FFA500' }, + { name: '黄色', hex: '#FFFF00' }, + { name: '黄绿色', hex: '#ADFF2F' }, + { name: '草绿色', hex: '#7CFC00' }, + { name: '绿色', hex: '#00FF00' }, + { name: '深绿色', hex: '#006400' }, + { name: '青色', hex: '#00FFFF' }, + { name: '天蓝色', hex: '#87CEEB' }, + { name: '蓝色', hex: '#0000FF' }, + { name: '深蓝色', hex: '#00008B' }, + { name: '蓝紫色', hex: '#8A2BE2' }, + { name: '紫色', hex: '#800080' }, + { name: '紫红色', hex: '#FF00FF' }, + { name: '粉红色', hex: '#FF69B4' }, + { name: '深粉色', hex: '#FF1493' }, + { name: '棕色', hex: '#A52A2A' }, + { name: '深棕色', hex: '#8B4513' }, + { name: '灰色', hex: '#808080' }, + { name: '白色', hex: '#FFFFFF' }, + { name: '米色', hex: '#F5F5DC' }, + { name: '黑色', hex: '#000000' }, + ], + + // 特殊 36色 + special36: [ + { name: '红色', hex: '#FF0000' }, + { name: '绯红', hex: '#DC143C' }, + { name: '橙红色', hex: '#FF4500' }, + { name: '橙色', hex: '#FF7F00' }, + { name: '橙黄色', hex: '#FFA500' }, + { name: '金色', hex: '#FFD700' }, + { name: '黄色', hex: '#FFFF00' }, + { name: '柠檬黄', hex: '#FFFACD' }, + { name: '黄绿色', hex: '#ADFF2F' }, + { name: '草绿色', hex: '#7CFC00' }, + { name: '绿色', hex: '#00FF00' }, + { name: '深绿色', hex: '#006400' }, + { name: '橄榄绿', hex: '#808000' }, + { name: '青色', hex: '#00FFFF' }, + { name: '蓝绿色', hex: '#20B2AA' }, + { name: '天蓝色', hex: '#87CEEB' }, + { name: '蓝色', hex: '#0000FF' }, + { name: '深蓝色', hex: '#00008B' }, + { name: '海军蓝', hex: '#000080' }, + { name: '蓝紫色', hex: '#8A2BE2' }, + { name: '靛蓝色', hex: '#4B0082' }, + { name: '紫色', hex: '#800080' }, + { name: '紫罗兰', hex: '#9400D3' }, + { name: '紫红色', hex: '#FF00FF' }, + { name: '粉红色', hex: '#FF69B4' }, + { name: '深粉色', hex: '#FF1493' }, + { name: '玫瑰红', hex: '#FF007F' }, + { name: '棕色', hex: '#A52A2A' }, + { name: '深棕色', hex: '#8B4513' }, + { name: '咖啡色', hex: '#6F4E37' }, + { name: '灰色', hex: '#808080' }, + { name: '银灰色', hex: '#C0C0C0' }, + { name: '白色', hex: '#FFFFFF' }, + { name: '米色', hex: '#F5F5DC' }, + { name: '象牙白', hex: '#FFFFF0' }, + { name: '黑色', hex: '#000000' }, + ], +}; + +export const PAPER_SIZE = { + A4: { + // width: 2480, + // height: 3508, + width: 595, + height: 842, + }, + A3: { + width: 3508, + height: 4960, + }, + A2: { + width: 4960, + height: 7016, + }, + A1: { + width: 7016, + height: 10032, + }, + A0: { + width: 10032, + height: 14176, + }, +}; diff --git a/miniprogram/pages/index/index.less b/miniprogram/pages/index/index.less index 5333d39..1ff626d 100644 --- a/miniprogram/pages/index/index.less +++ b/miniprogram/pages/index/index.less @@ -1,10 +1,10 @@ page { - background-color: #F6F6F6; + background-color: #f6f6f6; } .page-container { - background-color: #F6F6F6; - padding: 24rpx; + background-color: #f6f6f6; + padding: 0 24rpx; box-sizing: border-box; .wrapper { @@ -23,8 +23,16 @@ page { font-weight: bold; text-align: center; } + + &.hidden { + visibility: hidden; + } } + // #previewWrapper { + // margin-bottom: 200rpx; + // } + .word-card-box { margin-top: 30rpx; } @@ -35,4 +43,29 @@ page { justify-content: space-between; margin-bottom: 24rpx; } -} \ No newline at end of file + + .empty { + height: 190rpx; + } +} + +.canvas-wrapper { + margin-top: 20rpx; + width: 100%; + border: 1rpx solid #141414; + background-color: #fff; + box-sizing: border-box; +} + +.btn-area { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + height: 190rpx; + display: flex; + justify-content: center; + align-items: center; + background-color: #fff; + box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25); +} diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts index bb1ff89..e375d63 100644 --- a/miniprogram/pages/index/index.ts +++ b/miniprogram/pages/index/index.ts @@ -1,9 +1,125 @@ +import { WATER_COLORS, PAPER_SIZE } from '../../constants/index'; +import TextDrawService from '../../service/textDrawService'; + Page({ - data: {}, + canvas: null as Canvas | null, + ctx: null as RenderingContext | null, + boxHeight: 0, + boxWidth: 0, + textDrawService: null as TextDrawService | null, + + data: { + cardList: [] as Array<{ color: string; word: string }>, + }, + + onReady() { + const query = wx.createSelectorQuery(); + query + .select('#canvasWrapper') + .boundingClientRect((rect) => { + if (rect) { + const { width, height } = PAPER_SIZE['A4']; + const boxWidth = rect.width; + const boxHeight = boxWidth / (width / height); + + this.boxHeight = boxHeight; + this.boxWidth = boxWidth; + this.initCanvas(boxWidth, boxHeight); + } + }) + .exec(); + }, + + // renderCanvas() { + // // wx.nextTick(() => { + // // this.setCanvasBoxSize(); + // // }); + // console.log('this.boxWidth:', this.boxWidth); + // console.log('this.boxHeight:', this.boxHeight); + // if (this.boxWidth && this.boxHeight) { + // this.initCanvas(this.boxWidth, this.boxHeight); + // } + // }, + + // setCanvasBoxSize() { + // const { windowWidth } = wx.getWindowInfo(); + // console.log('windowWidth---:', windowWidth); + // const query = wx.createSelectorQuery(); + // query + // .select('#canvasWrapper') + // .boundingClientRect((rect) => { + // if (rect) { + // const boxWidth = rect.width; + // const boxHeight = boxWidth / (width / height); + + // console.log('boxWidth----:', boxWidth); + // console.log('boxHeight----:', boxHeight); + + // this.initCanvas(boxHeight, boxWidth); + // } + // }) + // .exec(); + // }, + + initCanvas(boxWidth: number, boxHeight: number) { + wx.createSelectorQuery() + .select('#canvasContent') + .fields({ + node: true, + size: true, + }) + .exec((res) => { + if (res[0] && res[0].node) { + const canvas = res[0].node; + const ctx = canvas.getContext('2d'); + if (ctx) { + this.canvas = canvas; + this.ctx = ctx; + const rect = res[0]; + console.log('rect-----:', rect); + this.textDrawService = new TextDrawService(canvas, ctx); + // textDrawService.draw(); + this.setData({ boxWidth, boxHeight }); + } + } + }); + }, tapCard(e: WechatMiniprogram.TouchEvent) { const { url } = e.currentTarget.dataset; console.log('navigateTo url:', url); wx.navigateTo({ url }); }, + + onConfirmInput(e: WechatMiniprogram.Input) { + const { value } = e.detail; + console.log('indexPage onConfirmInput value:', value); + const characters = value.split(''); + const shuffledColors = [...WATER_COLORS.basic12].sort( + () => Math.random() - 0.5, + ); + const updatedCardList = characters.map((char, index) => ({ + color: shuffledColors[index % shuffledColors.length].hex, + word: char, + })); + console.log('updatedCardList', updatedCardList); + this.setData({ cardList: updatedCardList }); + // this.renderCanvas(); + this.textDrawService?.draw(updatedCardList); + }, + + deleteWordCard(e: WechatMiniprogram.CustomEvent) { + const { key, word } = e.detail; + console.log('deleteWordCard key:', key, 'word:', word); + const { cardList } = this.data; + const updatedCardList = cardList.filter((_, index) => index !== key); + this.setData({ cardList: updatedCardList }); + wx.showToast({ + title: `已删除 "${word}"`, + icon: 'none', + duration: 2000, + }); + // this.renderCanvas(); + this.textDrawService?.draw(updatedCardList); + }, }); diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml index 2eb7828..f1de5b9 100644 --- a/miniprogram/pages/index/index.wxml +++ b/miniprogram/pages/index/index.wxml @@ -1,19 +1,47 @@ - + - 设置文字和颜色 - + 设置文字和颜色12 + - - - - - - - - + + + + + + - + 预览打印效果 + + + - + + + + + diff --git a/miniprogram/service/textDrawService.ts b/miniprogram/service/textDrawService.ts new file mode 100644 index 0000000..e976e45 --- /dev/null +++ b/miniprogram/service/textDrawService.ts @@ -0,0 +1,270 @@ +// import { PAPER_SIZE } from './constant'; +import { PAPER_SIZE } from '../constants/index'; +import { getMiniCodeImage } from '../utils/index'; + +function calculateCircleCenters( + canvasWidth: number, + circleCount: number, + padding: number, + radius: number, +) { + const availableWidth = canvasWidth - 2 * padding; + const maxSpacing = 5.5 * radius; + const centers = []; + + if (circleCount === 1) { + // 单个圆圈直接居中 + centers.push(canvasWidth / 2); + } else { + const requiredSpace = 2 * radius * circleCount; + const spaceBetween = + (availableWidth - requiredSpace) / (circleCount - 1); + console.log('spaceBetween---:', spaceBetween); + + if (spaceBetween > maxSpacing) { + // 超过最大间距时，固定间距并居中对齐 + const totalWidth = 2 * radius + (circleCount - 1) * maxSpacing; + const startX = (canvasWidth - totalWidth) / 2 + radius; + + for (let i = 0; i < circleCount; i++) { + centers.push(startX + i * maxSpacing); + } + } else { + // 正常均匀分布 + const startX = padding + radius; + + for (let i = 0; i < circleCount; i++) { + centers.push(startX + i * (spaceBetween + 2 * radius)); + } + } + } + + return centers; +} + +class TextDrawService { + canvas: WechatMiniprogram.Canvas; + ctx: RenderingContext; + options: Record; + paperSize: PaperSize; + currentX: number; + currentY: number; + colors: string[]; + characters: string[]; + + constructor( + canvas: Canvas, + ctx: RenderingContext, + options?: Record, + ) { + options = options || {}; + this.canvas = canvas; + this.ctx = ctx; + this.paperSize = 'A4'; + this.options = { + appName: '涂鸦呀', + appHint: '涂色|识字|画画|认知', + title: '找一找 涂 色', + subTitle: '把相同的文字涂上相同的颜色', + ...options, + }; + this.currentX = 0; + this.currentY = 0; + this.colors = ['#000']; + this.characters = ['王']; + } + + draw(list: Array<{ color: string; word: string }>) { + this.colors = list.map((item) => item.color || '#000'); + this.characters = list.map((item) => item.word || '日'); + this.clear(); + this.setPaper(); + this.drawHeader(); + this.drawLegend(); + this.drawContent(); + } + + async drawHeader() { + const { canvas, ctx } = this; + const { appName, appHint, title, subTitle } = this.options; + + this.currentX = 80; + this.currentY = 80; + const titleX = this.currentX + 200 + 48; + const titleY = 80; + const image = await getMiniCodeImage(canvas); + ctx.drawImage(image, 80, 80, 200, 200); + + ctx.font = 'bold 64px "Microsoft Yahei"'; + ctx.fillStyle = '#000'; + ctx.textAlign = 'left'; + ctx.textBaseline = 'top'; + + ctx.fillText(appName, titleX, titleY); + + ctx.font = '48px "Microsoft Yahei"'; + ctx.fillStyle = '#666'; + ctx.fillText(appHint, titleX, 186); + + // 绘制分割线 + // ctx.strokeStyle = '#888'; + // ctx.lineWidth = 2; + // ctx.beginPath(); + // ctx.moveTo(483, 70); + // ctx.lineTo(483, 70 + 140); + // ctx.stroke(); + + ctx.font = 'bold 64px "Microsoft Yahei"'; + ctx.fillStyle = '#000'; + ctx.fillText(title, 1015, titleY); + + ctx.font = '48px "Microsoft Yahei"'; + ctx.fillStyle = '#666'; + ctx.fillText(subTitle, 1015, 186); + + this.currentY = 304; + this.drawLine(this.currentY); + } + + /** 绘制示例 + * 矩形： x、y为左上角 + * 圆形：x、y为圆心 + * 文字：x textAlign 为 start，文本左边缘对齐 + * y textBaseline 为 alphabetic，y 对应字母基线（类似左下角） + * + * */ + drawLegend() { + const { canvas, ctx, colors, characters } = this; + // const { colors, characters } = options; + const radius = 65; + const rectWidth = 180; + const rectHeight = 80; + const startX = 260 + radius; // 圆形的X坐标是圆心 + const startY = 304 + 26 + radius; // 圆形的Y坐标是圆心 + const len = characters.length || 4; + const canvasWidth = canvas.width; + const centers = calculateCircleCenters(canvasWidth, len, 220, 65); + /** 计算每个圆之间的间距 俩个60，一个是页面右侧边距，另一个是圆离右边距地边距*/ + const spaceWidth = len > 3 ? (canvasWidth - startX * 2) / (len - 1) : 0; + + ctx.moveTo(startX, startY); + colors.forEach((color: string, index: number) => { + const x = centers[index] || startX + index * spaceWidth; // 计算圆的X坐标 + const y = startY; // 计算圆的Y坐标 + // 绘制圆 + ctx.strokeStyle = '#000'; + ctx.fillStyle = color; + ctx.lineWidth = 4; + ctx.beginPath(); + ctx.arc(x, y, radius, 0, Math.PI * 2); + ctx.fill(); + ctx.stroke(); + ctx.closePath(); + + // 绘制长方形 + ctx.fillStyle = '#fff'; // 长方形背景色 + ctx.strokeStyle = '#000'; + ctx.lineWidth = 4; + const rectangleX = x - rectWidth / 2; // 从圆形移动一半的长方形的长 + const rectangleY = y + radius + 43; // 从圆形下移一个半径，再加上43的间距 + ctx.strokeRect(rectangleX, rectangleY, rectWidth, rectHeight); // 绘制长方形 + + // 绘制字符 + ctx.fillStyle = '#333'; + ctx.font = 'bold 48px "Microsoft Yahei"'; + ctx.textBaseline = 'middle'; + ctx.textAlign = 'center'; + ctx.fillText( + characters[index], + rectangleX + rectWidth / 2, + rectangleY + rectHeight / 2, + rectWidth, + ); + }); + + this.currentY = 612; // 计算分割线的Y坐标，距离示例图20px + this.drawLine(this.currentY); + } + + drawContent() { + const { canvas, ctx, characters } = this; + // const { characters } = options; + + const len = characters.length; + const rows = 8; + const radius = 80; + const fontSize = 72; + + const startY = this.currentY + 62 + radius; + const startX1 = 310 + radius; + const startX2 = 200 + radius; + const canvasWidth = canvas.width; + const spaceWidthFrist = (canvasWidth - startX1 * 2) / (5 - 1); + const spaceWidthSecond = (canvasWidth - startX2 * 2) / (6 - 1); + const spaceHeight = 54; + + ctx.moveTo(startX1, startY); + for (let i = 0; i < rows; i++) { + const cols = i % 2 === 0 ? 5 : 6; + + for (let j = 0; j < cols; j++) { + const y = startY + i * (spaceHeight + radius * 2); + const x = + i % 2 === 0 + ? startX1 + j * spaceWidthFrist + : startX2 + j * spaceWidthSecond; + + const character = characters[Math.floor(Math.random() * len)]; + + ctx.fillStyle = '#fff'; + ctx.strokeStyle = '#000'; + ctx.lineWidth = 4; + ctx.beginPath(); + ctx.arc(x, y, radius, 0, Math.PI * 2); + ctx.fill(); + ctx.stroke(); + ctx.closePath(); + + ctx.fillStyle = '#333'; + ctx.font = `${fontSize}px "Microsoft Yahei"`; + ctx.textBaseline = 'middle'; + ctx.textAlign = 'center'; + ctx.fillText(character, x, y, radius * 2); + } + } + } + + drawLine(linY: number) { + const { canvas, ctx } = this; + + ctx.strokeStyle = '#000'; + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.moveTo(80, linY); + ctx.lineTo(canvas.width - 80, linY); + ctx.stroke(); + } + + setPaper() { + const { ctx, canvas } = this; + const { pixelRatio: dpr } = wx.getWindowInfo(); + // const { width, height } = { width: 595 * dpr, height: 842 * dpr }; + let { width, height } = PAPER_SIZE[this.paperSize]; + width = width * dpr; + height = height * dpr; + + canvas.width = width; + canvas.height = height; + + this.clear(); + ctx.fillStyle = '#fff'; // 设置背景色为白色 + ctx.fillRect(0, 0, width, height); + } + + clear() { + const canvas = this.canvas; + this.ctx.clearRect(0, 0, canvas.width, canvas.height); + } +} + +export default TextDrawService; diff --git a/miniprogram/ui/button/button.json b/miniprogram/ui/button/button.json new file mode 100644 index 0000000..278aeab --- /dev/null +++ b/miniprogram/ui/button/button.json @@ -0,0 +1,5 @@ +{ + "component": true, + "styleIsolation": "apply-shared", + "usingComponents": {} +} diff --git a/miniprogram/ui/button/button.less b/miniprogram/ui/button/button.less new file mode 100644 index 0000000..e69de29 diff --git a/miniprogram/ui/button/button.ts b/miniprogram/ui/button/button.ts new file mode 100644 index 0000000..0dfbf9e --- /dev/null +++ b/miniprogram/ui/button/button.ts @@ -0,0 +1,41 @@ +Component({ + options: { + // multipleSlots: true, // 在组件定义时的选项中启用多slot支持 + }, + /** + * 组件的属性列表 + */ + properties: { + key: { + type: Number, + value: 0, + }, + word: { + type: String, + value: '', + }, + color: { + type: String, + value: '', + }, + }, + /** + * 组件的初始数据 + */ + data: { + word: '', + color: '', + }, + lifetimes: { + attached() {}, + }, + /** + * 组件的方法列表 + */ + methods: { + onDelete() { + const { key, word } = this.data; + this.triggerEvent('onDelete', { key, word }); + }, + }, +}); diff --git a/miniprogram/ui/button/button.wxml b/miniprogram/ui/button/button.wxml new file mode 100644 index 0000000..e69de29 diff --git a/miniprogram/utils/util.ts b/miniprogram/utils/index.ts similarity index 52% rename from miniprogram/utils/util.ts rename to miniprogram/utils/index.ts index 302e98e..c55d408 100644 --- a/miniprogram/utils/util.ts +++ b/miniprogram/utils/index.ts @@ -1,3 +1,20 @@ +export async function getMiniCodeImage(canvas: Canvas) { + return getImage(canvas, '/assets/imgs/mini-code.jpg'); +} + +export async function getImage(canvas: Canvas, path: string) { + return new Promise((resolve, reject) => { + const image = canvas.createImage(); + image.onload = () => { + resolve(image); + }; + image.onerror = () => { + reject('图片加载异常'); + }; + image.src = path; + }); +} + export const formatTime = (date: Date) => { const year = date.getFullYear(); const month = date.getMonth() + 1; diff --git a/project.config.json b/project.config.json index 4f4b886..761bd12 100644 --- a/project.config.json +++ b/project.config.json @@ -18,7 +18,7 @@ "postcss": false, "minified": true, "minifyWXSS": true, - "enhance": false, + "enhance": true, "showShadowRootInWxmlPanel": false, "packNpmRelationList": [ { @@ -29,7 +29,7 @@ "ignoreUploadUnusedFiles": true, "compileHotReLoad": false, "skylineRenderEnable": true, - "es6": false, + "es6": true, "packNpmManually": true }, "simulatorType": "wechat",