当前位置：首页 > news >正文

从设计到开发一个小程序页面

news 2025/7/1 17:30:52

巧妇难为无米之炊，想写功能但是没有好看的设计，边写边设计效率又不够高。mastergoAi生成的页面又不够好看，而且每月给的免费积分用得又超快，so决定自给自足。能有多难，先做，做了再改。

于是决定踏足设计，本期话题新手如何用mastergo设计小程序页面。

先去小红书上找找模子，看能否复原。摸了一晚上，感觉效果还行，比ai生成的要好看那么一点。只是想画个时钟出来不知道怎么画好，还的看怎么用canvas实现时钟动画。

附上mastergo网址：MasterGo 莫高设计 - AI 时代的数字界面生产平台

有了UI页面画起来就是快多了

今天用canvas绘制了时钟，然后调整了下整体的布局更简洁直观了

另外再附上canvas绘制时钟代码，canvas越写越有意思了

// components/stars/stars.ts
let timer = null
Component({lifetimes: {attached() {this.createSelectorQuery().select("#myCanvas2").fields({node: true,size: true}).exec(res => this.init(res));},detached() {if (timer) {clearInterval(timer)}}},/*** 组件的方法列表*/methods: {init(res) {const width = res[0].widthconst height = res[0].height// 设置画布宽高const canvas = res[0].nodeconst ctx = canvas.getContext('2d')canvas.width = widthcanvas.height = heightconst r = width / 2const hourNeedle = r * 1 / 2const minuteNeedle = r * 2.5 / 4const secondNeedle = r * 4 / 5// 帧渲染回调const draw = () => {const now = new Date();const hour = now.getHours();const minute = now.getMinutes();const second = now.getSeconds();const secondDeg = (second / 60) * Math.PI * 2;const minuteDeg = ((second / 60 + minute) / 60) * Math.PI * 2;const hourDeg = ((((second / 60 + minute) / 60) + hour) / 12) * Math.PI * 2;this.render(ctx, width, height, secondDeg, secondNeedle, minuteDeg, minuteNeedle, hourDeg, hourNeedle)// 注册下一帧渲染// canvas.requestAnimationFrame(draw)}timer = setInterval(() => {draw()}, 1000)},//画背景框renderCircle(ctx, width) {ctx.beginPath()ctx.lineWidth = '1'ctx.arc(width / 2, width / 2, width / 2 - 2, 2, 4 * Math.PI);ctx.strokeStyle = '#000'ctx.stroke()ctx.beginPath()ctx.arc(width / 2, width / 2, width / 2 - 6, 2, 4 * Math.PI);ctx.strokeStyle = '#000'ctx.stroke()ctx.beginPath()ctx.arc(width / 2, width / 2, 3, 2, 4 * Math.PI);ctx.strokeStyle = '#000'ctx.stroke()ctx.fillStyle = '#000'ctx.fill()let count = 0while (count < 60) {const deg = (Math.PI / 30) * countconst r = width / 2 - 6const r1 = r - 4const r2 = r - 8const r3 = r - 18let R = r1if (count % 5 == 0) {R = r2let word = count / 5 == 0 ? 12 : count / 5let w = ctx.measureText(word).width;ctx.fillText(word, width / 2 + r3 * Math.sin(deg) - w / 2, width / 2 - r3 * Math.cos(deg) + w / 2)}ctx.beginPath()ctx.moveTo(width / 2 + r * Math.sin(deg), width / 2 - r * Math.cos(deg))ctx.lineTo(width / 2 + R * Math.sin(deg), width / 2 - R * Math.cos(deg))ctx.strokeStyle = '#000'ctx.stroke()count++}ctx.font = '12px bold'},// 画时针render(ctx, width, height, secondDeg, secondNeedle, minuteDeg, minuteNeedle, hourDeg, hourNeedle) {ctx.clearRect(0, 0, width, height)this.renderCircle(ctx, width)ctx.beginPath()ctx.moveTo(width / 2 + (-10) * Math.sin(minuteDeg), width / 2 - (-10) * Math.cos(minuteDeg));ctx.lineTo(width / 2 + minuteNeedle * Math.sin(minuteDeg), width / 2 - minuteNeedle * Math.cos(minuteDeg));ctx.lineCap = 'round'ctx.lineWidth = '2'ctx.stroke();ctx.beginPath()ctx.moveTo(width / 2 + (-10) * Math.sin(hourDeg), width / 2 - (-10) * Math.cos(hourDeg));ctx.lineTo(width / 2 + hourNeedle * Math.sin(hourDeg), width / 2 - hourNeedle * Math.cos(hourDeg));ctx.lineCap = 'round'ctx.lineWidth = '3'ctx.stroke();ctx.beginPath()ctx.moveTo(width / 2 + (-10) * Math.sin(secondDeg), width / 2 - (-10) * Math.cos(secondDeg));ctx.lineTo(width / 2 + secondNeedle * Math.sin(secondDeg), width / 2 - secondNeedle * Math.cos(secondDeg));ctx.lineCap = 'round'ctx.lineWidth = '1'ctx.strokeStyle = 'red'ctx.stroke();},}
})

时钟效果可查看微信小程序“哆喵口袋”